代碼埋點可采用命令試埋點和聲明式埋點：
命令式埋點：
click() {
//.... 這邊寫一些業務邏輯
sendRequest(params); //
}
可以發現，命令式埋點將埋點代碼侵入業務代碼，使得整體業務代碼變得繁瑣，且后續代碼愈加膨脹，難以維護；所以，我們需要將業務代碼和埋點代碼解耦，即聲明式埋點，從而提高埋點的效率及可維護性。
聲明式埋點：
聲明式埋點需要關注兩個問題：
-
- 需要埋點的DOM節點
- 所需攜帶的數據
在vue框架中，不提倡直接遍歷操作DOM樹，因此，我們可以使用vue的自定義指令來實現埋點數據統計
步驟1：引入神策的JavaScript SDK
import sa from './sensorsdata.min.js';
sa.init({
server_url: '...', //數據接收地址
heatmap: {
//是否開啟點擊圖，默認 default 表示開啟，自動采集 $WebClick 事件，可以設置 'not_collect' 表示關閉
clickmap:'default',
//是否開啟觸達注意力圖，默認 default 表示開啟，自動 采集 $WebStay 事件，可以設置 'not_collect' 表示關閉
scroll_notice_map:'not_collect'
}
});
sa.login(user_id);
sa.quick('autoTrack');
步驟2：定義自定義指令
//JS 代碼
Vue.directive('clickbtn', {
bind: (el, binding) => {
el.addEventListener('tap', ()=>{
const value = binding.value.buttonName; // 攜帶的數據
sa.track('clickName', {
buttonName: buttonName
});
});
}
});
// 自定義指令的使用
<ul @tap="getNotice" v-clickbtn="{buttonName: '公告'}">
<li v-for="item in items" :key="item._id">
<span class="title">{{item.title}}</span>
</li>
</ul>