当前位置: 首页 > news >正文

手动埋点的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

大模型文生图是一种基于人工智能大模型的技术&#xff0c;能够将自然语言文本描述转化为对应的图像。目前非常火的AI大模型赛道&#xff0c;有很多公司在此赛道竞争。详情可看这篇文章。 今天我们来看下如何调用WebAPI来实现文生图功能。我们一般都会将OpenAI的接口&#xff0…...

【大模型】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 它存储集群中每个节点可以使用的配置信息。它是一个高可用性键值存储&#xff0c;可以在多个节点之间分布。只有Kubernetes API服务器可以访问它&#xff0c;因为它可能具有一些敏感信息。这是一个分布式键值存储&#xff0c;所…...

人形机器人 - 仿生机器人核心技术与大小脑

以下是针对仿生机器人核心技术的结构化总结,涵盖通用核心技术与**“大脑-小脑”专用架构**两大方向: 一、机器人通用核心技术 这些技术是仿生机器人实现功能的基础,与生物体的“身体能力”对应: 1. 感知与交互技术 多模态传感器融合 视觉:3D视觉(如RGB-D相机)、动态目…...

OpenAI 快速入门

文章来源&#xff1a;OpenAI开发者平台 | OpenAI开发文档|OpenAI中文官方文档|ChatGPT中文版|ChatGPT教程 开发人员快速入门 了解如何发出您的第一个 API 请求。 OpenAI API 为最先进的 AI 模型提供了一个简单的接口&#xff0c;用于自然语言处理、图像生成、语义搜索和语音识…...

nginx 实战配置

一、配置一个默认80端口的&#xff0c;静态页面&#xff0c;路径是path1。 http://192.168.0.111/path1 &#xff0c; /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 配置外部目录&#xff08;本地文件系统&#xff09;详细解释 6. 使用 Web…...

java05(类、泛型、JVM、线程)---java八股

类 Java中有哪些类加载器 JDK自带有三个类加载器&#xff1a;bootstrap ClassLoader、ExtClassLoader、AppClassLoader。 ●BootStrapClassLoader是ExtClassLoader的父类加载器&#xff0c;默认负责加载%JAVA_HOME%lib下的jar包和class文件。 ●ExtClassLoader是AppClassLoade…...

Python+appium实现自动化测试

目录 一、工具与环境准备 二、开始测试 1、插上手机&#xff0c;打开usb调试&#xff0c;选中文件传输&#xff0c;我这里用华为手机为例 2、启动Appium Server GUI​编辑 3、启动 Inspector Session 4、录制脚本 使用Python和Appium进行自动化测试是一种常见的移动应用…...

Unity中如何判断URL是否为RTSP或RTMP流

技术背景 如何在Unity中判断一个字符串URL是否是RTSP或RTMP流。首先&#xff0c;RTSP通常以“rtsp://”开头&#xff0c;而RTMP则是“rtmp://”或者有时是“rtmps://”用于安全连接。 接下来&#xff0c;如何在C#中进行字符串的检查。最简单的方法应该是检查URL是否以这些协议…...

基于角色访问控制的UML 表示02

一个用户可以成为很多角色的成员&#xff0c;一个角色可以有许多用户。类似地&#xff0c;一个角色可以有多个权限&#xff0c;同一个权限可以被指派给多个角色。每个会话把一个用户和可能的许多角色联系起来。一个用户在激发他或她所属角色的某些子集时&#xff0c;建立了一个…...

【函数题】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.删除所有镜像源&#xff0c;恢复默认5.什么是conda-forge6.pip换源 1. 查看当前下载源 conda config --show channels 如果发现多个 可以只保留1个…...

DeepSeek与ChatGPT的全面对比

在人工智能&#xff08;AI&#xff09;领域&#xff0c;生成式预训练模型&#xff08;GPT&#xff09;已成为推动技术革新的核心力量。OpenAI的ChatGPT自发布以来&#xff0c;凭借其卓越的自然语言处理能力&#xff0c;迅速占据市场主导地位。然而&#xff0c;近期中国AI初创公…...

Spring AI发布!让Java紧跟AI赛道!

1. 序言 在当今技术发展的背景下&#xff0c;人工智能&#xff08;AI&#xff09;已经成为各行各业中不可忽视的重要技术。无论是在互联网公司&#xff0c;还是传统行业&#xff0c;AI技术的应用都在大幅提升效率、降低成本、推动创新。从智能客服到个性化推荐&#xff0c;从语…...

基于CT107D单片机综合训练平台的秒表设计

1. 项目简介 在CT107D单片机综合训练平台上&#xff0c;利用定时器T0、数码管模块和2个独立按键&#xff08;J5的2-3短接&#xff09;&#xff0c;设计一个具有清零、暂停、启动功能的秒表。秒表显示格式为&#xff1a;分-秒-0.05秒&#xff08;即50ms&#xff09;&#xff0c…...

opensuse [Linux] 系统挂在新的机械硬盘

opensuse [Linux] 系统挂在新的机械硬盘 需求描述 自用电脑型号如下&#xff1a; 电脑&#xff1a;Precision Tower 7810 (Dell Inc.) CPU &#xff1a; Intel Xeon CPU E5-2686 v4 2.30GHz GPU&#xff1a; NVIDIA GeForce GTX 1070 Linux版本&#xff1a;Linux version 6.…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...