在 nuxt.js 中设置 Google Analytics 4

Question

我在使用 Nuxt 设置新的 Google Analytics 4 (GA4) 帐户时遇到问题。根据教程，一切似乎都配置正常，但是我的流量没有显示在 GA（开发和生产）中

在 nuxt.config.js 中我有以下内容

  buildModules: [
    '@nuxtjs/tailwindcss','@nuxtjs/google-analytics'
  ],
  googleAnalytics: {
    id: 'G-HWW3B1GM6W'
  },

Google ID 是我的生产网站的 GA4 数据流 ID。我尝试了 2 个不同的流，带 www 和不带 www，但流量没有显示在 GA4 中。

Answer 1

[更新]

如果您想使用 GA4 属性（其 id 格式为 G-XXXXXXXXXX），您可以尝试通过创建插件来使用 vue-gtag 包：

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

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

在 nuxtconfig.js 中添加此内容

plugins: ['@/plugins/gtag']

---

关于您的消息中指出的问题，您提到的插件适用于 Google Analytics 的通用版本（其 id 格式为

UA-XXXXXXXXX-X

），如链接中的示例：

 buildModules: [
   '@nuxtjs/tailwindcss','@nuxtjs/google-analytics'
 ],
 googleAnalytics: {
   id: 'UA-XXXXXXXX-X'
 },

您在示例中输入的代码

G-HWW3B1GM6W

指的是新的 Google Analytics 4，该系统与之前的系统不同，并且（尚）无法与该插件一起使用。

因此，我建议您创建一个 Universal Analytics 类型媒体资源，并将其 ID (UA-XXXXX-X) 与您指定的插件一起使用。您可以通过单击

Show advanced options

找到它（当您创建新属性时）：

Answer 2

您可以通过创建插件来使用

vue-gtag

package。

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

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

记得在nuxtconfig.js中添加

plugins: ['@/plugins/gtag']

Answer 3

我遇到了同样的问题，我通过使用普通 JavaScript 解决了它：

/静态/js/ga.js

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-XXXXXXXXXX');

/nuxt.config.js

export default {
    head: {
        script: [
            {
                src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX",
                async: true,
            },
            {
                src: "js/ga.js",
            }
        ]
    },
}

Answer 4

我发现使用 Nuxt 3、Vue 3 和 Google Analytics 4 这种方式更简单。

首先，您需要为 vue-gtag 添加这个最新插件

npm add --dev vue-gtag-next

然后创建一个插件文件

plugins/vue-gtag.client.js

在此文件中，添加此代码

import VueGtag, { trackRouter } from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
  trackRouter(useRouter())
})

如果您想使用

isEnabled

标志随时禁用该插件，您还可以使用 optin/optout 功能。

https://matteo-gabriele.gitbook.io/vue-gtag/v/next/opt-in-out

这是文档的链接。

https://nuxt.com/docs/guide/directory-struct/plugins#vue-plugins

https://matteo-gabriele.gitbook.io/vue-gtag/v/next/

Answer 5

我来到这里是因为当我处于开发或生产模式时，我在 GA 中没有任何结果。

您需要做的第一件事是禁用您想要测试的网站的任何广告拦截器或反跟踪器。

其次，您需要处于生产模式（npm run build

，然后

npm start

）。

如果您希望处于开发模式并仍然在 GA 中获得结果，请在 nuxt.config.js 内的 GA 配置中传递

debug: { sendHitTask: true }

：

publicRuntimeConfig: {
    googleAnalytics: {
      id: process.env.GOOGLE_ANALYTICS_ID,
      debug: {
        sendHitTask: true
      }
    }
 },

Answer 6

纯 JavaScript 中的 Nuxt2 + GA4 解决方案。

nuxt.config.js

export default {
  ...
  head: {
    ...
    script: [
      {
        vmid: 'g-tag',
        src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX',
        async: true,
        callback: () => {
          window.dataLayer = window.dataLayer || []
          function gtag() {
            window.dataLayer.push(arguments)
          }
          gtag('js', new Date())

          gtag('config', 'G-XXXXXXXX')
        },
      },
    ],
    ...
  },
  ...
}

并确保您已将“G-XXXXXXXX”替换为您的 Google 分析测量 ID。