CODEWITHSUNDEEP
google-analyticsnuxt.jsgoogle-analytics-4
gvon79
gvon79

Reputation: 662

setup Google Analytics 4 in nuxt.js

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.

Upvotes: 37

Views: 28093

Answers (7)

Linkon
Linkon

Reputation: 1

step 1: install this from terminal "npx nuxi@latest module add gtag"

step 2: add the modules in nuxt module

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
})

step 3: add the gtag id

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    enabled: process.env.NODE_ENV === 'production',
    id: process.env.GTAG_ID_MAINDOMAIN || 'G-XXXXXX'
    config: {
      anonymize_ip: true
    }
  },
})

Upvotes: 0

protanvir993
protanvir993

Reputation: 3109

Nuxt2 + GA4 solution in pure JavaScript.

nuxt.config.js

export default {
  ...
  head: {
    ...
    script: [
      {
        vmid: 'g-tag',
        src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX',
        async: true,
        callback: () => {
          window.dataLayer = window.dataLayer || []
          function gtag() {
            window.dataLayer.push(arguments)
          }
          gtag('js', new Date())

          gtag('config', 'G-XXXXXXXX')
        },
      },
    ],
    ...
  },
  ...
}

And make sure that you have replace 'G-XXXXXXXX' with your Google Analytic Measurement ID.

Upvotes: 2

Muhammad Umair
Muhammad Umair

Reputation: 691

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/

Upvotes: 2

agm1984
agm1984

Reputation: 17132

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

Upvotes: 28

Michele Pisani
Michele Pisani

Reputation: 14179

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

enter image description here

Upvotes: 52

christostsang
christostsang

Reputation: 1841

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

Upvotes: 2

user3970640
user3970640

Reputation:

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

Upvotes: 27

Related Questions