Nuxt 2.15.8集成Google Analytics 4方案求点评及路由追踪解惑

我针对 Nuxt v2.15.8 设计了一套 Google Analytics 4（GA4）的集成方案，目前已能正常运行，希望听听其他开发者的意见，以下是具体实现步骤：

实现步骤 #

1. 配置环境变量
   在项目根目录创建 .env 文件，填入 GA4 测量 ID：

NUXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXXXX

2. 映射 Nuxt 环境变量
   在 nuxt.config.js 中添加配置，确保客户端可读取到环境变量：

export default {
  env: {
    NUXT_PUBLIC_GOOGLE_ANALYTICS: process.env.NUXT_PUBLIC_GOOGLE_ANALYTICS
  }
}

3. 创建客户端专属插件
   在 plugins 文件夹下新建 googleAnalytics.client.js（.client 后缀确保代码仅在客户端执行），写入以下代码：

export default async ({ app }) => {
  /*
  ** 仅在生产环境的客户端执行
  */
  if (process.env.NODE_ENV === 'production' && process.client) {
    const analyticsID = process.env.NUXT_PUBLIC_GOOGLE_ANALYTICS

    // 检查 GA 脚本是否已存在于 DOM 中
    const myScriptExists = Boolean(
      document.querySelector(
        `head > script[src="https://www.googletagmanager.com/gtag/js?id=${analyticsID}"]`
      )
    )

    if (!myScriptExists) {
      // 动态创建并插入 GA 脚本
      const myScript = document.createElement('script')
      myScript.type = 'text/javascript'
      myScript.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsID}`
      myScript.hid = 'gtm'
      myScript.async = true
      document.head.appendChild(myScript)
    }

    // 初始化 GA4
    window.dataLayer = window.dataLayer || []
    function gtag() { dataLayer.push(arguments) }
    gtag('js', new Date())
    gtag('set', { cookie_flags: 'SameSite=None;Secure' })
    gtag('config', `${analyticsID}`)
  }
}

4. 注册插件
   在 nuxt.config.js 中注册上述插件：

export default {
  plugins: ['~/plugins/googleAnalytics.client.js']
}

路由追踪生效原因说明 #

这套方案能自动追踪所有路由的核心原因：

• Nuxt v2 的客户端路由基于 Vue Router 实现单页跳转，你调用的 gtag('config', ${analyticsID}) 会自动监听 Vue Router 的路由变化事件；
• GA4 的初始化逻辑会自动绑定客户端的导航行为，每次路由切换时，都会自动向 GA4 发送页面浏览事件，无需额外手动配置路由监听；
• 虽然 .client 插件会在客户端初始化时执行，但你通过脚本存在性检查避免了重复插入，同时 GA4 的初始化逻辑会自动识别页面路径变化并完成上报。

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