一、明确目标
要知道利用埋点获取数据是要做什么样的用户分析
![](https://img-blog.csdnimg.cn/2020091421130826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01heGluZVpob3U=,size_16,color_FFFFFF,t_70)
二、获取数据
![](https://img-blog.csdnimg.cn/20200914211424181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01heGluZVpob3U=,size_16,color_FFFFFF,t_70)
三、埋点技术
![](https://img-blog.csdnimg.cn/20200914212221288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01heGluZVpob3U=,size_16,color_FFFFFF,t_70)
四、已有软件
![](https://img-blog.csdnimg.cn/20200914212308407.png)
五、声明式埋点的实现:
利用Vue的自定义指令原理,比如下边监控按钮点击的埋点
//在main.js中定义全局自定义指令
Vue.directive('log', { bind(el, binding) {
el.addEventListener('click', () => {
console.log(el.id)
console.log(binding.value)
}, false);
}
});
//在模板中添加埋点声明
<button v-log="{page:'customer',event:'click',id:'btn1'}" id="btn">测试</button>
参考:
https://segmentfault.com/a/1190000018404498
https://juejin.im/post/6844903856631971853
https://www.cnblogs.com/lcss/p/4547956.html
https://segmentfault.com/a/1190000011066120