nuxt-gtag

   🚀 Features

• Mock composables when module is disabled  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/90 (a1f3a)

    View changes on GitHub

   🚨 Breaking Changes

• initMode for manual Gtag initialization  -  by @johannschopplich (f9080)

   ℹ️ Migration

In v2.x and earlier, the enabled option was used to control manual initialization of the Google tag script. This option has been replaced with initMode in v3.x. To migrate your configuration, set the initMode option to manual:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],

  gtag: {
-    enabled: false,
+    initMode: 'manual',
    id: 'GX-XXXXXXXXXX'
  }
})

The enabled option is still available in v3.x, but is now used to disable the Google tag module for the current environment. This is useful if you want to disable the module in development or staging environments:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],

  gtag: {
    enabled: process.env.NODE_ENV === 'production',
    id: 'G-XXXXXXXXXX'
  }
})

    View changes on GitHub

   🚀 Features

• Prevent ad blockers from affecting development  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/85 (1bcd2)

    View changes on GitHub

   🐞 Bug Fixes

• Expose plugin types closes #83, closes #82  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/83 and https://github.com/johannschopplich/nuxt-gtag/issues/82 (18465)

    View changes on GitHub

   🐞 Bug Fixes

• Augment runtime config types  -  by @DamianGlowala in https://github.com/johannschopplich/nuxt-gtag/issues/63 (000c9)
• Augment @nuxt/schema  -  by @johannschopplich (2ec0f)
• Always provide default config value for Gtag init  -  by @johannschopplich (3d9ea)

    View changes on GitHub

   🐞 Bug Fixes

• Ensure head script is injected once  -  by @johannschopplich (2eb26)
• Require Nuxt 3.7 or higher  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/54 (2142b)

    View changes on GitHub

   🏎 Performance

• Resolve options raw once  -  by @johannschopplich (0e4bb)

    View changes on GitHub

   🐞 Bug Fixes

• Resolve raw options  -  by @johannschopplich (58507)

    View changes on GitHub

   🐞 Bug Fixes

• Resolve initCommands option  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/50 (e83d2)

    View changes on GitHub

No significant changes

    View changes on GitHub

Migration Guide

The latest version of Nuxt Gtag improves the API and adds support for Google Tag Consent Mode v2. This migration guide will help you to upgrade your project from the previous version to the latest one.

Migrating initialConsent

This module option has been renamed to enabled. If you have set initialConsent to false in your configuration, you should rename it to enabled.

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],

  gtag: {
    id: 'G-XXXXXXXXXX',
-    initialConsent: false
+    enabled: false
  }
})

Migrating grantConsent

This function has been renamed to initialize. If you have used grantConsent in your project, you should rename it to initialize.

const { 
    gtag,
-    grantConsent
+    initialize
} = useGtag()

- grantConsent()
+ initialize()

Migrating revokeConsent

Before v2, grantConsent and revokeConsent were used to enable and disable analytics. But the abstraction was not clear, because they didn't work for other Google products like Google Ads.

Now, you can use enableAnalytics and disableAnalytics to enable and disable analytics.

New: Google Consent Mode

[!TIP]
Follows the Google Consent Mode v2 specification.

Set a default value for each consent type you are using. By default, no consent mode values are set.

The following example sets multiple consent mode parameters to denied by default:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],

  gtag: {
    id: 'G-XXXXXXXXXX',
    initCommands: [
      // Setup up consent mode
      ['consent', 'default', {
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        ad_storage: 'denied',
        analytics_storage: 'denied',
        wait_for_update: 500,
      }]
    ]
  }
})

After a user indicates their consent choices, update relevant parameters to granted:

function allConsentGranted() {
  const { gtag } = useGtag()
  gtag('consent', 'update', {
    ad_user_data: 'granted',
    ad_personalization: 'granted',
    ad_storage: 'granted',
    analytics_storage: 'granted'
  })
}

function consentGrantedAdStorage() {
  const { gtag } = useGtag()
  gtag('consent', 'update', {
    ad_storage: 'granted'
  })
}

// Invoke the consent function when a user interacts with your banner
consentGrantedAdStorage() // Or `allConsentGranted()`

   🚨 Breaking Changes

• Rename initialConsent to enabled  -  by @johannschopplich (b342e)
• Rename grantConsent to initialize  -  by @johannschopplich (3bd75)
• disableAnalytics and enableAnalytics  -  by @johannschopplich (998fe)

   🚀 Features

• Google tag consent mode v2  -  by @johannschopplich (903b9)
• initCommands  -  by @johannschopplich (d9706)

    View changes on GitHub

   🐞 Bug Fixes

• Default config to empty object  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/47 (e9947)

    View changes on GitHub

   🚀 Features

• Custom source URL  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/46 (2c407)
• Support multiple Google tag IDs closes #31 closes #30  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/31 and https://github.com/johannschopplich/nuxt-gtag/issues/30 (aedc6)

   🐞 Bug Fixes

• Resolve runtime options in client  -  by @johannschopplich (49f9a)
• Init all tags when granting consent  -  by @johannschopplich (acd0b)

   🏎 Performance

• Load client plugin in parallel  -  by @johannschopplich (b7af8)

    View changes on GitHub

   🚀 Features

• Log missing Google analytics ID  -  by @johannschopplich (59a63)

    View changes on GitHub

   🚀 Features

• Stricter useTrackEvent param types fixes #28  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/28 (d57cb)

    View changes on GitHub

   🚀 Features

• Complete gtag.js type definitions  -  by @johannschopplich (8a0dc)

    View changes on GitHub

   🚨 Breaking Changes

• Remove useGtagConsent composable  -  by @johannschopplich (cb74a)
• useGtag composable to destructure grantConsent, revokeConsent & gtag  -  by @johannschopplich (00ee2)

    View changes on GitHub

   🐞 Bug Fixes

• Add explicit composable imports  -  by @johannschopplich (9a008)

    View changes on GitHub

   🐞 Bug Fixes

• dataLayer may be undefined if no ID is provided  -  by @johannschopplich in https://github.com/johannschopplich/nuxt-gtag/issues/24 (f60e4)

    View changes on GitHub

   🐞 Bug Fixes

• Add missing defineNuxtPlugin import  -  by @johannschopplich (58f04)

    View changes on GitHub