vue实现埋点
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)
})注意事项
- 生产环境和开发环境需要区分埋点逻辑，避免测试数据污染
- 考虑用户隐私和GDPR合规要求
- 对于SPA应用，需要注意页面停留时间的计算方式
- 大量埋点数据需要考虑节流和批量上报策略
