在 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），如中的示例你的 link:

 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

我来这里是因为我在开发或生产模式时在 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 4

我遇到了同样的问题，我用香草解决了它JavaScript:

/static/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",
            }
        ]
    },
}

在 nuxt.js 中设置 Google Analytics 4

setup Google Analytics 4 in nuxt.js

google-analytics

nuxt.js

google-analytics-4