当前位置：首页 > VUE

vue前端埋点实现

2026-02-20 20:48:24VUE

Vue 前端埋点实现方法

自定义指令实现埋点

通过 Vue 的自定义指令可以方便地实现点击事件的埋点。创建一个指令如 v-track，在元素上使用时自动触发埋点上报。

Vue.directive('track', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const { value } = binding
      // 上报逻辑
      console.log('埋点事件:', value)
      // 实际项目中调用埋点SDK
      // trackEvent(value)
    })
  }
})

使用方式：

<button v-track="'button_click'">点击按钮</button>

混入全局埋点方法

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

Vue.mixin({
  methods: {
    $track(eventName, payload) {
      console.log('埋点事件:', eventName, payload)
      // 实际项目中调用埋点SDK
      // trackEvent(eventName, payload)
    }
  }
})

组件内使用：

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

路由拦截实现页面访问统计

通过 Vue Router 的全局守卫实现页面访问的自动埋点。

router.afterEach((to) => {
  // 上报页面访问
  console.log('页面访问:', to.path)
  // trackPageView(to.path)
})

错误边界埋点

通过 Vue 的错误捕获机制实现前端错误的埋点上报。

Vue.config.errorHandler = (err, vm, info) => {
  console.error('Vue错误:', err, info)
  // trackError(err, info)
}

性能数据埋点

使用 Performance API 获取页面性能数据并上报。

window.addEventListener('load', () => {
  const timing = performance.timing
  const loadTime = timing.loadEventEnd - timing.navigationStart
  console.log('页面加载时间:', loadTime)
  // trackPerformance({ loadTime })
})

第三方埋点SDK集成

对于成熟的商业项目，可以考虑集成专业的埋点SDK：

百度统计

<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?your-token";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
})();
</script>

Google Analytics

vue前端埋点实现

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>