vue3项目中实现无侵入式埋点

本文介绍了一种通过封装曝光和点击事件，降低业务与埋点代码耦合的设计，利用Vue指令实现事件追踪，提升代码可维护性。实例展示了如何在Vue应用中全局绑定并传递参数到不同类型的事件上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、背景：

由于每次上过线新功能，对于新功能的曝光和点击事件进行埋点，在用户行为触发位置调用事件上报函数进行行为上报，缺点是埋点和业务耦合度比较高，工作量比较大，后期不好维护

2、设计思路：

通过对曝光、点击事件的统一封装完成事件上报，使得埋点和业务代码一定程度上解耦合。

3、代码

曝光事件 exposure.ts

export default class Exposure{
  add(entry) {
    const tp = entry.el.attributes['track-params'].value
    track(tp) //自定义的埋点事件
  }
}

点击事件 click.js

export default class Click {
  add(entry) {
    const tp = entry.el.attributes['track-params'].value
    entry.el.addEventListener('click', function() {
      track(tp) //自定义的埋点事件
    })
  }
}

事件的绑定 tranck.js

import Vue from 'vue'
import Exposure from './exposure'
import Click from './click'

// 实例化曝光和点击
const exp = new Exposure()
const cli = new Click()

Vue.directive('track', {
  // 调用指令声明周期钩子函数bind，其他钩子函数请移步官网
  bind(el, binding) {
    // 获取指令参数
    const { arg } = binding
    arg.split('|').forEach(item => {
      // 点击
      if (item === 'click') {
        cli.add({ el })
      } else if (item === 'exposure') {
        exp.add({ el })
      }
    })
  }
})

全局绑定 main.js

import './directives/track'

使用

// 点击事件
<div v-track:click></div>

// 点击事件带参数
<div v-track:click :track-params="12455"></div>

// 曝光事件
<div v-track:exposure></div>

// 曝光事件带参数
<div v-track:exposure :track-params="12455"></div>

// 曝光事件并点击带参数
<div v-track:click|exposure :track-params="12455"></div>