前端埋点

写在前面的话:
最近有需求做一个用户行为的统计, 用于统计用户喜好. 找到一个介绍的比较全的博客.

这是一道必考题, 我简单记一下,推荐大家阅读原文:
原文链接

1.前端监控的目的是：

(1)数据监控
数据监控，顾名思义就是监听用户的行为。常见的数据监控包括：

1. PV/UV:
   PV(page view)，即页面浏览量或点击量。
   UV:指访问某个站点或点击某条新闻的不同IP地址的人数
2. 用户在每一个页面的停留时间
3. 用户通过什么入口来访问该网页
4. 用户在相应的页面中触发的行为

***Ps:***统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。

(2)性能监控
性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验。常见的性能监控数据包括：

1. 不同用户，不同机型和不同系统下的首屏加载时间
2. 白屏时间
3. http等请求的响应时间
4. 静态资源整体下载时间
5. 页面渲染时间
6. 页面交互动画完成时间

***Ps:***这些性能监控的结果，可以展示前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能，比如兼容低版本浏览器的动画效果，加快首屏加载等等。

(3)异常监控
此外，产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：

1. Javascript的异常监控
2. 样式丢失的异常监控

2.目前常见的前端埋点方法分为三种:

(1) 代码埋点
代码埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候，需要在网页的初始化时，发送用户的访问信息等。
代码埋点的
优点：
可以在任意时刻，精确的发送或保存所需要的数据信息。
缺点：
工作量较大，每一个组件的埋点都需要添加相应的代码

(2)可视化埋点
通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。
可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。
缺点：
可视化埋点可以埋点的控件有限，不能手动定制。

(3)无埋点
无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。
从语言层面实现无埋点也很简单，比如从页面的js代码中，找出dom上被绑定的事件，然后进行全埋点。
优点：
由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象
缺点：
无埋点采集全量数据，给数据传输和服务器增加压力
无法灵活的定制各个事件所需要上传的数据

作者：yuxiaoliang 链接：https://juejin.im/post/5b62d68df265da0f9d1a1cd6
来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。