前端 SDK 采集
问题
前端数据采集 SDK 是怎么工作的？
答案
SDK 核心模块
三种埋点实现原理
| 方式 | 实现原理 |
|---|---|
| 全埋点 | 监听 click、change、submit 等全局事件 + IntersectionObserver 曝光检测 |
| 代码埋点 | 开发手动调用 sdk.track('event_name', properties) |
| 可视化埋点 | 生成元素唯一路径（CSS Selector），运营圈选后 SDK 自动匹配上报 |
数据上报方式
| 方式 | 优点 | 缺点 |
|---|---|---|
navigator.sendBeacon | 页面关闭时也能发送 | 不支持自定义 Header |
fetch + keepalive | 灵活 | 部分旧浏览器不支持 |
Image 1x1 像素 | 兼容性最好、跨域 | 数据量受 URL 长度限制 |
| XMLHttpRequest | 通用 | 页面关闭时可能丢失 |
推荐上报策略
- 优先：
sendBeacon（页面关闭安全） - 降级：
fetch+keepalive - 批量：攒 10 条或 5 秒发一批（减少请求数）
常见面试问题
Q1: 如何保证数据不丢？
答案：
- 使用
sendBeacon在页面卸载时兜底发送 - 数据先写
localStorage，上报成功后删除 - 弱网环境自动重试（3 次失败后放弃）
Q2: 全埋点的数据量太大怎么办？
答案：
- 采样：只采集 10% 用户的全埋点数据
- 过滤：忽略高频无意义事件（如滚动）
- 压缩：gzip 压缩上报数据
- 存储分层：全埋点存冷存储（成本低），代码埋点存热存储
相关链接
- 前端监控与埋点 - 前端 SDK 设计
- 事件模型 - 事件数据结构