背景
埋點摄杂，即對用戶行為進(jìn)行數(shù)據(jù)采集。
對分析用戶行為铃剔、觀察產(chǎn)品使用狀況撒桨、制定產(chǎn)品策略提供數(shù)據(jù)支持。
命令式埋點
開發(fā)者需手動調(diào)用埋點方法键兜。
例如
// 頁面加載時發(fā)送埋點請求
$(document).ready(function(){
// ... 這里存在一些業(yè)務(wù)邏輯
sendRequest(params);
});
// 按鈕點擊時發(fā)送埋點請求
$('button').click(function(){
// ... 這里存在一些業(yè)務(wù)邏輯
sendRequest(params);
});
優(yōu)點：靈活凤类。何時發(fā)怎么發(fā)任你把弄挑選。
缺點：耦合普气。埋點代碼容易侵入業(yè)務(wù)代碼谜疤。
DOM式埋點
// button表示需要埋點的dom，key表示埋點的唯一標(biāo)識；act表示埋點方式
<button data-stat="{key:'111', act: 'click'}">埋點</button>
去遍歷DOM樹夷磕，找到 [data-stat] 的節(jié)點履肃，給這個button綁上click事件，把這些參數(shù)在回調(diào)函數(shù)中通過請求發(fā)出去坐桩。
優(yōu)點：解耦尺棋。與DOM相關(guān)的業(yè)務(wù)邏輯解耦。
缺點：
- 異步加載的DOM绵跷，埋點時機(jī)不好把控膘螟。
- DOM的移除或創(chuàng)建，會導(dǎo)致重復(fù)埋點和埋點事件的銷毀不易碾局。
跨頁面埋點
- URL傳參：通過數(shù)組標(biāo)識一個鏈接的位置信息萍鲸，如 [站點 id，頁面 id擦俐，模塊 id，鏈接 index]握侧，通過四個參數(shù)可以惟一標(biāo)識鏈接位置屬性蚯瞧，使用 URL param 參數(shù)將數(shù)組數(shù)據(jù)傳遞給下跳頁，等待由下跳頁將數(shù)據(jù)發(fā)送出去品擎。
- 使用Beacon API
MutationObserver
MutationObserver是DOM3標(biāo)準(zhǔn)中提出的標(biāo)準(zhǔn)API埋合，可監(jiān)聽DOM屬性及其子節(jié)點的變化。
可通過這些事件萄传，進(jìn)行埋點處理甚颂。
