前端埋点
埋点
埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。
如用户某个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代码，技术门槛较低，使用与部署也简单。避免了需求变更、埋点错误导致的重新埋点成本。