手动埋点的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.…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
站群服务器的应用场景都有哪些？
站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...