在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'
  },

谷歌 ID 是我生产网站的 GA4 数据流 ID。我尝试了两个不同的数据流，一个带有 "www"，另一个没有，但是流量在 GA4 中没有显示。

- gvon79

---

@nuxtjs/google-analytics 只接受 Universal Analytics ID，而 Google 已经正式淘汰了它。此外，@nuxtjs/google-analytics 的作者不再支持该模块，建议切换到 vue-gtag。问题在于，vue-gtag 需要 Vue 3，而 Nuxt 目前尚未提供稳定版本的 Vue 3。 - Bryan Spearman

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的通用版本（其中有格式为UA-XXXXXXXXX-X的ID），就像您链接中的示例一样。

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

您在示例中输入的代码G-HWW3B1GM6W是指新版Google Analytics 4，它与以前的系统不同，并且目前不能与该插件一起使用。因此，我建议您创建一个Universal Analytics类型的Property，并使用其ID（UA-XXXXX-X）与您指定的插件一起使用。您可以通过单击“显示高级选项”（创建新属性时）找到它：

- Michele Pisani

---

你好！您知道使用这种安装方式是否允许路由跟踪吗？谢谢。 - Yandiro

非常感谢。 - W.M.

vue-gtag 对 Vue3 有强制要求，但目前稳定版本的 Nuxtjs 尚不支持 Vue3。如果您使用的是 Nuxt v2 版本，则无法使用此方法。 - Bryan Spearman

如果您使用的是 Nuxt v2，那么您可以安装 vue-gtag v1 版本，并且它能够正常工作...npm install vue-gtag@1 --save - broox

由于这主要只在客户端（生产环境）需要，您可以在插件中检查 if (process.env.NODE_ENV === "production") 并在 nuxt.config.js 中的插件数组中配置 mode 插件选项为 { src: "@/plugins/g-analytics.js", mode: "client" }。 - nonNumericalFloat

Answer 2

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

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

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

记得在nuxtconfig.js中添加它

plugins: ['@/plugins/gtag']

- user3970640

---

谢谢！别忘了在本地主机上禁用标签。 - Julien Le Coupanec

仅针对生产环境时使用 ^，请传递 { enable: process.env.NODE_ENV === 'production' } - ihor.eth

@ihorbond - 不是enable，而是enabled吗？ https://matteo-gabriele.gitbook.io/vue-gtag/plugin-options - Dan

Answer 3

我曾经遇到过同样的问题，后来通过使用原生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",
            }
        ]
    },
}

- agm1984

---

如果您不想使用和管理另一个第三方插件，这是一个很好的解决方案。对我的网站有效。 - maesk

考虑到所有这些Vue GA包都在逐渐废弃，这个解决方案是最好的。 - Vaulstein

/static/js/ga.js中的代码可以作为脚本的回调选项添加，无需单独文件。 - ihor.eth

对于 "vue-meta": "^2.4.0"，我不得不在 callback 选项旁边添加 hid 属性。如果没有这个属性，后者将不会被调用。 - iusting

@ihor.eth，你能把代码作为脚本的回调选项发布吗？ - sandalwoodsh

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标志。

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

这是文档链接。

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

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

- Muhammad Umair

---

这是唯一对我有效的解决方案，当使用常规的vue-gtag时，请确保使用config而不是property。 - oerol

Answer 5

我来到这里是因为在开发或生产模式下，GA没有给出任何结果。

首先，您需要禁用任何针对要测试的网站的AdBlockers或反跟踪器。

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

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

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

- christostsang