Activation of tracking only after user consent

[Eric]

Describe the feature

Good morning,
Thanks for this plugin.
I use it on a website in France, a country in which we need to ask the user's consent, via the display of a banner, to trace his navigation on the site.
I was wondering how by default not to activate the tracking and to be able to activate it only if the user clicks on the button of the banner.
Does the plugin allow this?
THANKS.

Additional information

• Would you be willing to help implement this feature?
• Can you think of other implementations of this feature?

Final checks

• Check existing issues.

[anirudhge]

Anyone have a solution to this?

[Johann Schopplich]

@MrGeminus, @PiotrGrobelak, @Ethan-Hill, @russback, @anirudhge I have added support for manual consent management:

If you want to disable tracking by default, you can set the initialConsent option to false. This will prevent the gtag.js script from loading until the user has consented to tracking.

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

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

To manually manage consent, you can use the useGtagConsent composable to set the consent state, e.g. after the user has accepted your cookie policy.

<script setup lang="ts">
function acceptTracking() {
  useGtagConsent(true)
}
</script>

<template>
  <button @click="acceptTracking">
    Accept Tracking
  </button>
</template>

Available in nuxt-gtag v0.5.0+.

[anirudhge]

This is great, thank you so much!

I do want to note though, that it is possible for GA4 to do cookie-less tracking. When cookies are rejected, gtag will still send pings to GA4.

However, it doesn't seem possible to first set the consent options of the user, before loading the tag? This means that we first have to load gtag, which sets the cookies, before sending the consent.

On a side note, I wanted to point out that one should always add a config to the initial settings, otherwise it is not possible to send custom and recommended events:

  gtag: {
    id: 'G-XXXXXXXX',
    config: {},
  }

[anirudhge]

Unfortunately for me the useGtagConsent(true) composable doesn't seem to do anything. I made sure to run it client-side.

Seemingly because the dataLayer is in the window.

[Johann Schopplich]

@anirudhge You're right, there is indeed a bug. Thanks for sharing!

[anirudhge]

@johannschopplich When initialConsent is set to false, the useGtag composable doesn't work anymore.

[Johann Schopplich]

You're right, working on a fix... Please test again and if an error persists, open another ticket. Thanks!

[Russ Back]

@johannschopplich thanks for the update. My config looks like this (I am using my runtime config and .env for the container ID):

gtag: {
  initialConsent: false
}

When I call useGtagConsent(true) when consent is given on button click (or in the layout template if consent has been cookied), I get the following reported from the Google Analytics Debugger Chrome dev tool:

Processing GTAG command: ["config", "G-Z6D9QQFKZ4", ""]
Ignored "config" command. Invalid arguments found.
Expected: "[config, string, plain Object]"Actual:   ["config", "G-Z6D9QQFKZ4", ""]

What format should I be defining here whilst still using .env for the container ID?