google-analytics - 在 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 中。

score 38 · Accepted Answer

[更新]

如果你想使用 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（当您创建新属性时）找到它：

score 23 · Accepted Answer

您可以通过创建插件来使用vue-gtag 包。

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

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

记得在 nuxtconfig.js 中添加

plugins: ['@/plugins/gtag']

score 0 · Accepted Answer

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

您需要做的第一件事是为您要测试的网站禁用任何 AdBlocker 或 Anti-tracker。

其次，您需要处于生产模式（npm run build然后npm start）。

如果您希望处于开发模式并且仍然在 GA 中获得结果，debug: { sendHitTask: true }请在 nuxt.config.js 中传递 GA 配置：

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

3 回答 3