在 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 属性（即具有 G-XXXXXXXXXX 格式的 id），您可以尝试通过创建插件来使用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

我遇到了同样的问题，我通过使用普通 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",
            }
        ]
    },
}

Answer 3

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

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

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

记得在nuxtconfig.js中添加

plugins: ['@/plugins/gtag']