setup Google Analytics 4 in nuxt.js

Question

I'm having issues setting up a new Google Analytics 4 (GA4) account with Nuxt. Everything seems configured ok based on tutorials, however my traffic doesn't show up in GA (dev & production)

In nuxt.config.js I have the following

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

The google id is a GA4 Data Stream id with my production website. I tried 2 different streams, with www and without, but the traffic doesn't show up in GA4.

Answer 1

[UPDATE]

If you want to use GA4 Property (which is what has the ids in the format G-XXXXXXXXXX) you can try to use vue-gtag package by creating a plugin:

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

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

Add this in nuxtconfig.js

plugins: ['@/plugins/gtag']

---

About the problem indicated in your message, that plugin you mentioned works with the Universal version of Google Analytics (which is what has the ids in the format UA-XXXXXXXXX-X), like the example in your link:

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

The code you entered in the example, G-HWW3B1GM6W, refers to the new Google Analytics 4 which, being a different system from the previous one and does not work (yet) with that plugin.

So I suggest you to create a Universal Analytics type Property and use its ID (UA-XXXXX-X) with the plugin you indicated. You can find it by clicking on Show advanced options (when you create a new property):

Answer 2

You can use vue-gtag package by creating a plugin.

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

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

Remember to add it in nuxtconfig.js

plugins: ['@/plugins/gtag']

Answer 3

I had the same problem, and I solved it by just using the vanilla 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 4

I came here since I had no results in GA when I was in development or production mode.

The first thing you need to do is to disable any AdBlockers or Anti-trackers for the website you want to test.

Secondly, you need to be in production mode (npm run build and then npm start).

If you wish to be in development mode and still get results in GA then passdebug: { sendHitTask: true } in the GA configuration inside nuxt.config.js:

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