手动埋点的demo
上代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>埋点示例</title>
</head><body><!-- 多种埋点触发元素 --><button id="track-button">点击事件埋点</button><form id="demo-form"><input type="text" placeholder="输入内容" name="username"><button type="submit">提交表单</button></form><div class="ad-banner" style="height: 1000px; margin-top: 1200px;">滚动到此处触发曝光埋点</div><script>// ====================== 核心工具函数 ======================// 生成唯一用户ID (持久化存储)const getUserId=() => {let userId=localStorage.getItem('userId');if(!userId) {userId=`user_${Math.random().toString(36).substr(2,9)}`;localStorage.setItem('userId',userId);}return userId;};// 获取页面基本信息const getPageContext=() => ({url: window.location.href,referrer: document.referrer,screen: `${window.screen.width}x${window.screen.height}`,userAgent: navigator.userAgent});// ====================== 埋点主函数 ======================function trackEvent (eventType,customData={}) {// 合并公共数据和自定义数据const eventData={// 基础信息event_type: eventType,timestamp: new Date().toISOString(),// 用户信息user_id: getUserId(),session_id: sessionStorage.getItem('sessionId')||(() => {const id=`session_${Date.now()}`;sessionStorage.setItem('sessionId',id);return id;})(),// 设备与页面信息...getPageContext(),// 自定义数据...customData};// 发送到测试API（实际项目替换为真实接口）fetch('https://httpbin.org/post',{method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(eventData)}).then(res => res.json()).then(data => console.log('埋点成功:',data.json)).catch(err => console.error('埋点失败:',err));}// ====================== 多种埋点场景示例 ======================// 1. 点击事件埋点document.getElementById('track-button').addEventListener('click',() => {trackEvent('button_click',{button_id: 'track-button',button_text: '点击事件埋点'});});// 2. 表单提交埋点document.getElementById('demo-form').addEventListener('submit',(e) => {e.preventDefault();const formData=new FormData(e.target);trackEvent('form_submit',{form_id: 'demo-form',form_data: Object.fromEntries(formData)});});// 3. 广告曝光埋点（滚动到视口时触发）const adBanner=document.querySelector('.ad-banner');const observer=new IntersectionObserver((entries) => {entries.forEach(entry => {if(entry.isIntersecting) {trackEvent('ad_impression',{ad_id: 'banner_1',position: entry.boundingClientRect.y});observer.unobserve(adBanner); // 仅触发一次}});});observer.observe(adBanner);// 4. 页面生命周期埋点// 页面加载完成trackEvent('page_view',{page_type: 'homepage',load_time: performance.timing.loadEventEnd-performance.timing.navigationStart});// 页面离开时window.addEventListener('beforeunload',() => {trackEvent('page_leave',{time_spent: Date.now()-performance.timing.navigationStart});});</script>
</body></html>相关文章：
手动埋点的demo
上代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>埋点示例</title> </head><b…...
大模型开发实战篇5：多模态--文生图模型API
大模型文生图是一种基于人工智能大模型的技术，能够将自然语言文本描述转化为对应的图像。目前非常火的AI大模型赛道，有很多公司在此赛道竞争。详情可看这篇文章。 今天我们来看下如何调用WebAPI来实现文生图功能。我们一般都会将OpenAI的接口࿰…...
【大模型】DeepSeek 高级提示词技巧使用详解
目录 一、前言 二、DeepSeek 通用提示词技巧 2.1 DeepSeek 通用提示词技巧总结 三、DeepSeek 进阶使用技巧 3.1 DeepSeek一个特定角色的人设 3.1.1 为DeepSeek设置角色操作案例一 3.1.2 为DeepSeek设置角色操作案例二 3.2 DeepSeek开放人设升级 3.2.1 特殊的人设&#…...
【第14章：神经符号集成与可解释AI—14.2 可解释AI技术：LIME、SHAP等的实现与应用案例】
在这里插入图片描述 凌晨三点的ICU病房，值班医生李主任盯着AI辅助诊断系统的红色警报——这套准确率高达95%的深度学习系统，突然建议对一位肾衰竭患者进行肝移植手术。正当医疗组陷入混乱时，李主任打开了系统的"解释模式"，屏幕上立即跳出SHAP分析图：模型误将CT…...
Python中使用Minio实现图像或视频文件的存储
目录 一、Minio的基本介绍1.Minio是什么2.Minio的优势 二、使用步骤1.启动Minio2.创建桶3.在Python中使用Minio3.1安装并导入minio包3.2创建mino_utils工具类 三、操作演示1.引入minio_utils工具类2.上传视频文件3.获取视频文件 总结 一、Minio的基本介绍 1.Minio是什么 Mini…...
Kubernetes-master 组件
以下是Kubernetes Master Machine的组件。 etcd 它存储集群中每个节点可以使用的配置信息。它是一个高可用性键值存储，可以在多个节点之间分布。只有Kubernetes API服务器可以访问它，因为它可能具有一些敏感信息。这是一个分布式键值存储，所…...
人形机器人 - 仿生机器人核心技术与大小脑
以下是针对仿生机器人核心技术的结构化总结，涵盖通用核心技术与**“大脑-小脑”专用架构**两大方向： 一、机器人通用核心技术 这些技术是仿生机器人实现功能的基础，与生物体的“身体能力”对应： 1. 感知与交互技术 多模态传感器融合 视觉：3D视觉（如RGB-D相机）、动态目…...
OpenAI 快速入门
文章来源：OpenAI开发者平台 | OpenAI开发文档|OpenAI中文官方文档|ChatGPT中文版|ChatGPT教程 开发人员快速入门 了解如何发出您的第一个 API 请求。 OpenAI API 为最先进的 AI 模型提供了一个简单的接口，用于自然语言处理、图像生成、语义搜索和语音识…...
nginx 实战配置
一、配置一个默认80端口的，静态页面，路径是path1。 http://192.168.0.111/path1 ， /path1路径指向linux的/data/index1.html vi /data/nginx-1.24.0/conf/nginx.conf 文件添加以下配置 location /path1 { alias /data/…...
WebMvcConfigurer 介绍
WebMvcConfigurer 介绍 1. 什么是WebMvcConfigurer 介绍2. WebMvcConfigurer接口常用的方法3. 使用WebMvcConfigurer实现跨域4. 使用WebMvcConfigurer配置拦截器5. 使用WebMvcConfigurer配置静态资源5.1 配置外部目录（本地文件系统）详细解释 6. 使用 Web…...
java05(类、泛型、JVM、线程)---java八股
类 Java中有哪些类加载器 JDK自带有三个类加载器：bootstrap ClassLoader、ExtClassLoader、AppClassLoader。 ●BootStrapClassLoader是ExtClassLoader的父类加载器，默认负责加载%JAVA_HOME%lib下的jar包和class文件。 ●ExtClassLoader是AppClassLoade…...
Python+appium实现自动化测试
目录 一、工具与环境准备 二、开始测试 1、插上手机，打开usb调试，选中文件传输，我这里用华为手机为例 2、启动Appium Server GUI编辑 3、启动 Inspector Session 4、录制脚本 使用Python和Appium进行自动化测试是一种常见的移动应用…...
Unity中如何判断URL是否为RTSP或RTMP流
技术背景 如何在Unity中判断一个字符串URL是否是RTSP或RTMP流。首先，RTSP通常以“rtsp://”开头，而RTMP则是“rtmp://”或者有时是“rtmps://”用于安全连接。 接下来，如何在C#中进行字符串的检查。最简单的方法应该是检查URL是否以这些协议…...
基于角色访问控制的UML 表示02
一个用户可以成为很多角色的成员，一个角色可以有许多用户。类似地，一个角色可以有多个权限，同一个权限可以被指派给多个角色。每个会话把一个用户和可能的许多角色联系起来。一个用户在激发他或她所属角色的某些子集时，建立了一个…...
【函数题】6-10 二分查找
6-10 二分查找 1 题目原文2 思路解析2.1 基本二分查找算法2.2 常用二分模板2.2.1 第一个大于等于目标值的元素下标2.2.2 第一个大于目标值的元素下标2.2.3 最后一个小于等于目标值的元素下标2.2.3 最后一个小于目标值的元素下标2.2.4 小结 3 代码实现3.1 本题代码实现3.1.1 递归…...
关于conda换镜像源，pip换源
目录 1. 查看当前下载源2. 添加镜像源2.1清华大学开源软件镜像站2.2上海交通大学开源镜像站2.3中国科学技术大学 3.删除镜像源4.删除所有镜像源，恢复默认5.什么是conda-forge6.pip换源 1. 查看当前下载源 conda config --show channels 如果发现多个 可以只保留1个…...
DeepSeek与ChatGPT的全面对比
在人工智能（AI）领域，生成式预训练模型（GPT）已成为推动技术革新的核心力量。OpenAI的ChatGPT自发布以来，凭借其卓越的自然语言处理能力，迅速占据市场主导地位。然而，近期中国AI初创公…...
Spring AI发布！让Java紧跟AI赛道！
1. 序言 在当今技术发展的背景下，人工智能（AI）已经成为各行各业中不可忽视的重要技术。无论是在互联网公司，还是传统行业，AI技术的应用都在大幅提升效率、降低成本、推动创新。从智能客服到个性化推荐，从语…...
基于CT107D单片机综合训练平台的秒表设计
1. 项目简介 在CT107D单片机综合训练平台上，利用定时器T0、数码管模块和2个独立按键（J5的2-3短接），设计一个具有清零、暂停、启动功能的秒表。秒表显示格式为：分-秒-0.05秒（即50ms），…...
opensuse [Linux] 系统挂在新的机械硬盘
opensuse [Linux] 系统挂在新的机械硬盘 需求描述 自用电脑型号如下： 电脑：Precision Tower 7810 (Dell Inc.) CPU ： Intel Xeon CPU E5-2686 v4 2.30GHz GPU： NVIDIA GeForce GTX 1070 Linux版本：Linux version 6.…...
2026数据科学学习路线图：从Python基础到深度学习部署实战
1. 数据科学学习路线图：一份面向2026年的实战指南 如果你正站在数据科学的大门前，看着里面琳琅满目的技术栈和层出不穷的新名词感到迷茫，不知道从哪里开始，也不知道该往哪里走，那么你来对地方了。这份路线图不是一份简…...
Savor：双协议LLM代理网关部署与核心功能详解
1. 项目概述：Savor，一个双协议LLM代理网关如果你正在使用像OpenClaw、Claude Code这类客户端来调用大模型API，或者你的应用集成了OpenAI/Anthropic的SDK，那么你很可能遇到过几个头疼的问题：工具调用陷入死循环…...
高效运筹优化工具实战：5个核心模块深度解析与配置指南
高效运筹优化工具实战：5个核心模块深度解析与配置指南 【免费下载链接】or-tools Googles Operations Research tools: 项目地址: https://gitcode.com/gh_mirrors/or/or-tools OR-Tools是Google开发的高效运筹学工具库，为复杂优化问题提供全面解…...
如何用PageCollectionLayout打造惊艳的iOS展开式集合视图
如何用PageCollectionLayout打造惊艳的iOS展开式集合视图 【免费下载链接】expanding-collection :octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by Ramotion 项目地址: https://gitcode.com/gh_mirrors/ex/…...
当ZYNQ的硬件SPI不够用时：用EMIO GPIO模拟多路SPI从机的完整方案
当ZYNQ的硬件SPI不够用时：用EMIO GPIO模拟多路SPI从机的完整方案 在物联网网关或工业数据采集系统中，经常需要同时连接多个SPI传感器或存储设备。ZYNQ芯片虽然内置硬件SPI控制器，但数量有限（通常仅1-2个），难…...
AI工具搭建自动化视频生成Video Combine
# 聊一个挺有意思的视频生成工具：Video Combine 这些年AI视频工具层出不穷，每天都能刷到新的产品。但说实话，多数工具要么太花哨，要么就是个包装壳子。前几天翻GitHub的时候，意外发现了一个叫Video Combine的东西&…...
Claude年度数据可视化工具：安全架构与社交分享实践
1. 项目概述：一个专为Claude用户打造的年度数据可视化与分享工具 又到年底了，对于深度使用AI工具的朋友们来说，回顾过去一年的使用数据总是件有趣的事。你可能会好奇，自己在Claude上到底花了多少“脑细胞”（或者说&am…...
基于OpenClaw框架的Sonos音箱CLI控制技能开发与自动化实践
1. 项目概述：一个为Sonos智能音箱打造的CLI技能工具如果你和我一样，家里有几台Sonos音箱，享受着它出色的音质和便捷的多房间同步功能，但同时又对官方App在某些场景下的“笨拙”感到一丝无奈，那么这个名为openclaw-skil…...
手机拍照背后的秘密：一文看懂ISP图像处理流水线（从RAW到JPEG全流程拆解）
手机拍照背后的秘密：一文看懂ISP图像处理流水线（从RAW到JPEG全流程拆解） 每次按下手机快门时，你是否好奇过那张瞬间生成的精美照片背后究竟发生了什么？从传感器捕捉的光信号到朋友圈里点赞无数的成片，中间隐…...
3分钟极速上手！通达信缠论可视化插件让技术分析效率提升300%
3分钟极速上手！通达信缠论可视化插件让技术分析效率提升300% 【免费下载链接】Indicator 通达信缠论可视化分析插件 项目地址: https://gitcode.com/gh_mirrors/ind/Indicator 对于广大缠论学习者和股票交易者来说，如何将抽象复杂的缠论理论转化为…...