feat(plugin): add support for Google Analytics 4 (gtag)

README.md

@@ -1,9 +1,5 @@
 [![@nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/preview.png)](https://google-analytics.nuxtjs.org)
 
-
-> **⚠ WARNING: This package does not support GA4. **  
-> This package currently only supports GA3/UA
-
 # @nuxtjs/google-analytics
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -12,7 +8,7 @@
 [![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
 
-> [Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics).
+> [Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics) for Google Analytics 3 and [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) for Google Analytics 4.
 
 - [✨  Release Notes](./CHANGELOG.md)
 - [📖  Documentation](https://google-analytics.nuxtjs.org)

docs/content/en/index.md

@@ -16,7 +16,7 @@ features:
 <img src="/preview.png" class="light-img" width="1280" height="640" alt=""/>
 <img src="/preview-dark.png" class="dark-img" width="1280" height="640" alt=""/>
 
-[Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics).
+[Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics) for Google Analytics 3 and [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) for Google Analytics 4.
 
 Track the visitors to your sites and applications, measure your ROI and provide in-depth analysis details about your visitors' behaviors.
 

docs/content/en/options.md

@@ -70,6 +70,24 @@ If both `id` and `asyncID` are present, the returned value from `asyncID` will o
 
 </alert>
 
+
+### `useGtag`
+
+* Type: `Boolean`
+* default: `false`
+
+If set to `true`, the module will use [Google Analytics 4](#google-analytics-4). By default, the module uses [Google Analytics 3](#google-analytics-3). Refer to the respective sections for options below.
+
+## Google Analytics 3
+
+The following options are only applicable if you have `useGtag` set to false.
+
+<alert type="info">
+
+For a full list of options, please see [Vue Analytics](https://matteogabriele.gitbooks.io/vue-analytics) documentation.
+
+</alert>
+
 ### `debug`
 
 * Type: `Object`
@@ -110,8 +128,42 @@ export default {
 }
 ```
 
+## Google Analytics 4
+
+The following options are only applicable if you have `useGtag` set to true.
+
 <alert type="info">
 
-For a full list of options, please see [Vue Analytics](https://matteogabriele.gitbooks.io/vue-analytics) documentation.
+For a full list of options, please see [Vue Gtag v1](https://matteo-gabriele.gitbook.io/vue-gtag/v/master/) documentation.
 
 </alert>
+
+### `disableScriptLoad`
+
+* Type: `Boolean`
+
+Disable the script loader
+
+```js[nuxt.config.js]
+export default {
+  googleAnalytics: {
+    disableScriptLoad: true
+  }
+}
+```
+
+### `onReady`
+
+* Type: `Function`
+
+Will fire when the gtag script is successfully loaded
+
+```js[nuxt.config.js]
+export default {
+  googleAnalytics: {
+    onReady() {
+      // Ready!
+    }
+  }
+}
+```

docs/content/en/setup.md

@@ -6,8 +6,9 @@ category: Guide
 ---
 
 
-> **⚠ WARNING: This package does not support GA4. **
-> This package currently only supports GA3/UA
+<alert type="warning">
+  If you need Google Analytics 4 support, check our documentation on the `useGtag` option <nuxt-link to="/options#usegtag">here</nuxt-link>
+</alert>
 
 
 Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.

docs/content/en/usage/event-tracking.md

@@ -5,6 +5,10 @@ position: 5
 category: Usage
 ---
 
+<alert type="warning">
+This documentation is only applicable when the Google Analytics 3 is enabled. For documentation on event tracking with Google Analytics 4, see <a href="https://matteo-gabriele.gitbook.io/vue-gtag/v/master/methods/events">vue-gtag/event documentation</a>.
+</alert>
+
 This module injects `$ga` instance globally.
 
 You can access the instance anywhere using:

docs/content/en/usage/page-tracking.md

@@ -5,6 +5,10 @@ position: 4
 category: Usage
 ---
 
+<alert type="warning">
+This documentation is only applicable when the Google Analytics 3 is enabled. For documentation on event tracking with Google Analytics 4, see <a href="https://matteo-gabriele.gitbook.io/vue-gtag/v/master/methods/pageview">vue-gtag/pageview documentation</a>.
+</alert>
+
 This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware)
 
 ## Automatic page tracking

docs/content/en/usage/screen-tracking.md

@@ -5,6 +5,10 @@ position: 6
 category: Usage
 ---
 
+<alert type="warning">
+This documentation is only applicable when the Google Analytics 3 is enabled. For documentation on event tracking with Google Analytics 4, see <a href="https://matteo-gabriele.gitbook.io/vue-gtag/v/master/methods/screenviews">vue-gtag/screenview documentation</a>.
+</alert>
+
 This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware)
 
 ## `screenview(options)`

docs/content/en/usage/time-tracking.md

@@ -5,6 +5,10 @@ position: 7
 category: Usage
 ---
 
+<alert type="warning">
+This documentation is only applicable when the Google Analytics 3 is enabled. For documentation on event tracking with Google Analytics 4, see <a href="https://matteo-gabriele.gitbook.io/vue-gtag/v/master/methods/time">vue-gtag/time documentation</a>.
+</alert>
+
 This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware)
 
 ## `time()`

lib/plugin.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueAnalytics from 'vue-analytics'
+import VueGtag from 'vue-gtag'
 
 export default async (ctx, inject) => {
   const runtimeConfig = ctx.$config && ctx.$config.googleAnalytics || {}
@@ -10,8 +11,13 @@ export default async (ctx, inject) => {
     options.id = await options.asyncID(ctx)
   }
 
-  Vue.use(VueAnalytics, {...{ router: ctx.app.router }, ...options})
-
-  ctx.$ga = Vue.$ga
-  inject('ga', Vue.$ga)
+  if (options.useGtag) {
+    Vue.use(VueGtag, { config: { id: options.id }, ...options }, ctx.app.router)
+    ctx.$gtag = Vue.$gtag
+    inject('gtag', Vue.$gtag)
+  } else {
+    Vue.use(VueAnalytics, { router: ctx.app.router, ...options})
+    ctx.$ga = Vue.$ga
+    inject('ga', Vue.$ga)
+  }
 }

package.json

@@ -21,11 +21,13 @@
     "test": "yarn lint && jest"
   },
   "dependencies": {
-    "vue-analytics": "^5.22.1"
+    "vue-analytics": "^5.22.1",
+    "vue-gtag": "^1.16.1"
   },
   "devDependencies": {
     "@commitlint/cli": "latest",
     "@commitlint/config-conventional": "latest",
+    "@nuxt/types": "^2.15.8",
     "@nuxtjs/eslint-config": "latest",
     "@nuxtjs/module-test-utils": "latest",
     "eslint": "latest",

test/fixture/gtag/nuxt.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  rootDir: __dirname,
+  buildModules: [
+    { handler: require('../../../') }
+  ],
+  googleAnalytics: {
+    id: 'XXX',
+    useGtag: true
+  }
+}

test/fixture/gtag/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Works!
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

test/gtag.test.js

@@ -0,0 +1,42 @@
+const { setup, loadConfig, get, url } = require('@nuxtjs/module-test-utils')
+
+describe('prod', () => {
+  let nuxt, addTemplate
+
+  beforeAll(async () => {
+    const beforeNuxtReady = (nuxt) => {
+      addTemplate = nuxt.moduleContainer.addTemplate = jest.fn(
+        nuxt.moduleContainer.addTemplate
+      )
+    }
+    ({ nuxt } = (await setup(loadConfig(__dirname, 'gtag'), { beforeNuxtReady })))
+  }, 60000)
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('render', async () => {
+    const html = await get('/')
+    expect(html).toContain('Works!')
+  })
+
+  test('$gtag should be defined', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/'))
+    expect(window.$nuxt.$gtag).toBeDefined()
+  })
+
+  test('$ga should not be defined', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/'))
+    expect(window.$nuxt.$ga).not.toBeDefined()
+  })
+
+  test('option id', () => {
+    expect(addTemplate).toBeDefined()
+    const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js'))
+    expect(call).toBeDefined()
+    const options = call[0].options
+    expect(options.id).toBe('XXX')
+    expect(options.useGtag).toBe(true)
+  })
+})

types/index.d.ts

@@ -1,33 +1,65 @@
-import type Vue from 'vue'
-import type { default as VueAnalytics, InstallOptions } from 'vue-analytics'
+import { Module, Context } from '@nuxt/types'
+import VueAnalytics, { InstallOptions } from 'vue-analytics'
+import { VueGtag, PluginOptions } from 'vue-gtag'
 import './vuex'
 
+interface BaseOptions {
+  id?: string
+  asyncID?: (context: Context) => Promise<string>
+  /**
+   * @deprecated use id instead
+   */
+  ua?: string
+  useGtag?: boolean
+}
+
+interface VueAnalyticsOptions extends BaseOptions, Omit<InstallOptions, 'id'> {
+  useGtag?: false
+}
+
+interface VueGtagOptions extends BaseOptions, Omit<PluginOptions, 'config'> {
+  useGtag: true
+}
+
+type Options = VueAnalyticsOptions | VueGtagOptions
+
 declare module '@nuxt/vue-app' {
   interface Context {
-    $ga: VueAnalytics
+    $ga?: VueAnalytics
+    $gtag?: VueGtag
   }
+
   interface NuxtAppOptions {
-    $ga: VueAnalytics
+    $ga?: VueAnalytics
+    $gtag?: VueGtag
   }
 }
 
 // Nuxt 2.9+
 declare module '@nuxt/types' {
   interface Context {
-    $ga: VueAnalytics
+    $ga?: VueAnalytics
+    $gtag?: VueGtag
   }
 
   interface NuxtAppOptions {
-    $ga: VueAnalytics
+    $ga?: VueAnalytics
+    $gtag?: VueGtag
   }
 
   interface Configuration {
-    googleAnalytics?: InstallOptions
+    googleAnalytics?: Options
   }
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $ga: VueAnalytics
+    // @ts-expect-error vue-analytics marks this object as required
+    $ga?: VueAnalytics
+    // @ts-expect-error vue-gtag marks this object as required
+    $gtag?: VueGtag
   }
 }
+
+declare const analyticsModule: Module<Options>
+export default analyticsModule

types/vuex.d.ts

@@ -1,7 +1,9 @@
-import type VueAnalytics from 'vue-analytics'
+import VueAnalytics from 'vue-analytics'
+import VueGtag from 'vue-gtag'
 
 declare module 'vuex' {
   interface Store<S> {
-    $ga: VueAnalytics,
+    $ga?: VueAnalytics
+    $gtag?: VueGtag
   }
 }