全埋点的实现原理
七崽爱吃小饼干2026/03/06阅读 1
一、一句话总定义
全埋点（无埋点）就是：不侵入业务代码，通过 SDK 自动监听、采集、上报用户行为数据的技术方案。
核心技术：事件委托 + 全局 API 劫持 + 浏览器原生监听。
二、Web 全埋点 4 大核心实现原理
1. 点击事件采集：事件委托（最核心）
原理
利用浏览器事件冒泡机制，只在 document 上绑定一次点击事件，就能捕获页面上所有元素的点击，包括动态渲染的 DOM（列表、弹窗、异步加载按钮）。
实现步骤
- 给 document 绑定 click 捕获/冒泡事件
- 用户点击任何元素 → 事件冒泡到 document
- 通过
event.target拿到真正被点击的元素 - 自动采集元素信息：XPath、ID、Class、文本、坐标
- 组装事件数据 → 上报
为什么必须用事件委托？
- 不用给每个按钮绑事件 → 零侵入
- 动态 DOM 也能捕获 → 全覆盖
- 只绑定 1 次 → 性能极高
2. 页面访问采集：路由监听（PV/UV）
原理
监听浏览器地址变化，自动采集页面进入、离开、停留时长。
实现方式
- 监听 hashchange：哈希路由变化
- 监听 popstate：History 路由回退/前进
- 劫持 pushState/replaceState：捕获代码跳转
- 页面加载完成：触发首次 PV
采集数据
URL、标题、来源页、停留时间、进入/离开时间。
3. 请求/错误/性能采集：API 劫持
原理
重写浏览器原生 API，在不影响业务的前提下，自动采集数据。
劫持对象
- XMLHttpRequest → 监听所有 Ajax 请求
- fetch → 监听现代接口请求
- window.onerror / unhandledrejection → 监听 JS 错误
- Performance API → 采集页面性能（FP/FCP/LCP）
- Navigator → 采集设备信息（机型、系统、屏幕）
作用
自动监控接口成功率、错误率、页面加载速度。
4. 页面停留 & 关闭：生命周期监听
原理
利用浏览器页面生命周期事件，计算用户停留时长。
实现
- 进入页面记录开始时间
- 监听：
beforeunload页面关闭visibilitychange页面隐藏/显示pagehide页面离开
- 计算：离开时间 - 进入时间 = 停留时长
- 使用
navigator.sendBeacon保证关闭时数据不丢失
三、全埋点完整流程
全埋点实现分为 5 步：
- SDK 初始化
- 加载SDK → 生成用户唯一标识 UUID → 读取配置。
- 全局监听挂载
- 绑定事件委托点击监听
- 绑定路由监听
- 劫持请求、错误、性能API
- 绑定页面生命周期
- 用户行为触发
- 点击、页面切换、接口请求、报错、离开页面。
- 自动采集数据
- 通过 event.target 拿到元素
- 通过劫持拿到请求/错误
- 通过生命周期拿到时长
- 数据处理与上报
- 去重、脱敏、批量、节流
- 使用 sendBeacon / fetch 异步上报
- 失败缓存重试
四、最关键技术总结
- 点击采集 = 事件委托
- 页面切换 = 路由劫持 + History 监听
- 接口/错误 = 重写原生 API
- 停留时长 = 页面生命周期监听
- 不丢数据 = sendBeacon
- 性能 = 批量上报 + 防抖节流