如何使用 vue-gtag 让 Google Analytics GA4 识别我的 nuxt 网站？答案

【问题标题】：How to get Google Analytics GA4 to recognise my nuxt website with vue-gtag?如何使用 vue-gtag 让 Google Analytics GA4 识别我的 nuxt 网站？
【发布时间】：2021-09-30 19:42:02
【问题描述】：

我有一个 Nuxt.js 网络客户端，我想使用 Google Analytics 进行跟踪。
我像这样使用vue-gtag：

/plugins/vue-gtag.js

import Vue from 'vue'
import VueGtag from 'vue-gtag'
export default ({ app }) => {
  Vue.use(
    VueGtag,
    {
      config: { id: process.env.GTAG }, // this is defined in my Netlify env variables together with my backend API which works
      appName: 'SleepRescue',
      bootstrap: true,
      enabled: true,
      pageTrackerScreenviewEnabled: true,
    },
    app.router
  )
}

nuxt.config.js

plugins: [
  ...
  { src: '~/plugins/vue-gtag' },
  ...
]

我也在定义自定义事件，如下所示：

async registerUser() {
  this.$gtag.event('sign_up', {
    event_category: 'engagement',
    event_label: 'method',
  })
  ...
}

请随意查看plugin、我的Nuxt config 和给定的example of a custom tag。

不幸的是，我的 Google Analytics（分析）仪表板无法识别任何流量，它似乎也无法识别我定义的任何标签。我尝试从多台机器和 IP 访问我的网站，但仍然没有流量。如果我进入我的 GA 帐户 -> 管理 -> 数据流，我可以在“Web”下看到我的网站，但它显示“过去 48 小时内未收到数据”。如果我点击它，那么我将能够看到 G-****** ID 作为测量 ID，我认为只要它与我的 VueGtag ID 中的内容匹配，它应该可以工作。

有人知道这里出了什么问题吗？

【问题讨论】：

我在这里回答了 2 个与谷歌分析相关的问题：stackoverflow.com/questions/66233218/… 和stackoverflow.com/questions/66267299/… 不确定这些是否有帮助。
这个，看起来是迄今为止最简单的一个：google-analytics.nuxtjs.org/setup/#installation
@kissu 感谢您的回复！是的，我也看到过这种方法，但我没有尝试过，因为它是为旧版本的 GA、通用应用程序而不是 GA4 设计的。如果一切都失败了，我会尝试旧的解决方案，但我想让 GA4 工作。
GA4 有什么大不了的吗？也许更高效或更精确？（确实还不支持）
老实说，我对此知之甚少。只是在我设置 GA 的时候，它阻止了用户使用传统方法，但是如果我无法让 GA4 工作，那么我肯定会切换到 GA-UA

标签： vue.js google-analytics nuxt.js gtag.js

【解决方案1】：

以下是 GA3 和 GA4 之间的差异列表：https://cxl.com/blog/ga4/
不确定继续使用 GA3 是否会破坏交易。

查看this solution，可能完全支持GA4。

另外，如果您不是 Google 的忠实粉丝，并且想要使用更开源的东西，您可以查看 Plausible，甚至还有 Debbie 的 detailed setup here。

【讨论】：

谢谢！在研究了一下之后，我实际上倾向于使用 UA 解决方案，即使它是遗留问题，因为差异相当小，对我的用例来说并不重要。至于似是而非的，谢谢你的链接，但我主要考虑的是成本：似是而非的（如也提供分析的 Netlify）不是免费的，而 GA 是免费的。我将暂时保留这个问题，因为我将无法在几天内尝试 UA，以防其他人提出解决方案。您指向 GA4 解决方案的链接正是我正在做的，所以不知道为什么它不起作用。
@ivr 似是而非可以自托管！
只是想对您的建议表示感谢，并让您知道我最终使用 nuxt-analytics 切换到了 GA UA。可以，但我将把这个问题专门留给 Nuxt + GA4 集成

【解决方案2】：

问题是 env 变量不能直接通过插件访问。

对于 nuxt 版本 > 2.12+，如果在运行时（不是构建时）需要环境变量，建议使用 runtimeConfig 属性替换 env 属性：publicRuntimeOptions 和 privateRuntimeOptions。通过我们的教程了解更多关于从 @nuxtjs/dotenv 迁移到运行时配置的信息。

你必须遵循这个解决方案https://stackoverflow.com/a/67580298

【讨论】：

或者这个更广泛的答案：stackoverflow.com/a/67705541/8816585
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。