主流埋点计划
现在主流的埋点计划包含
- 代码埋点
- 可视化埋点
- 无埋点
一、代码埋点
在须要埋点的节点挪用接口，照顾数据上传。如百度统计等；
瑕玷
工作量较大，每个组件的埋点都须要增添响应的代码，入侵营业代码，增添项目复杂度。
二、可视化埋点
经由历程可视化交互的手腕，替代代码埋点。将营业代码和埋点代码星散，供应一个可视化交互的页面，输入为营业代码，经由历程这个可视化体系，能够在营业代码中自定义的增添埋点事宜等等，末了输出的代码耦合了营业代码和埋点代码。
可视化埋点听起来比较嵬峨上，实际上跟代码埋点照样区分不大。也就是用一个体系来完成手动插进去代码埋点的历程。
瑕玷:
营业属性数据，比方，订单号、金额、商品数据量等，一般要挪用背景的接口，可视化埋点在这方面的支撑有限；
须要借助第三方东西完成。
三、无埋点
无埋点并不是说不须要埋点，而是悉数埋点，前端的恣意一个事宜都被绑定一个标识，一切的事宜都别纪录下来。经由历程按期上传纪录文件，合营文件剖析，剖析出来我们想要的数据，并天生可视化报告供专业人员剖析因而完成“无埋点”统计。 瑕玷
没法天真的定制各个事宜所须要上传的数据
无埋点收集全量数据，给数据传输和服务器增添压力
代码埋点分类
代码埋点分为 敕令式埋点和声明式埋点
敕令式埋点
望文生义，开发者须要手动在须要埋点的节点处举行埋点。如点击按钮或链接后的回调函数、页面ready时举行要求的发送。人人一定都很熟习如许的代码：
// 页面加载时发送埋点要求
$(document).ready(function(){
// ... 这里存在一些营业逻辑
sendRequest(params);
});
// 按钮点击时发送埋点要求
$('button').click(function(){
// ... 这里存在一些营业逻辑
sendRequest(params);
});声明式埋点
声明式埋点对敕令式埋点做了革新，将埋点的代码与详细的营业逻辑解耦。从而进步埋点的效力和代码的可维护性。代码以下:
// key示意埋点的唯一标识；act示意埋点体式格局
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button> 由于项目采纳Vue框架，所以运用Vue中的自定义指令完成声明式埋点。
Vue.directive('log', {
bind( el, binding ){
el.addEventListener('click', ()=>{
Axios.post
})
}
}); 只须要在须要纪录的组件中设置运用v-log指令，加上概况参数就能够完成用户轨迹纪录。以下:
// caption示意埋点的模块；paras示意用户的行动
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>