CODEWITHSUNDEEP
vue.jsgoogle-analyticsnuxt.jsgtag.js
IVR
IVR

Reputation: 1848

How to get Google Analytics GA4 to recognise my nuxt website with vue-gtag?

I have a Nuxt.js web client which I'd like to track with Google Analytics.
I'm using the vue-gtag like so:

/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' },
  ...
]

I'm also defining custom events like so:

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

Feel free to have a look at the plugin, my Nuxt config and the given example of a custom tag.

Unfortunately, my Google Analytics dashboard does not recognise any traffic not does it seem to recognise any of the tags that I've defined. I've tried accessing my website from multiple machines and IPs but there is still no traffic. If I go into my GA account -> Admin -> Data Streams, I can see my website under "Web" but it says "No data received in the last 48 hours". If I click into it, then I'll be able to see the G-****** ID as Measurement ID, I thought that as long as it matches what I have in my VueGtag ID, it should work.

Does anyone know what could be wrong here?

Upvotes: 3

Views: 4514

Answers (2)

Grazia Sacchetti
Grazia Sacchetti

Reputation: 11

The problem is that the env variable is not accessible form plugins directly.

For nuxt versions > 2.12+, in cases where environment variables are required at runtime (not build time) it is recommended to subsitute the env property with runtimeConfig properties : publicRuntimeOptions and privateRuntimeOptions. Learn more with our tutorial about moving from @nuxtjs/dotenv to runtime config .

You have to follow this solution https://stackoverflow.com/a/67580298

Upvotes: 1

kissu
kissu

Reputation: 46632

Here is a list of differences between GA3 and GA4: https://cxl.com/blog/ga4/
Not sure if it's a deal breaker to use GA3 still.

Check this solution that may totally support GA4.

Also, if you're not a huge fan of Google and want to use something more open source, you can look into Plausible and even have a detailed setup here by Debbie.

Upvotes: 3

Related Questions