在nuxt.js中设置Google Analytics分析4

编程问答 2022-06-05

问题描述

我在用Nuxt设置新的Google Analytics 4（GA4）帐户时遇到问题。根据教程，一切似乎都配置正确，但是我的流量未在GA（开发和生产）中显示

在nuxt.config.js中，我有以下内容

  buildModules: [
    '@nuxtjs/tailwindcss','@nuxtjs/google-analytics'
  ],googleAnalytics: {
    id: 'G-HWW3B1GM6W'
  },

google ID是我的生产网站的GA4数据流ID。我尝试了两种不同的视频流，分别使用www和不使用www，但GA4中没有显示访问量。

解决方法

您提到的该插件可与Google Analytics（分析）通用版一起使用（该ID的格式为UA-XXXXXXXXX-X），例如链接中的示例：

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

您在示例G-HWW3B1GM6W中输入的代码指的是新版Google Analytics（分析）4，该系统与以前的系统不同，尚不能使用该插件。

因此，我建议您创建一个通用Analytics（分析）类型的属性，并将其ID（UA-XXXXX-X）与您指定的插件一起使用。您可以通过点击Show advanced options来找到它（创建新属性时）：

enter image description here

,

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

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

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

请记住将其添加到nuxtconfig.js 

plugins: ['@/plugins/gtag']
,

我来到这里是因为我在开发或生产模式下的 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
      }
    }
 },
ga4google-analyticsgoogle-analytics-4nuxt.js