前端数据监控和上报

 在前端项目中，有时候需要统计页面点击量，或者用户行为的数据，所以就有了前端数据监控，通过数据监控，可以对用户行为进行分析，从而对业务的重点进行调整

埋点方式分类

手动埋点

纯手动写代码，调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据

//命令式 
// 按钮点击时发送埋点请求 
$('button').click(()=>{
 // ... 业务逻辑 sendData(params); 
}); 

//声明式 
<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">打车</button> 
//声明了自定义属性data-mydata，可以在SDK中去扫描和识别这些自定义属性，并解析封装数据，在SDK中按照自定义规则去绑定事件并发送埋点数据 
//框架式
 //框架都有自己的各种生命周期，为了减少重复性的手动埋点次数，可以在各个生命周期位置，根据你的需求封装你所需的埋点

　特点：数据精确度和详细程度较高，但是对业务代码侵入性高，项目工程量大，需要埋点的位置太多，维护困难，手动埋点的错误率

 

自动埋点

不需要工程师在业务代码里面插入侵入式的代码。只需要简单的加载了一段定义好的SDK代码

 

特点：部署简单，数据全面，不容易遗漏，但是发送的埋点数量大（最好使用在那些按钮不是很多的，相对简单的页面），数据精确度和详细度不够

 

 

 

埋点上报策略

• 实时上报：对实时性要求高的采用

由于网络有时不稳定，或者一些原因导致埋点上报失败，数据缺失，可以采用延时上报，把数据存在localStorage，上报过后删除

有两种延时方案可以选择：

• 基于时间间隔：隔多长时间上报一次
• 基于数据条数：没累积多少条数据上报一次

 

延迟上报丢失数据问题

延迟上报策略下，如果没有达到数据上报的条件，用户退出页面，在用户不再进入的情况下，本地数据无法上报

解决方案：

监听页面beforeunload事件，在页面离开前把剩余不足N条的log全部上传