Vue.js 2中如何使用Google Analytics 4？vue-gtag是否仅支持Vue3？

云原生阿岚

2026-8-20

Vue-gtag 与 Vue.js 2 的 GA4 集成指南

一、vue-gtag 并非仅支持 Vue3

vue-gtag 有明确的版本分支：1.x 系列适配 Vue.js 2，2.x 及以上版本则专门针对 Vue3 设计，所以完全可以在 Vue2 项目中使用它集成 GA4。

二、Vue.js 2 集成 GA4 的步骤

1. 安装适配版本

执行以下命令安装 Vue2 兼容的 vue-gtag：

npm install vue-gtag@1.x --save
# 或使用 yarn
yarn add vue-gtag@1.x

2. 初始化配置

在项目的 main.js 中引入并初始化插件，替换为你的 GA4 跟踪ID（格式为 G-XXXXXXX）：

import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, {
  config: { id: 'G-YOUR_TRACKING_ID' }
})

new Vue({
  el: '#app',
  // 你的项目路由、组件等配置
})

3. 进阶配置与使用

自动跟踪路由页面

如果项目使用 Vue Router，可传入路由实例实现页面跳转时自动上报页面视图：

import Vue from 'vue'
import VueGtag from 'vue-gtag'
import router from './router'

Vue.use(VueGtag, {
  config: { id: 'G-YOUR_TRACKING_ID' },
  router // 开启路由自动跟踪
})

触发自定义事件

在组件内可直接通过 this.$gtag 调用 API 触发自定义事件，比如按钮点击上报：

// 组件方法示例
submitForm() {
  // 业务逻辑...
  this.$gtag.event('form_submit', {
    event_category: 'user_interaction',
    event_label: 'contact_form'
  })
}