背景
埋点,即对用户行为进行数据采集。
对分析用户行为、观察产品使用状况、制定产品策略提供数据支持。
命令式埋点
开发者需手动调用埋点方法。
例如
// 页面加载时发送埋点请求
$(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属性及其子节点的变化。
可通过这些事件,进行埋点处理。