[RFC] Support Global Site Tag (gtag.js) and Google Analytics

[pi0]

Current Modules

Google Tag Manager (gtm)

GTM makes life easier when we need to manage to multiple analytics/marketing tags (including 3rd party tags) to project without directly modify source-code using a user interface but the downside is that it makes setup process more complex when we want to simply add google analytics to a nuxt project (example setup) and also removes the ability of having control over added snippets by developers (this usually leads to excessive use of tags by marketing team and bad performance)

Global Site Tag (gtag.js)

Global site tag (gtag.js) is a solution built on same infra as google-tag-manager and with the difference that usage is as directly adding google-analytics resulting in less pitfalls and full-control by developers. Currently, we also have a nuxt module for google-gtag made by @dohomi but it is almost unmaintained and usage is unclear for each google product.

Google Analytics (ga)

We have gooogle-analytics-module using vue-analytics (analytics.js). vue-analytics won't accept new features (~> vue-gtag) since google now prefers using gtag script usage

Remarks

• For Google Analytics, We have to anyway migrate from analytics.js to gtag.js since apparently GA4 is only supported via gtag.js
• Both gtag and ga integrations need to use async script in head similar to how gtm module works. Currently they use a nuxt plugin to inject script which causes blocking tags to be loaded until nuxt app bootstrap and potentially more issues since not using original google snippet. Also not respecting do-not-track (DNT)
• It seems we can use load script and init dataLayer in head and still use awesome vue-gtag. But this has to be tested. We also need SSR support for events but seems not supported as api is context-less
• Both gtm and gtag.js work on same dataLayer. There is no official docs that clarify this but seems there is a potential of double hits if using both on same page (here and here). The only statement from google i could find is that if you are using gtm, keep using it. This needs to be tested and considered if we want to add gtag functionality directly to gtm module.
  • My preference is to keep maintaining @nuxtjs/gtag and use clarify with docs for users to choose the right module. As it makes both maintenance and usage simpler
• We may deprecate @nuxtjs/google-analytics but keep supporting same options and this.$ga to make migration path easier for 165K existing monthly users. (package can also be kept as a placeholder OR asking to change modules section for migration)

[ricardogobbosouza]

My considerations about the modules:

1. @nuxtjs/gooogle-analytics it shouldn't be updated anymore, even after all the documentation has been done :worried: What we can do is create a section to migrate to @nuxtjs/google-gtag

2. @nuxtjs/google-gtag needs to be updated (refactored), maybe renamed to @nuxtjs/gtag🤔 ?

3. @nuxtjs/gtm needs to updated docs

[MatteoGabriele]

I stopped the updates on vue-analytics and managed to publish vue-gtag after google finally switched to gtag.js. Now I just finished vue-gtag update for Vue 3 as well (still under vue-gtag-next for now, waiting probably vue 3 to go out of the next flag). Let me know if there's something I can help you with

[flozero]

Hum, maybe I will say shit. But I am not really familiar with gtag. But it looks more relevant to support it and gtm.

I pretty agree with @ricardogobbosouza

[SomethingNew71]

Hey, any updates to this plan? I don't see a clear way to implement a GA4 tag at this point with the existing modules. If you are looking for people to contribute or work on a new implementation I would love to assist.

[cosbgn]

What I currently use and seems to work is creating a plugin called gs.client.js with:

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ isDev }) => {
    if (!isDev){
        Vue.use(VueGtag, {
            config: { id: 'XXX' }
        });
    } else {
        console.log("Skipping GA in development")
    }
}

In nuxt config:

plugins:[{ src: '~/plugins/ga.client.js', mode:'client'}]

This seems perfect. The only doubt I have is that the vue-gtag docs say that I should pass the router as 3 parameter for auto-tracking routes. I currently don't do this, but my routes seem to be tracked anyway. Does anyone knows how to add the router in a plugin? Should I do it?

Edit:

You can pass the router like this. So far everything seems to work perfectly for me:

// /plugins/ga.client.js

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ isDev, app }) => {
    if (!isDev){
        Vue.use(VueGtag, {
            config: { id: 'G-XXX' }
        },
        app.router);
    } else {
        console.log("Skipping GA in development")
    }
}

[mohamnag]

Can somebody please coordinate a change to docs of all those libs (best in their github readmes) to make it clear what and which one a lost sole should use when s/he is going to update or integrate GA in a nuxt project? all these links back and forth makes it very confusing and unclear which way is the future proof one.

[dargmuesli]

For Nuxt 3 you can use the following setup, which includes cookie control:

// plugins/gtag.client.ts

import VueGtag from 'vue-gtag'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const router = useRouter()
  const cookieControl = useCookieControl()

  nuxtApp.vueApp.use(
    VueGtag,
    {
      bootstrap:
        cookieControl.cookiesEnabledIds.value.includes('google-analytics'),
      config: {
        id: config.public.googleAnalyticsId,
      },
    },
    router
  )
})

// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    [
      '@dargmuesli/nuxt-cookie-control',
      {
        cookies: {
          optional: [
            {
              description: {
                de: 'Hilft uns dabei Nutzerverhalten zu verstehen und unsere Dienste zu verbessern.',
                en: 'Helps us understand user behavior and optimize our services.',
              },
              name: 'Google Analytics',
              targetCookieIds: [
                '_ga',
                '_ga_ASD1JY99XH',
                '_gat_gtag_UA_186749809_1',
                '_gid',
              ],
            },
          ],
        },
        locales: ['en', 'de'],
      },
    ],
  ],
  runtimeConfig: {
    public: {
      googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
    },
  },
})