Search code examples
vue.jsgoogle-analyticsnuxt.jsgoogle-analytics-4gtag.js

What is the difference between @nuxtjs/google-gtag @nuxtjs/gtm @nuxtjs/google-analytics and vue-gtag, what to use for GA4?

Newbie to this whole analytics thing and am finding this very confusing

I wanted to use Google Analytics 4 in my nuxt ssr webapp and am feeling overwhelmed with the number of options

Quick issue on nuxtjs/google-analytics says it does not support GA4 and is asking me to use nuxt/gtm

stackoverflow answer on the same question says use vue-gtag

Google's documentation says it covers analytics ads etc

nuxt/google-gtag seems to be another library apart from vue-gtag and nuxt/gtm

what am I even supposed to use? I just want to integrate Google Analytics 4 on my nuxt.js SSR app

Solution

    1. Create a GA account and a GA4 property if you have not already. Keep a note of your Measurement Id (the "G-" Id). The same page can help you to find the id.

    2. Use nuxtjs/google-gtag. Page includes setup help.

    3. When passing the config in your code, use this format:

     // example config
 'google-gtag':{
   id: 'G-XXXXXXXX',  // your measurement id
   ... // rest of the config
  }

    Just to compare, for Universal Analytics (the previous version of GA), the Id would look like UA-XXXX-XX, instead of G-XXXXXXXX. Learn more with Google Analytics 4 properties tag and instrumentation guide.