前端关于埋点

1. 事件埋点（点击/操作埋点）

最常用的埋点方式，专门追踪用户的交互行为（如点击、输入、滑动等），是分析用户操作路径的核心数据来源。

• 追踪对象：按钮、链接、输入框、弹窗等可交互元素。
• 收集信息 ：
  • 事件名称（如"click_login""click_pay"）；
  • 元素标识（如按钮ID、class）；
  • 触发时机、用户ID、当前页面URL；
  • 业务参数（如点击的商品ID、订单状态）。
• 实现方式 ：
  • 直接在元素事件回调中嵌入埋点代码（如 onClick 中调用上报函数）；
  • 通过事件委托统一监听（如监听 document 的 click 事件，根据目标元素判断是否需要上报）。
• 示例场景 ：
  • 统计"登录按钮"的点击量，分析用户登录意愿；
  • 追踪"加入购物车"按钮的点击，结合后续转化数据优化购买流程。

2. 曝光埋点（视图埋点）

用于统计元素被用户看见的次数（即"曝光"），尤其适用于广告、商品卡片、内容列表等场景，判断内容的吸引力。

• 核心逻辑：当元素进入用户视口（可见区域）且可见比例达到阈值（如50%以上）时，触发上报。
• 实现方式 ：
  • 使用 IntersectionObserver API（高效监听元素是否进入视口，性能优于滚动事件监听）；
  • 记录已曝光元素的唯一标识（如ID），避免重复上报。
• 收集信息 ：
  • 曝光元素ID（如商品ID、广告ID）；
  • 曝光时间、可见时长、所在页面位置；
  • 曝光时的用户行为（如是否点击）。
• 示例场景 ：
  • 电商APP的商品列表中，统计每个商品卡片的曝光次数，分析哪些商品更易被用户看到；
  • 信息流页面中，统计每条新闻的曝光量，优化内容推荐策略。

3. 业务埋点（自定义事件埋点）

针对特定业务流程的关键节点设计，用于追踪业务目标的完成情况，是评估业务效果的核心数据。

• 追踪对象：业务流程中的关键步骤（如注册成功、支付完成、订单取消、视频播放完成等）。
• 收集信息 ：
  • 业务事件名称（如"register_success""pay_complete"）；
  • 业务参数（如订单号、支付金额、用户等级、视频ID）；
  • 流程耗时（如从"加入购物车"到"支付完成"的时间）。
• 实现方式：在业务逻辑完成后主动调用埋点接口（如接口返回"支付成功"后触发上报）。
• 示例场景 ：
  • 用户完成注册后，上报"注册成功"事件，记录注册渠道、耗时；
  • 视频播放完毕后，上报"video_play_complete"，统计完播率。

4. 错误埋点（异常埋点）

用于监控前端代码的运行错误，帮助开发人员快速定位问题，提升产品稳定性。

• 追踪对象：JavaScript 错误、接口请求失败、资源加载失败等。
• 收集信息 ：
  • 错误类型（如 TypeError、NetworkError）；
  • 错误信息（如"Cannot read property 'xxx' of undefined"）；
  • 错误发生位置（文件名、行号）；
  • 环境信息（浏览器版本、设备型号、用户网络类型）。
• 实现方式 ：
  • 监听 window.onerror（捕获JS运行时错误）；
  • 监听 window.addEventListener('unhandledrejection')（捕获未处理的Promise错误）；
  • 接口请求拦截器中捕获HTTP错误（如404、500）。
• 示例场景 ：
  • 统计某页面"图片加载失败"的频率，优化图片资源；
  • 监控支付接口的失败率，及时发现后端服务问题。

5. 输入埋点（表单埋点）

专门针对用户表单输入行为的埋点，用于分析用户在填写表单时的痛点（如卡顿、放弃原因）。

• 追踪对象：输入框、下拉框、复选框等表单元素。
• 收集信息 ：
  • 输入开始/结束时间、输入时长；
  • 输入内容长度（脱敏处理，避免敏感信息）；
  • 纠错次数（如输入手机号时的删除、修改次数）；
  • 表单提交结果（成功/失败）。
• 实现方式 ：监听 input、change、blur 等事件，记录输入过程中的关键节点。
• 示例场景 ：
  • 分析用户注册表单的"密码输入"时长和修改次数，判断密码规则是否过于复杂；
  • 统计"收货地址"表单的放弃率，优化表单填写流程。

6. 性能埋点

用于监控前端页面性能指标，评估用户体验（如加载速度、交互流畅度）。

• 追踪对象：页面加载速度、资源加载时间、交互响应时间等。
• 收集信息 ：
  • 核心性能指标（如 FP 首次绘制、FCP 首次内容绘制、LCP 最大内容绘制）；
  • 资源加载时间（如JS/CSS加载耗时、接口请求耗时）；
  • 页面卡顿次数（如长任务 Long Task 出现的频率）。
• 实现方式 ：
  • 使用 Performance API 获取性能数据（如 performance.getEntries()）；
  • 监听 window.performance 相关事件（如 load、DOMContentLoaded）。
• 示例场景 ：
  • 统计首页的 LCP 指标，确保90%用户的加载时间在2秒内；
  • 监控某按钮点击后的响应延迟，优化交互性能。

总结

不同埋点方式的核心目标是从不同维度收集用户行为和系统状态数据：

• 事件埋点关注"用户做了什么操作"；
• 曝光埋点关注"用户看到了什么内容"；
• 业务埋点关注"用户完成了什么目标"；
• 错误/性能埋点关注"系统是否稳定、体验是否流畅"。

实际开发中需结合业务目标选择合适的埋点方式，避免无意义的冗余埋点，同时确保数据准确性和用户隐私合规。