埋点前端vue（vue 前端埋点）

科技前沿 • 2025-05-26 11:00 • 阅读 33

大家好，我是讯享网，很高兴认识大家。

 <blockquote>

埋点又称为事件追踪，目的是收集用户行为数据，例如用户点击了什么按钮，浏览了哪些页面，浏览了多长时间、从哪个页面进入的当前页（转化率）等。

刨除node等实现方式，对于前端来说，保存这些操作或者说记录这些数据，最终一定是调用接口。

假设现在要实现记录用户点击了什么按钮，首先想到的是按钮点击事件，在vue项目中，就是@click，例如：

讯享网

在confirm()中实现接口调用，埋点用户操作。

但是，如果每一个点击都要记录，那就每一个@click事件都要调用一次埋点的接口，而且用户点击是功能性的操作，它目的是为了执行操作，而不是为了让我们埋点的。

或许读者会说，那就继续调用接口。这种方案理论可行，但可行性极低，例如：

①项目是开发得很完善了，现在要埋点，肯定不能全局搜索，全局修改。
②即使项目非常小，可以全局修改，那就意味着要整个项目进行测试，成本非常大。
③即使上述都不是问题，当一个点击事件要做的功能非常复杂，原本就要调用很多接口，且掺杂这同步异步、条件判断、变量依据、条件判断和变量依据的if…else…分支语句，再有分支语句是弹出各种弹框，弹框中的各种操作，关闭弹窗后还需要触发@click等情况，代码复杂冗长，这时还要加入这么多重复代码，为人诟病。

由于埋点的事件是独立的功能，只受用户操作的影响，完全可以独立出来。因此，我们需要想个其他方法来统一对这类事件捕获——自定义指令。

在挂载时监听点击事件，在卸载时移除点击事件，触发点击后调用埋点接口（封装在track.js中），代码如下：

directive.js

main.js

讯享网

完成上述自定义指令的实现和装载，下面就可以使用v-tracking指令实现点击事件的埋点：

利用路由拦截守卫，进入页面时记录必要入参和当前时间（beginTime），记录在vuex中，离开页面时，获取当前时间（endTime），算出差值即为用户在当前页码停留的时间。调用接口（track.js）传输埋点数据。

讯享网