当前位置：首页 > VUE

vue实现埋点

2026-02-16 23:33:45VUE

Vue 实现埋点的常用方法

自定义指令实现埋点

通过自定义指令可以方便地在模板中绑定埋点事件，例如点击事件或曝光事件。

// 自定义指令 v-track
Vue.directive('track', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const { event, data } = binding.value
      // 调用埋点上报方法
      trackEvent(event, data)
    })
  }
})

在模板中使用：

<button v-track="{ event: 'click_button', data: { id: 123 } }">点击按钮</button>

全局混入埋点方法

通过 Vue.mixin 可以将埋点方法混入到所有组件中，方便组件内调用。

Vue.mixin({
  methods: {
    $track(event, data) {
      // 实际埋点上报逻辑
      console.log('埋点事件:', event, '数据:', data)
      // 这里可以替换为实际的埋点SDK调用
    }
  }
})

组件内使用：

this.$track('page_view', { page: 'home' })

路由拦截实现页面访问埋点

利用 Vue Router 的全局守卫可以实现页面访问的自动埋点。

router.afterEach((to, from) => {
  // 上报页面访问事件
  trackEvent('page_view', {
    from: from.path,
    to: to.path,
    timestamp: Date.now()
  })
})

生命周期钩子埋点

在组件的生命周期钩子中实现埋点，适合组件级别的曝光统计。

export default {
  mounted() {
    this.$track('component_show', {
      component: 'Banner',
      id: this.bannerId
    })
  },
  beforeDestroy() {
    this.$track('component_hide', {
      component: 'Banner',
      duration: Date.now() - this.mountTime
    })
  }
}

第三方埋点SDK集成

对于专业的埋点需求，可以集成第三方SDK如Google Analytics、百度统计等。

// 初始化第三方SDK
import baiduAnalytics from 'baidu-tongji'

Vue.prototype.$baidu = baiduAnalytics

// 组件内使用
this.$baidu.trackEvent('category', 'action', 'label', 'value')

错误监控埋点

通过 Vue 的 errorHandler 可以实现全局错误监控和上报。

Vue.config.errorHandler = function (err, vm, info) {
  // 上报错误信息
  trackError({
    message: err.message,
    stack: err.stack,
    component: vm.$options.name,
    info: info
  })
}

性能监控埋点

通过监听 window.performance 可以实现页面性能数据上报。

window.addEventListener('load', () => {
  const timing = window.performance.timing
  const perfData = {
    dns: timing.domainLookupEnd - timing.domainLookupStart,
    tcp: timing.connectEnd - timing.connectStart,
    ttfb: timing.responseStart - timing.requestStart,
    domReady: timing.domComplete - timing.domLoading,
    load: timing.loadEventEnd - timing.navigationStart
  }
  trackPerformance(perfData)
})