代码埋点可采用命令试埋点和声明式埋点：
命令式埋点：
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>