3

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?

IVR
  • 1,718
  • 2
  • 23
  • 41
  • I've answered 2 questions related to google analytics here: https://stackoverflow.com/questions/66233218/how-can-i-properly-setup-google-analytics-in-my-vue-website/66233680#66233680 and here https://stackoverflow.com/questions/66267299/use-the-google-analytics-script-in-nuxt-project/66268408#66268408 Not sure if those can help. – kissu Jul 23 '21 at 18:18
  • This one, looking to be by far the easiest tho: https://google-analytics.nuxtjs.org/setup/#installation – kissu Jul 23 '21 at 18:18
  • @kissu thank you for your response! Yes, I've seen this approach too but I haven't tried it because it's designed for the older version of GA, universal apps rather than GA4. If all else fails I'll try the legacy solution, but I'd like to get GA4 working. – IVR Jul 23 '21 at 18:41
  • Is GA4 a big deal? More performant or more precise maybe? (it does indeed not support it yet) – kissu Jul 23 '21 at 18:47
  • 1
    To be completely honest with you I know very little about this. It's just that when I was setting up GA, it was discouraging users from using the legacy approach, but if I'm unable to get GA4 working, then I'll definitely switch to GA-UA – IVR Jul 23 '21 at 18:57

2 Answers2

3

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    Thank you! After looking into it a bit, I'm actually leaning towards going with the UA solution even though it's legacy since the differences are fairly minor and do not matter that much for my use case. As for Plausible, thank you for the link, but my main consideration is cost: Plausible (like Netlify which also offers analytics) is not free whereas GA is free. I'll leave the question open for now since I won't be able to try the UA for a few days so in case someone else comes up with a solution. Your link to the GA4 solution is exactly what I'm doing so not sure why it's not working. – IVR Jul 23 '21 at 19:38
  • 1
    @ivr plausible can be self-hosted! – kissu Jul 23 '21 at 20:00
  • 1
    just wanted to say thank you for your suggestions and to let you know that I ended up switching to GA UA in the end using nuxt-analytics. It woks, but I'll leave this question specifically for Nuxt + GA4 integration – IVR Jul 24 '21 at 05:32
1

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

buddemat
  • 4,552
  • 14
  • 29
  • 49
Grazia Sacchetti
  • 11
  • 1
  • Or this one for a more broad answer: https://stackoverflow.com/a/67705541/8816585 – kissu Jan 14 '22 at 13:45
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 14 '22 at 16:31