前端埋点方法解析及优缺点分析

1.文档说明

本文档是对前端埋点方案的梳理，整个文档会对现在主流方向的前端埋点方案进行分析整理。意在帮助产品经理和开发人员了解用户现实使用需求，为后期改进产品提供重要基础指标，优化用户体验的依据。文档中所有的代码嵌入都是基于vue@3.2.1版本框架。

2.现有埋点方案分析

前端市场现有的埋点方案分别是：代码埋点，可视化埋点，无埋点三种埋点方案。

2.1代码埋点优缺点分析

代码埋点就是开发人员在指定的位置通过手写代码埋点。目前代码埋点分为命令式埋点和声明式埋点。

(1)命令式埋点

命令式埋点需要开发人员在需要埋点的dom节点处手动加入代码。如页面按钮的点击，页面的跳转时都会加入回调函数，以这种方式埋点采集数据。

// 点击按钮时埋点methods:{handleList(){//业务逻辑sendRequest(params); //手动埋点}}复制代码

如上命令式埋点其实在很多开发场景都可以实现但不合适，缺点是在业务逻辑中插入埋点代码会导致代码冗余且高耦合，项目越到后期代码就难优化冗余度就越高，不利于项目后期维护和升级。

(2)声明式埋点

声明式埋点是基于vue框架的自定义指令，可以一定程度的减小代码冗余解决代码耦合的问题。

<button v-focus="{type:"click",key:"shop"}" @click=”handleShop”>购买</button>复制代码

// 自定义指令directives:{focus:{bind:function(el,binding,vnode){el.addEventListener('click',()=>{sendRequest(binding.value)}) }}}复制代码

实例说明：type：“事件类型”这个事件类型指当前元素添加的事件，比如点击购买按钮时会将当前的事件类型（click）和埋点标识(shop)传到服务端。根据以上举例可以看出自定义指令更适合用在项目中埋点，只需要自定义指令就可以在项目中所有的组件都使用这个指令。声明式指令的优点：最小程度的减小埋点代码与业务代码的耦合，提高代码可维护和可阅读性，一次定义多次使用满足埋点使用场景。缺点：需要手动在需要埋点的节点中添加指令。

2.2可视化埋点的优缺点分析

可视化埋点方案是使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」，前端在页面加载时，可以读取配置数据，自动调用接口进行埋点。如开源的Mixpanel。优点：可视化埋点可通过工具实现埋点，便于分析用户习惯和产品改进。缺点：可视化埋点并不能准确的加入埋点，只能通过可见的按钮添加埋点，分析较难，针对性埋点较弱。

2.3无埋点的优缺点分析

前端自动采集全部事件并上报埋点数据。如国内的神策数据等。优点：不用开发人员手动加入埋点，工具可将项目中所有的事件添加埋点。缺点：项目中所有的事件和页面会添加埋点导致数据过大，较难分析。

2.4埋点综合分析

根据以上三种埋点方式发现其各有利弊。综合分析能源云5.0可采用代码埋点中的声明式埋点方案，在明确采集哪些数据时代码埋点准确性更强，且可将业务代码和埋点代码分隔开。

3.代码埋点

代码埋点是对项目上线后将要收集的事件或pv(page view)/uv(unique visitor)的用户行为数据采集。

(1)事件埋点方法

在埋点之前我们需要考虑如下几个问题。

a.项目上线之前需要给哪些按钮添加埋点？

b.采用什么样的方式埋点，如何标识事件按钮和事件类型？

c.埋点会不会对现有业务逻辑有影响？

d.添加埋点之后会不会影响用户体验？

e.埋点的数据是同步上传还是异步上传？

针对a问题必须要在项目上线之前明确给哪些按钮添加埋点，这个需要和产品相关人员确定。对b问题可以采取vue框架中自定义指令的方法埋点，声明一个指令并且在使用时传递参数，参数中定义事件类型和事件标识。这样就可以很明确是一个按钮统计分析很明确。对c问题我个人觉得对现有业务逻辑多少会有影响，虽然使用声明式方法可以降低业务代码和埋点代码的冗余度和耦合度，但是还是需要开发人员手动在需要埋点的dom节点添加代码或多或少都会入侵业务代码。就d问题其实可以忽略不计，如果埋点采集数据是交给服务端，而不是存储在用户端。最后针对e问题也可以很好地解释d问题，采用异步的方式发送埋点数据。这样用户端就不会出现因为网络慢引起的卡顿现象。想清楚这些问题就可以在想要采集的用户行为按钮处添加埋点。

首先定义全局指令。

const sendPonit = (data)=>{//异步发送埋点数据}// 全局定义指令Vue.directive("buriedPoint",{bind:function(el,binding,vnode){el.addEventListener('click',()=>{sendPonit({kye:binding.value.key,type:binding.value.type})})}})复制代码

然后在任意一个组件中都可以使用这个指令

<button v-buriedPoint='{type:"click",key:"shop"}' @click="handleShop">购物</button>复制代码

(2)Pv埋点方法在统计Pv时要特别注意一点，基于vue框架开发的单页面应用和普通的Pv采集方法有些不一样。在vue项目中采集Pv使用路由守卫方法。

//路由守卫router.beforeEach((to,from,next)=>{if(to.path !== from.path){// 一些业务逻辑sendPage(from.path);next()}})复制代码

这里说明一点路由守卫有beforeEach和afterEach两种方法，可以根据具体的业务需求选择使用哪种路由守卫。

转载于:https://juejin.im/post/5cef769cf265da1baa1e5898