前端业务埋点

momo_养身版
442 阅读6分钟

1. 前端埋点的意义和作用

所谓前端埋点，是通过代码记录用户行为和事件，收集用户的操作数据。例如：用户的点击、浏览页面等行为。

通过埋点，数据化用户行为，从而为产品体验优化和业务决策提供数据支持。

同时，可以分析指标的正常波动范围，如果某些指标出现异常波动，建立告警机制，例如：平时注册转化率为 20% ～ 30%，某天只有 10% 的时候，需要关注去排查是否某个链路出现了功能性问题。

2. 指标介绍

以下是埋点中常见名称与含义。

2.1 UV（Unique Visitor）

  • 访问网站的独立用户数量，通过浏览器 cookie 或设备来区分用户.
  • 即使同一用户一天访问多次，也只记录访问一次.
  • 应用场景：衡量某个时间段内吸引了多少个用户.

2.2 PV (Page View)

  • 网页被浏览的总次数，同一用户即使重复进入同一个页面，也算一次 PV.
  • 应用场景：反应广告的曝光程度.

2.3 IP

  • 访问网站的独立 IP 数量.
  • 一个 IP 可能对应多个客户，假设一天内，同一个 IP 访问，只记为一个 IP.
  • 应用场景：衡量访问来源的分布情况.

2.4 VV (Visit)

  • 访问网站的总次数，用户每次打开浏览器进入网站算一次访问，通常具有会话超时原则（例如 30 分钟以内不算新访问）
  • 应用场景：衡量用户活跃程度。

注意：PV 和 VV 的区别：PV 着重的是访问的页面次数，VV 是访问网站的次数。

例如：用户在早上十点打开谷歌，浏览了三个页面，在下午两点，打开谷歌，浏览两个页面。

PV：5，VV：2

2.5 Bounce Rate

  • 跳出率：用户进入网站后离开，而不继续浏览其他页面的比例。
  • 计算公式：跳出率 = 跳出次数 / 总访问次数
  • 应用场景：评估用户兴趣。

2.6 Duration

  • 访问时长：在网站的平均停留时间
  • 应用场景：评估用户兴趣。

2.7 CR (Conversation Rate)

  • 转化率：用户完成某个目标行为的比例。
  • 计算公式：完成目标的用户数量 / 总访问数 x 100%
  • 例子：例如，100人访问注册页，其中30人完成了注册，那么转化率为 30%

3. 数据采集

3.1 全埋点

通过 sdk 自动监听用户在页面的所有操作(例如：点击、滚动、输入等)，无需开发者显示添加埋点代码。

  • 优点
    • 接入成本低，不需要开发者额外的处理。
  • 缺点
    • 可能有很多无用数据被上报。
    • 缺乏数据灵活性，无法采集业务数据，自定义数据类型。

3.2 代码埋点

最传统且精确的埋点方式，在代码里显示的添加埋点代码。

  • 优点
    • 灵活：可以完全自定义需要上报的内容，保证数据清晰。
  • 缺点
    • 需要将埋点代码入侵到业务代码中，当新增埋点或者修改埋点时，都需要修改代码。
    • 当需求迭代时，需要更新埋点。

3.3 可视化埋点

基于可视化工具，通过图形化界面配置埋点事件，无需修改代码。

这个没有使用过，不做评价😂

总结

• 全埋点 适合快速收集大量行为数据，尤其是在项目初期或对数据要求不高的场景。

• 代码埋点 适合业务需求较复杂或需要精准控制数据收集的场景，适用于数据分析较为细致的情况。

4. 埋点上报

在公司做埋点需求时，一般是使用 sdk 暴露出来的方法来做数据上报，不过了解了一下实现之后，上报的实现方式里面还是有一些小细节，可以记录一下～

4.1 http 请求上报

最常见的一种方式，是通过 ajax 或 fetch 发起 http 请求，将数据上报到服务器。 例如：

const eventData = {type: 'click', data: {timestamp: Date.now()}}
const trackUrl = '/track'

fetch(trackUrl, {
    method: 'POST',
    headers: {},
    body: JSON.stringfy(eventData)
})
  • 优点
    • 实现简单直接。
  • 缺点
    • 每次上报都会建立独立的 http 连接，频繁调用可能有性能问题。
    • 如果在页面卸载或者刷新时上报，请求可能在未发送时就被浏览器 cancel，导致数据上报失败。

4.2 利用图片上报

通过动态创建图片标签，将数据拼接到 url 中来完成上报。 由于 gif 图片格式的体积小，一般使用 1*1 像素的透明 gif 来进行上报。（最小的 BMP 文件 74字节，PNG 64字节，GIF 43字节）

const eventData = {type: 'click', data: {timestamp: Date.now()}}
const trackUrl = '/track'

const img = new Image();
img.src = `${trackUrl}?type=${eventData.type}&timestamp=${eventData.data.timestamp}`;

  • 优点

    • 兼容性好
    • 不会出现跨域问题

  • 缺点

    • 数据大小受 url 长度限制。
    • 不支持复杂的数据结构，如 JSON 对象。（因为 URL 只能包含字符串，JSON对象不能直接传递，需要对数据进行编码，但是编码之后，URL 可能会变得很长，超出浏览器限制，导致请求失败。）

4.3 Beacon API

sendBeacon 专门为数据上报设计的轻量级接口，会让浏览器在网络空闲的时候，异步的向服务器发送数据，因此在页面卸载后，可以保证数据被可靠的发送。

const eventData = {type: 'click', data: {timestamp: Date.now()}}
const trackUrl = '/track'

navigator.sendBeacon(trackUrl, JSON.stringify(eventData));
  • 优点
    • 不受页面卸载过程的影响，数据可靠。
    • 不会出现跨域问题。
    • 优先级低于 XHR 和 fetch，不会影响业务请求。
  • 缺点
    • 大小限制：要求 64KB 以内，如果超出限制，浏览器可能抛弃该请求。
    • 数据类型：只支持 string、Blob 等类型数据。
    • 请求头不可自定义：请求头固定为 Content-Type: text/plain; charset=UTF-8,如果要自定义请求头，例如自定义认证信息，无法通过 sendBeacon 实现。
    • 如果开启广告屏蔽插件（会拦截以track、analytics 为关键字的上报 URL），会屏蔽上报请求。

5. 其他

5.1 合规要求

如果埋点涉及到个人数据或行为数据，根据不同地区的法律法规，需要通过用户的同意。例如欧盟地区的法规要求（GDPR）

5.2 数据规范

对于收集的数据，应该确保一致性，确保统一的数据格式。

其次，对于时间这类数据，应该使用标准格式（例如ISO 8601 时间格式，eg：2024-12-15T14:30:45Z）

avatar
文章
阅读
粉丝