手动埋点的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）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...