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

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 😟 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

[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")
	}
}