前端用户行为分析

前端用户行为分析

监控模式

数据监控

监听用户行为

• PV/UV（浏览量和点击量）
• 用户每个页面停留时间
• 用户访问网页的入口
• 用户在各个页面触发的行为

性能监控

监听网页或者说产品在用户端的体验

• 不同用户，机型，系统首屏加载的时间
• http请求等待时间
• 静态资源加载时间
• 各页面渲染时候

前端埋点方案

代码埋点

以嵌入代码的形式进行埋点，监听用户点击事件，输入事件等将数据保存发送给server端

• 可在任意时刻，精确的发送或者保存所需要的数据
• 代码侵入性较强

可视化埋点

通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。 【脚本代码插入埋点代码】

• 定制化难度较大

无埋点

无埋点的概念即全埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。从语言层面实现无埋点也很简单，比如从页面的js代码中，找出dom上被绑定的事件，然后进行全埋点。

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

上报方案

监控数据

监控的分为三个阶段：用户进入网页首页、用户在网页内部交互和交互中报错。每一个阶段需要监控和上报的数据如下图所示

埋点方案

在实际项目中考虑到上报数据的灵活定制，以及减少数据传输和服务器的压力，在所需埋点处不多的情况下，常用的方式是代码埋点

上报周期和上报类型

如果埋点的事件不是很多，上报可以时时进行，比如监控用户的交互事件，可以在用户触发事件后，立刻上报用户所触发的事件类型。如果埋点的事件较多，或者说网页内部交互频繁，可以通过本地存储的方式先缓存上报信息，然后定期上报。

接着来确定需要埋点上报的数据，上报的信息包括用户个人信息以及用户行为，主要数据可以分为：

• who: appid(系统或者应用的id),userAgent(用户的系统、网络等信息)
• when: timestamp(上报的时间戳)
• from where: currentUrl(用户当前url)，fromUrl(从哪一个页面跳转到当前页面)，type(上报的事件类型),element(触发上报事件的元素）
• what: 上报的自定义扩展数据data:{},扩展数据中可以按需求定制，比如包含uid等信息