手动埋点的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.…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
