前端埋点

埋点

埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。

如用户某个icon点击次数、观看某个视频的时长等。埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获。

埋点的重要性

数据从产生到应用于产品优化整个流程大概如下所示：数据生产➡️数据采集➡️数据处理➡️数据分析➡️数据驱动➡️产品优化或迭代，埋点是整个流程的开始点，产品优化是整个流程的终点。

前端监控

监控类型

数据监控

数据监控即监控用户行为，大概可以分为以下几个方面：

PV/UV：
- PV：page view页面浏览量或点击量；
- UV：指访问某个站点或点击某条新闻的不同 IP 地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为

性能监控

性能监控即通过监控分析产品性能，分为首屏性能和使用性能。大概可以分为以下几个方面：

首屏性能：
- 不同用户，不同机型和不同系统下的首屏加载时间
- 白屏时间
- 静态资源整体下载时间
使用性能：
- http请求的响应时间
- 页面渲染时间
- 页面交互动画完成时间

异常监控

异常监控即检测到产品使用异常，并及时上报异常情况。

Javascript的异常监控
样式丢失的异常监控

数据上报

向服务器端上报数据的方式有很多种，大致可以分为：ajax、img、navigator.sendBeacon

img上报

防止跨域：图片的src属性不会跨域，但是可以发起请求
防止阻塞页面加载，影响用户体验
相比JPG/PNG，GIF体积更小

navigator.sendBeacon上报

请求发出后会与当前页面脱离关联，作为浏览器的任务单独执行，可以保证数据一定会发出去，而且不会拖延卸载流程

异步上报
可跨域
可靠性

前端埋点方式

前端埋点是指在前端代码中添加跟踪和记录用户行为的代码，以便进行数据分析和监控。

实现前端埋点上报，需要收集监控的数据并提交给服务器进行保存，并进行数据分析和数据可视化。

常见的埋点上报方法有三种：手动埋点、可视化埋点、无埋点。

手动埋点

概念

手动埋点，也叫代码埋点，在需要埋点的业务逻辑位置加入埋点代码，调用埋点SDK的函数，在项目推出或者一定时间后调用接口上报埋点数据。

优缺点

优点：开发者可以方便地设置自定义属性和事件，适合深入下钻，进行精细化自定义分析
缺点：当项目工程量大时需要埋点的位置太多，而且需要产品、开发、运营之间相互反复沟通，容易出错，成本也高

实现手动埋点

JavaScript：可以获取浏览器运行情况，在业务代码中书写埋点代码

Performance：通过Performance可以获取DNS解析时间、TCP建立连接时间、白屏时间、DOM渲染完成时间、页面load时间等

DOM元素埋点

将信息以属性的形式添加到DOM元素上：

ini 复制代码

<span 
  data-tpm='vpxRlRxO8f1LAYjWc9jNOcGpIj5Fx6N0'
  data-tpm-args='{"pid":1, "uid":2}'
>登录</span>

统一在body上面挂载事件，通过e判断元素并处理逻辑：

ini 复制代码

document.body.addEventListener('click', function(e) {
  const el = e.target;
  // 获取数据
  const dataTpm = getNodeAttr(el,'data-tpm'); // vpxRlRxO8f1LAYjWc9jNOcGpIj5Fx6N0
  const dataTpmArgs = getNodeAttr(el,'data-tpm-args'); // {"pid":1, "uid":2}
  if (dataTpm || dataTpmArgs) {
    // 上报到服务器
    const data = {
      type: 'click',
      ec: dataTpm,
      ea: dataTpmArgs,
    };
    sendToWeb(data);
  }
}, false);

可视化埋点

概念

可视化埋点是将业务代码和埋点代码分离，提供一个可视化交互的页面，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等，最后输出的代码耦合了业务代码和埋点代码。

优缺点

优点：业务代码和埋点代码分离
缺点：可埋点的控件有限

实现

本可视化埋点的本质是用系统去插入本来需要手动插入的埋点，具有技术壁垒。

无埋点

概念

无埋点是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。

优缺点

优点：前端只需要加载一次埋点脚本
缺点：流量和采集的数据过于庞大，增加了服务器端的压力

实现无埋点

在项目中加载一段定义好的SDK代码，技术门槛较低，使用与部署也简单。避免了需求变更、埋点错误导致的重新埋点成本。

前端埋点方案