浅聊前端埋点

埋点分类

埋点是一种收集数据的方式，通过上报收集的数据，来进行运营分析，监控页面性能或异常。
通常分为代码埋点、可视化埋点和无埋点（也有叫全埋点）几类。
无埋点是自动采集事件进行数据上报， 例如百度统计、GrowingIO 等，实际上这个所谓的“无埋点”，只是相对于代码埋点少了加代码采集操作，相对于可视化埋点少了圈选操作，可视化埋点也属于无埋点的一种，是指接入三方的 sdk 之后，sdk 会统计一些常见通用数据，例如页面 PV/UV 等，可视化埋点例如 GrowingIO 可以圈选元素，统计元素的点击数据。

上报哪些数据

通常来说产品运营想要了解用户行为数据，所以会统计一些用户行为相关的数据，如页面浏览 PV/UV、 元素点击 PV/UV、元素曝光 PV/UV 、页面停留时长、曝光时长等数据。这些数据大部分都可以通过无埋点和可视化埋点来进行统计，无需过度侵入的代码开发即可实现。

uv可以用设备唯一标识来过滤。页面曝光也容易获取一些，在页面加载完成的时候进行上报，页面停留时长可以再进入时记录一下时间，离开记录时间，时间差就是页面的停留时长。但是页面元素的曝光就比较麻烦了，元素在视窗内曝光上报，需要检测元素何时在视窗中展示，何时离开视窗。一方面需要检测进入和离开页面时，元素是否在视窗，进入就在视窗需要上报，离开之前在视窗也需要上报，另一方面，页面在滚动的时候，需要检测元素是否进入和离开视窗。另外滚动检测不可实时否则性能消耗过大，需要防抖节流。
检测元素是否在视窗浏览器端可以用 Intersection observer 或者 getBoundingClientRect

技术可能想要查看页面的性能数据，收集错误信息数据等，window.performance 性能表现数据等，这些参数传递和收集则需要用到代码埋点，即使也用第三方自定义事件收集也需要在代码里添加收集数据，除了用三方 sdk 上报数据之外，有些公司可能有自己的大数据平台或者为了数据安全，需要上报到自己的接口，这个时候就需要自研 sdk。

至于错误数据，如果不想自己代码里上报，可以接一些开源库例如 sentry，如果想自己研发和上报也可以借鉴 sentry 的做法，监听错误事件，在错误事件里上报错误信息。

1. 资源加载错误；可利用 addEventListener('error', callback, true)采集

2. js 执行错误；可利用 window.onerror 采集

3. promise 错误；可利用 addEventListener('unhandledrejection', callback)采集

数据上报方式

如果是有些自定义需求三方 sdk 无法满足，则需要前端在代码里进行埋点上报，那么如何进行数据的上报，业界也有很多解决方案。

1. http 接口请求，可能遇到的问题，一般收集数据的域名和当前应用的域名不一致，接口上报会跨域，需要处理跨域，页面销毁后如何还能够将未上传的埋点数据成功上报。

2. img 标签发送请求，这种方式不存在跨域问题，这种使用方式也存在缺陷。首先对于 src 中的 URL 内容是有大小限制的，太大的数据量不适用。其次，在页面卸载的时候，若存在数据未发送的情况，会先将对应的数据发送完，再执行页面卸载。可能对于用户体验有一定的损耗。

3. Navigator.sendBeacon()用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。它主要用于将统计数据发送到 Web 服务器，同时避免了用传统技术（如：XMLHttpRequest）发送分析数据的一些问题，can i use大部分浏览器已经兼容了。

实际在上报过程中会sendBeacon结合img来使用。

数据收集之后的数据分析

数据可以根据需求存到日志库结合数据库，如若需要可视化，再把这些数据通过可视化的方式绘制各种线图饼图供运营使用。当然也有已经成熟的一些三方统计已经提供了这些功能，如果能满足需求也可。