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.

@nuxtjs/google-analytics only accepts Universal Analytics IDs which is officially being done away with by Google and in addition the author of @nuxtjs/google-analytics no longer supports the module and recommends switching to vue-gtag. The issue with that is that vue-gtag requires Vue 3 which is not currently available in a stable version of Nuxt. — Bryan Spearman, Mar 18 '22 at 16:34

Michele Pisani · Accepted Answer · 2021-05-22T11:37:26.807

50

[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):

edited May 22 '21 at 11:37

answered Oct 30 '20 at 17:26

Michele Pisani

13,567
3
25
42

Hi! Do you know if installing this way will allow route tracking? Thanks – Yandiro Jun 09 '21 at 11:30
Thank you very much. – W.M. Nov 30 '21 at 18:53
4

vue-gtag has a hard requirement of Vue3 which is not available in a stable version of Nuxtjs (yet). If you are using Nuxt v2 this approach won't work. – Bryan Spearman Mar 18 '22 at 16:28
8

if you're on Nuxt v2, you can install vue-gtag v1 and it works just fine... `npm install vue-gtag@1 --save` – broox Apr 20 '22 at 17:08
2

As this is mostly only needed on the client (in production) you can check `if (process.env.NODE_ENV === "production")` in your Plugin & and configure the `mode` plugin option in your array of Plugins in `nuxt.config.js` as `{ src: "@/plugins/g-analytics.js", mode: "client" }` – nonNumericalFloat Apr 30 '22 at 18:14

score 26 · Answer 2 · answered Nov 02 '20 at 15:00

26

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']

answered Nov 02 '20 at 15:00

2

Thank you! Don't forget to disable the tag on localhost – Julien Le Coupanec Jan 02 '21 at 11:31
2

^ for prod only pass { enable: process.env.NODE_ENV === 'production' } – ihor.eth Aug 31 '21 at 04:31
3

@ihorbond - Isn't it `enabled`, rather than `enable`? https://matteo-gabriele.gitbook.io/vue-gtag/plugin-options – Dan Jul 05 '22 at 15:39

score 24 · Answer 3 · answered May 03 '22 at 21:59

24

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",
            }
        ]
    },
}

answered May 03 '22 at 21:59

agm1984

15,500
6
89
113

4

A good solution if you don't want to use and manage yet another third-party plugin. Worked for my site. – maesk May 14 '22 at 10:04
3

This solution works best considering all these vue ga packages keep deprecating – Vaulstein May 31 '22 at 12:18
2

the code in /static/js/ga.js can just be added as callback: option of the script, no need for a separate file – ihor.eth Jul 06 '22 at 16:14
For "vue-meta": "^2.4.0" I had to add the `hid` property alongside the `callback` option. If not the later was not getting called. – iusting Dec 07 '22 at 20:04
@ihor.eth Could you post code as a callback option of script? – sandalwoodsh Dec 28 '22 at 17:34
@sandalwoodsh here https://vue-meta.nuxtjs.org/api/#callback – ihor.eth Jan 03 '23 at 17:30
Does anyone know a way to include the code of ga.js inline, without a separate file? – executeinstaller Jun 30 '23 at 16:09

score 2 · Answer 4 · answered Mar 08 '23 at 12:13

I found this way more simpler with Nuxt 3, Vue 3 and Google analytics 4.

First you will need to add this latest plugin for vue-gtag

npm add --dev vue-gtag-next

Then create a plugin file plugins/vue-gtag.client.js

In this file, add this code

import VueGtag, { trackRouter } from 'vue-gtag-next'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
  trackRouter(useRouter())
})

You can also use optin/optout feature if you want to disable that plugin at any time using isEnabled flag.

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

Here is the link to documentation.

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

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

This is the only solution that worked for me, when using the regular `vue-gtag` make sure to use `config` instead of `property` — oerol, Jun 24 '23 at 16:40

score 1 · Answer 5 · edited May 12 '21 at 12:10

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

setup Google Analytics 4 in nuxt.js

5 Answers5

Linked