Example of Google Analytics

[StefanFlaschko]

Would be nice to have a full example of Google Analytics.
At the moment in the "Getting Started Guide" there is the section Cookies which contains:
{ description: { en: 'Used for cookie control.' }, id: 'ga', name: { en: 'Google Analytics' // you always have to specify a cookie name (in English) }, src: 'https://www.googletagmanager.com/gtag/js?id=<API-KEY>', targetCookieIds: ['cookie_control_consent', 'cookie_control_enabled_cookies'] }

This is a bit confusing because the targetCookieIds are not fitting the GA cookies Id's.

It also would be great to have an example on how the cookies for GA are deleted when the consent is removed.

Thanks a lot

[dargmuesli]

Thank you for opening the discussion! I've generalized the example so that it does not appear as if it would show an actual recipe for Google Analytics.
I have to say that I'm personally unable to include "valid" recipes as those would need to include legally valid texts which I cannot provide under my name, I'm afraid.

Also, the cookies should be removed automatically for optional cookies by cookie id when the consent is removed.

[MateThemes]

I struggle a lot to setup consent mode v2 from google.

I use nuxt-gtag and want to fire the consent via cookie-control and can seem to find a way. Is there any help?

[dargmuesli]

Maybe show how you're trying and someone could point out the missing bits. Otherwise StackOverflow likely helps with general coding support.

[filip-van-hoeckel]

Is consent mode supported in this solution, or should we look elsewhere?

[dargmuesli]

I am a little bit confused. This module provides a cookie banner. This module is in no way affiliated with Google Analytics. Maybe ask at nuxt-gtag if it supports that mode?

[MateThemes]

May you can provide more examples how to integrate nuxt-gtag with the new consent mode v2.

[dargmuesli]

Analytics solutions are out of scope for this project. This project is about cookies only.

[MateThemes]

Okay. But the Consent Mode v2 is about getting data. And this works via a consent banner. My question is how to implement this in nuxt cookie control. in the gtag module is a way to integrate this:

<script setup lang="ts">
const { gtag, initialize } = useGtag()
</script>

<template>
  <button @click="initialize()">
    Grant Consent
  </button>
</template>

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,
      }]
    ]
  }
})

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()

Is there a way to get that consent working with cookie control?

[dargmuesli]

Please post further responses as a comment under one of the first-level comments you've already created. Also, I've formatted your code so that it has some syntax highlighting. Please do that yourself next time and make sure to indicate which files contain the code snippets you post, so that it is possible for others to understand the code correctly.

Regarding your question: please show how you've tried to utilize the README's usage section to reach you goal.

[efernau]

maybe like this:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    "nuxt-gtag",
    "@dargmuesli/nuxt-cookie-control"
  ],
  gtag: {
    enabled: false,
    id: 'XY-12345'
  },
  cookieControl: {
    cookies: {
      necessary: [],
      optional: [
        {
          id: 'google-analytics',
          name: 'google-analytics',
          targetCookieIds: ['_ga', '_ga_', '_gcl_au'],
        },
      ],
    },
  },

app.vue

<template>
  <NuxtPage />
  <CookieControl />
</template>



<script setup lang="ts">
const {
  cookiesEnabled,
  cookiesEnabledIds,
  isConsentGiven,
  isModalActive,
  moduleOptions,
} = useCookieControl()

const { gtag, initialize } = useGtag()


// example: react to a cookie being accepted
watch(
  () => cookiesEnabledIds.value,
  (current, previous) => {
    if (
      !previous?.includes('google-analytics') &&
      current?.includes('google-analytics')
    ) {
      // use nuxt-gtag
      initialize()  
    }
  },
  { deep: true },
)
</script>

plugins/analytics.client.ts

export default defineNuxtPlugin(nuxtApp => {
    // example: initialization based on enabled cookies
    const cookieControl = useCookieControl()
    const { gtag, initialize } = useGtag()

    if (cookieControl?.cookiesEnabledIds?.value?.includes('google-analytics')) {
        initialize() 
    }
})