web前端埋点及数据上报

简介

前端埋点即在产品客户端获取用户行为和使用情况的一种监控方式。通过埋点可以获取到用户行为数据，借助这些数据，我们可以从用户角度出发，升级迭代产品，使其更加贴近用户使用习惯，提升产品使用体验与用户留存率，使产品在市场上更具竞争力。

原理

用户在使用互联网产品时，在产品客户端会留下诸如浏览、点击、滑动等交互行为，使用埋点程序对这些行为进行监控和采集，将采集到的行为数据上报给服务器，达到监控与分析的目的。

目前web端产品常需要前端埋点来监控采集的数据内容主要分为三类：

1. 数据类，常用基本数据指标如：PV，UV，每个页面的停留时间，在页面触发了何种功能行为，访问来源等等，对基本数据进行挖掘与分析，还能生成用户画像，行为轨迹等高级数据。

常用埋点基本指标：

2. 性能类，常用性能指标如：页面渲染时间、用户与产品交互动效完成时间、网络请求响应完成时间等等。

常用埋点性能指标：

3. 异常类，如：静态资源加载错误，程序执行报错。

方案

前端埋点方案主要分为三类：

1. 无痕埋点

比较早的埋点方式，通过监听浏览器全局事件来收集用户数据，所以页面上所有的用户点击等操作行为都会被收集上报。

例如：

可以看出该方案埋点简单明了，与业务代码无耦合，收集的用户行为数据也比较全，但是数据量比较大，无用数据太多，给服务器增加了很大的压力，也无法进行定制化，只能收集常用的基本数据，一般用于粗颗粒度的数据分析。

目前无痕埋点主要采取第三方sdk的方式接入，如：百度统计，虽然是粗粒度数据分析，但也比较全面了。

2. 可视化埋点

通过一个可视化界面进行圈点等方式直接对业务页面进行埋点，这种可视化工具类似于dreamweaver, 所见即所得，通过可视化交互的方式在页面上的元素（按钮，链接等）进行埋点配置注入。

主要原理是在目标产品项目中嵌入开启可视化功能的SDK，通过WebSocket的方式和服务器、前端进行相互通信，SDK会定时收到服务器下发的页面请求；然后会上报页面快照和界面因子信息到服务器，服务器收到信息后会根据界面因子信息对页面的每个元素进行分析，根据控件的类型来标记哪些页面元素是可以被埋点的；最后将可埋点信息交给前端渲染，此时，前端Web页面上展示就的就是可以埋点的页面。

目前市场上已经有比较成熟的可视化埋点方案产品，如：

神策数据：神策分析｜私有化部署的用户行为分析平台 - 神策数据产品

诸葛IO：快速开始 · 诸葛io使用文档

以上两种埋点方案主要依靠第三方sdk提供的服务，sdk供应商虽然能提供尽可能全面的埋点数据，但想达到完全的定制化，获取更复杂的业务埋点数据还是有一定距离。

3. 手动代码埋点

产品开发人员根据业务分析需求在产品源代码层进行埋点。完全地满足定制化埋点需求，支持各种场景的业务需要，精准可控。但缺点也很明显，埋点代码侵入性大，容易与业务代码耦合，后期维护成本较高，一般公司自建埋点平台系统会采用这种方式。

埋点数据上报

前端埋点收集到的数据需要上报给服务端，目前较为常用的方案为三种。

1. 传统XHR请求

优点：可以灵活地设置请求头属性，post请求可以发送大体量数据，满足特定场景的埋点需求。

缺点：数据量大的请求占用带宽资源多，增加服务器压力。页面销毁时的监控埋点大概率上报失败。

2. Image 对象

利用图标对象的src属性发送get请求上报数据

优点：上报数据的请求不需要接收响应，可灵活跨域，src请求体量小，速度快，页面销毁时的监控埋点会等上报请求发送完毕，再执行页面卸载。

缺点：无法发送大体量数据，页面销毁时有监控埋点会让页面关闭速度变慢，影响用户体验。

3. Beacon API

Beacon api 是w3c新引入的补充性api，就是用来解决web页面在触发卸载销毁事件unload期间会中断所有异步xhr请求的问题。这个API给navigator对象增加了一个sendBeacon()方法。这个方法接收一个URL和一个数据有效载荷参数，并会发送一个POST请求。可选的数据有效载荷参数有ArrayBufferView、Blob、DOMString、FormData实例。它会保证页面在已经关闭的情况下也会发送请求。

不过它也有缺点：

只支持post请求，并且发送的数据量不会像正常xhr的post数据量那么大，最大数据量大小是由客户端（用户浏览器）版本决定的，chrome@70版本测试大概15MB左右。
因为是新补充的api，会存在浏览器兼容性问题，如图：

综上，埋点数据上报在上报轻量级的数据时可以采取image src属性进行上报，特定场景需要采集大量级的数据可以改用普通post请求方式，在需要监测用户关闭浏览器时上报数据，首选采用beaconApi方式，若用户的当前浏览器不支持该方法，可降级为image方案。目前很多大厂已采用这种混合式埋点方案，例如：