Vue2使用vue-gtag时页面跟踪、事件上报不生效如何解决

核心问题首先出在初始化配置的enabled: false字段：这个是插件的全局总开关，值为false时会完全阻断所有上报逻辑，不管是自动路由页面跟踪，还是你手动调用的pageview、event方法都不会执行。

按照以下步骤逐一排查修复即可：

1. 修正基础初始化配置 #

如果不需要做隐私授权弹窗控制，直接删除enabled: false配置项，或者显式设置为enabled: true即可开启默认上报：

import VueGtag from 'vue-gtag';
    
Vue.use(VueGtag, {
  config: { id: process.env.VUE_APP_GA },
  // 删除enabled: false，或设置 enabled: true
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

注意同步检查环境变量：Vue CLI 项目中只有以VUE_APP_开头的环境变量才会被注入到客户端代码，打包后确认process.env.VUE_APP_GA是你实际的GA测量ID，不要出现undefined的情况，否则插件无法完成初始化。

如果是因为合规需求需要用户同意后再开启上报，初始保留enabled: false是正确的，但必须在用户点击同意授权后手动调用激活方法，否则所有上报都会被拦截：

// 用户同意隐私政策、授权埋点上报后调用
this.$gtag.optIn()
// 激活后补报一次当前页面的pageview
this.$gtag.pageview(window.location.pathname)

2. 验证上报请求是否正常发出 #

修复配置后打开浏览器开发者工具，切换到Network面板，过滤collect关键词：

• 路由跳转、手动调用上报方法时，如果能看到对应collect请求发出，说明前端插件逻辑正常，数据没在GA后台显示是因为GA后台本身有数据延迟：实时报告一般10秒内展示，非实时报告需要24-48小时的处理时间
• 如果看不到collect请求，先检查浏览器是否安装了广告拦截插件（uBlock、AdGuard等），这类插件会默认拦截GA的所有上报请求，开发测试阶段需要暂时关闭，或者给上报接口配置反向代理绕过拦截

3. 手动上报的写法优化 #

你当前的手动调用写法逻辑上没有问题，不过pageview建议补全全量参数，避免GA识别异常：

// 手动上报页面浏览
this.$gtag.pageview({
  page_path: "/about",
  page_title: "关于页面",
  page_location: window.location.href
});

// 自定义事件上报
this.$gtag.event('header', { 
  'event_label': 'header',
  'event_category': 'test',
  value: 1
});

4. 自动页面跟踪失效的特殊场景 #

如果配置正确后路由跳转的自动上报还是不触发，检查两个点：

• 路由实例是否正确传入了Vue.use的第三个参数，vue-gtag是靠注册router.afterEach钩子实现自动上报的，漏传router实例就不会触发自动上报
• 如果项目用了abstract路由模式、或者做了极复杂的路由守卫拦截跳转，自动钩子可能不会触发，这种场景直接在全局路由守卫里手动调用pageview方法上报即可。

内容的提问来源于stack exchange，提问作者Rafael Ortiz