当前位置：首页 > VUE

vue前端埋点实现

2026-01-20 04:46:16VUE

Vue 前端埋点实现方法

自定义指令埋点

在 Vue 中可以通过自定义指令实现埋点，这种方式适合对特定 DOM 元素进行点击或曝光统计。

// 注册全局指令
Vue.directive('track', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const { event, data } = binding.value
      // 调用埋点 SDK 或发送请求
      trackEvent(event, data)
    })
  }
})

使用方式：

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

混入 (Mixin) 方式

对于需要全局埋点的场景，可以使用混入方式在生命周期钩子中自动触发埋点。

const trackMixin = {
  mounted() {
    this.$track('page_view', {
      path: this.$route.path,
      component: this.$options.name
    })
  },
  methods: {
    $track(event, data) {
      // 实现埋点逻辑
      console.log(`Track event: ${event}`, data)
    }
  }
}

路由拦截埋点

通过 Vue Router 的导航守卫实现页面访问统计。

router.afterEach((to, from) => {
  trackPageView({
    from: from.path,
    to: to.path,
    timestamp: Date.now()
  })
})

全局错误捕获

利用 Vue 的 errorHandler 实现错误监控埋点。

Vue.config.errorHandler = (err, vm, info) => {
  trackError({
    message: err.message,
    component: vm.$options.name,
    info: info,
    stack: err.stack
  })
}

第三方埋点 SDK 集成

对于成熟的埋点方案，可以直接集成第三方 SDK 如 Google Analytics、Sentry 等。

import * as Sentry from '@sentry/vue'

Sentry.init({
  Vue,
  dsn: 'your-dsn-url',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0
})

性能监控埋点

通过 Performance API 实现页面性能数据采集。

window.addEventListener('load', () => {
  const timing = performance.timing
  const metrics = {
    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(metrics)
})