手动埋点的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.…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知，帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量，能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度，还为机器人、医疗设备和制造业的智…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件，这个上传文件是整体功能的一部分，文件在上传的过程中…...