前端通用埋点方案

背景

埋点,即对用户行为进行数据采集。
对分析用户行为、观察产品使用状况、制定产品策略提供数据支持。

命令式埋点

开发者需手动调用埋点方法。
例如

// 页面加载时发送埋点请求
$(document).ready(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});
// 按钮点击时发送埋点请求
$('button').click(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});

优点:灵活。何时发怎么发任你把弄挑选。
缺点:耦合。埋点代码容易侵入业务代码。

DOM式埋点

// button表示需要埋点的dom,key表示埋点的唯一标识;act表示埋点方式
<button data-stat="{key:'111', act: 'click'}">埋点</button>

去遍历DOM树,找到 [data-stat] 的节点,给这个button绑上click事件,把这些参数在回调函数中通过请求发出去。

优点:解耦。与DOM相关的业务逻辑解耦。
缺点:

  • 异步加载的DOM,埋点时机不好把控。
  • DOM的移除或创建,会导致重复埋点和埋点事件的销毁不易。

跨页面埋点

  • URL传参:通过数组标识一个链接的位置信息,如 [站点 id,页面 id,模块 id,链接 index],通过四个参数可以惟一标识链接位置属性,使用 URL param 参数将数组数据传递给下跳页,等待由下跳页将数据发送出去。
  • 使用Beacon API

MutationObserver

MutationObserver是DOM3标准中提出的标准API,可监听DOM属性及其子节点的变化。
可通过这些事件,进行埋点处理。

参考

基于指令和混合的前端通用埋点方案
页面跳转时,统计数据丢失问题探讨

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容