手动埋点

前端埋点

前端埋点是一种收集产品数据的方式。通过埋点实现pu/uv统计、监测用户的行为操作等。

常见的埋点方案

手动埋点

写代码调用埋点SDK的函数，定制化采集减少服务器压力，前后端都可

缺点：开发人员工作较多，成本高，埋点会出现疏漏

可视化埋点

通过可视化页面交互点击替代手动埋点，解放程序员工作量，业务方可自行操作。

缺点：埋点控件有限，业务属性数据无法获取，元素未加标识作用的属性导致无法监测

全埋点

数据全量采集，收集信息全面

缺点：无效数据量大，服务器压力大

手动埋点

最近工作之余做了一个小项目，为了统计pv/uv和按钮点击率，做了手动埋点。

控件埋点

所有控件和按钮都有唯一的名字，在需要埋点的控件上加上自定义的指令，在点击控件时就可以记录下这次事件。

app.directive('eventTracking', {
  mounted(el:HTMLElement,binding:any) {
    el.addEventListener('click',()=>{
        const buttonName = binding.value;
        const pageName = 'xxxx';
        //进行埋点
    })
  }
})

 <el-button v-eventTracking="编辑">编辑</el-button>

页面切换埋点

router.beforeEach((to, from, next) => {
   //进行埋点
})