当我们想知道：'这个按钮有多少人点了？'、'用户在这个页面停留了多久？'、'哪个渠道来的用户转化率最高？'。
回答这些问题的核心技术手段，就是埋点（Tracking）。
一、什么是埋点？基本逻辑是什么？
1.1 定义
简单来说，埋点就是在特定的位置'埋'下一段代码或配置，当用户触发特定行为（如点击、浏览、输入）时，自动采集相关数据并发送到服务器的过程。
如果把网站比作一家超市，埋点就是安装在货架、收银台、门口的摄像头和传感器，记录顾客的行走路线、拿起商品的次数以及最终购买的行为。
1.2 基本逻辑流程
一个完整的埋点流程通常包含以下五个步骤：
- 触发（Trigger）： 用户产生行为（点击按钮、页面加载、接口请求等）。
- 采集（Collect）： 前端代码捕获该行为，并收集上下文信息（时间、URL、用户 ID、设备信息等）。
- 上报（Send）： 将收集到的数据通过 HTTP 请求发送到数据服务器。
- 存储（Store）： 服务器接收数据并写入数据库或数据仓库。
- 分析（Analyze）： 数据分析师通过可视化平台查看报表，产出结论。
核心数据模型（5W1H）：
- Who： 谁？（用户 ID、设备 ID）
- When： 什么时候？（时间戳）
- Where： 在哪里？（页面 URL、来源 Referer）
- What： 做了什么？（事件名称、事件 ID）
- How： 怎么做的？（网络环境、浏览器版本、操作系统）
- Why： 为什么？（业务参数，如商品 ID、订单金额）
二、为什么需要埋点？
通常需要埋点的地方非常多，大家默认它是'脏活累活'，但业务价值不容小觑。具体好处如下：
- 产品迭代依据： 通过 A/B 测试，对比两个版本的按钮颜色哪个点击率更高，用数据说话，而不是靠拍脑袋。
- 用户行为分析： 构建漏斗模型，分析用户从'浏览商品'到'加入购物车'再到'支付成功'的流失率，找到体验瓶颈。
- 异常监控： 埋点不仅记录业务行为，还可以记录 JS 错误、接口报错、页面加载性能（FCP、LCP），帮助快速定位线上问题。
- 商业价值评估： 评估广告投放效果，计算 ROI（投资回报率），决定预算投放在哪个渠道。
三、埋点方案（种类与实现）
目前业界主流的埋点方案主要有三种：代码埋点、声明式埋点、全埋点（无埋点）。
3.1 代码埋点（手动埋点）
这是最传统、最精确的方式。开发人员在代码中手动调用上报函数。
- 优点： 数据精确，可以携带丰富的业务参数（如订单号、用户等级），按需采集，数据量可控。
- 缺点： 侵入性强，代码耦合度高。每次新增需求都需要发版，历史数据难以回溯（没埋就没了）。
3.2 声明式埋点
通过在 DOM 元素上添加自定义属性来标记需要追踪的元素。
// 示例：点击购买按钮
btn.addEventListener(, {
(, {
: ,
: ,
: .()
});
});
