如何在引入vue-analytics的Vue项目中正确配置Google Analytics

原有配置常见问题 #

• 占位的id: 'My UA'未替换为Google Analytics后台生成的真实追踪ID
• 开启disableScriptLoader: true后未手动引入GA官方脚本，导致统计脚本根本未加载
• 未配置路由自动追踪，单页应用下默认仅能统计首次进入的页面，无法识别后续路由跳转的页面浏览行为

完整配置步骤 #

1. 前提说明 #

当前项目为Vue2架构（从new Vue初始化写法可判断），适配vue-analytics 5.x版本，请勿在Vue3项目中使用该插件。

2. 配置选择一：插件自动加载GA脚本（推荐，配置最简单） #

如果你不需要手动控制GA脚本的加载逻辑，直接关闭disableScriptLoader开关，同时配置路由自动追踪，完整main.js代码参考：

import Vue from 'vue' // 需显式导入Vue，原示例代码遗漏此项
import App from './App.vue'
import vuetify from './plugins/vuetify'
import "./plugins/vuetify-money.js"
import VueMeta from 'vue-meta'
import VueAnalytics from 'vue-analytics'
// 导入项目路由实例，路径根据自身项目的router文件位置调整
import router from './router'

// 替换为自身的真实GA追踪ID：UA-XXXXXXXXX-X对应Universal Analytics，G-XXXXXXX对应GA4
const GA_TRACKING_ID = '你的真实GA追踪ID'

Vue.use(VueAnalytics, {
  id: GA_TRACKING_ID,
  // 关闭自动脚本加载开关，由插件自动注入GA官方脚本
  disableScriptLoader: false,
  // 开启单页应用路由自动追踪
  autoTracking: {
    page: true, // 自动统计路由切换后的页面浏览量
    exception: true, // 可选：自动捕获路由跳转异常
  },
  // 开发环境调试配置
  debug: {
    enabled: process.env.NODE_ENV === 'development',
    sendHitTask: process.env.NODE_ENV === 'production' // 开发环境仅打日志，不实际发送统计请求，避免污染线上数据
  }
})

Vue.use(VueMeta);

Vue.config.productionTip = false

new Vue({
  vuetify,
  router, // 务必挂载路由实例，否则自动追踪不生效
  render: h => h(App)
}).$mount('#app')

3. 配置选择二：保留手动加载GA脚本（即维持disableScriptLoader: true） #

如果你需要自定义控制GA脚本的加载逻辑（比如给脚本加属性、延迟加载等），按以下步骤操作：

3.1 手动引入GA官方脚本

在项目public/index.html的<head>标签内添加GA后台提供的官方脚本，注意删除脚本自带的ga('create', ...)初始化行，交由vue-analytics统一处理。

3.2 修改main.js核心配置

仅需将上述配置中的disableScriptLoader改回true即可，其余路由自动追踪、debug配置保持不变。

4. 组件内自定义事件统计示例（以calculator.vue为例） #

如果需要统计calculator组件内的交互行为（比如用户点击计算按钮的次数、计算类型等），可直接在组件方法中调用：

// calculator.vue 方法块内
methods: {
  handleCalculate() {
    // 执行原有计算逻辑
    // 上报自定义事件到GA
    this.$ga.event({
      eventCategory: '计算器操作',
      eventAction: '点击计算按钮',
      eventLabel: '标准版计算器'
    })
  }
}

生效验证方法 #

• 本地运行项目，打开浏览器开发者工具「网络」面板，筛选collect关键字，若能看到发往Google Analytics的请求，说明配置已触发
• 打开Google Analytics后台的「实时」报告，刷新页面、跳转路由、触发自定义事件，能实时看到对应访问数据即为统计正常

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