前端埋点你需要知道的事

为什么需要埋点？
用于收集页面中需要被回传的用户行为，数据收集，通过收集用户行为数据帮助了解网站功能是否满足用户需求、新功能上线是否达到设计的初衷，跟踪产品在用户端使用的情况，以监控数据为基础，指明产品优化的方向。
eg：域名 、ip、url、搜索的内容、按钮点击…
前端监控可以分为三类：数据监控、性能监控和异常监控。
(1)数据监控
数据监控，顾名思义就是监听用户的行为。
常见的数据监控包括：
PV/UV:PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为
统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。
(2)性能监控
性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验
常见的性能监控数据包括：
不同用户，不同机型和不同系统下的首屏加载时间
白屏时间
http等请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间
这些性能监控的结果，可以展示前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能，比如兼容低版本浏览器的动画效果，加快首屏加载等等。

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

目前常见的前端埋点方法分为三种：命令埋点、声明式埋点和无埋点。

1. 命令埋点
   命令埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码
   $(‘button’).click(function(){
   //相关的业务逻辑代码
   sendRequest(params)
   })
   代码埋点的优点：
   可以在任意时刻，精确的发送或保存所需要的数据信息。
   缺点：
   工作量较大，每一个组件的埋点都需要添加相应的代码

(2)声明式埋点
声明式埋点只需关心埋点的控件，还有控件需要的埋点数据，在dom上增加埋点信息即可

//key表示唯一的标识；act表示埋点的方式

<button  data-stat='{key:'111',act:'click'}'>埋点<button>

优点：降低埋点成本
缺点：绑定埋点事件次数的问题，怎样保证埋点事件不会被重复绑定到元素上，一次操作发了N个埋点请求 重复工作很多，还要处理冒泡。

(3)无埋点
无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都被记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。
从语言层面实现无埋点也很简单，比如从页面的js代码中，找出dom上被绑定的事件，然后进行全埋点。

由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象
缺点：
无埋点采集全量数据，给数据传输和服务器增加压力
无法灵活的定制各个事件所需要上传的数据