The latest updates on your projects. Learn more about Vercel for Git ↗︎

This is a great escape hatch. Would it be possible to document with an example of when you'd use this 🙏

I think if all EU users need the consent mode we should have a dedicated docs section for that 🤔

Seems like we DO need to use a gtag() fn in order to configure the consent mode.... This makes 0 sense.

I think if all EU users need the consent mode we should have a dedicated docs section for that 🤔

Are you talking about a whole page ?

Nah just like a section in the GTM page, let's go with this for now. Thanks!

The hook “onBeforeGtmStart” does not work correctly, the event “gtm.init_consent” is not being set.

I solved the problem as follows:

<template>
  <Teleport to="body">
    <div v-if="!consent" class="fixed inset-0 bg-black/90 flex flex-col items-center justify-center space-y-4 z-50">
      <div class="absolute bottom-6 inset-x-6 bg-white dark:bg-gray-800 rounded-lg">
        <div class="w-full py-12 px-6 lg:px-6 xl:px-20 max-w-full mx-auto xl:max-w-content">
          <div class="headline-lg mb-6">
            {{ $t('common.cookieBanner.title') }}
          </div>

          <p class="mb-8 max-w-xl">
            {{ $t('common.cookieBanner.description') }}
          </p>

          <BaseButtonGroup>
            <BaseButton
              :text="$t('common.cookieBanner.btnAcceptAll')"
              @click="handleConsent(true)"
            />
            <BaseButton
              variant="outline"
              :text="$t('common.cookieBanner.btnConfirmSelection')"
              @click="handleConsent(false)" />
          </BaseButtonGroup>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
const consent = useCookie('consent')

function gtag() {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push(arguments);
}

function handleConsent(consentGiven) {
  consent.value = consentGiven ? 'granted' : 'denied'

  gtag('consent', 'update', {
    ad_user_data: consent.value,
    ad_personalization: consent.value,
    ad_storage: consent.value,
    analytics_storage: consent.value
  })
}

onMounted(() => {
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  })

  const { proxy } = useScriptGoogleTagManager()

  useScriptEventPage(({ title, path }) => {
    proxy.dataLayer.push({
      event: 'pageview',
      title,
      path
    })
  })
})
</script>

The hook “onBeforeGtmStart” does not work correctly, the event “gtm.init_consent” is not being set.

I solved the problem as follows:

<template>
  <Teleport to="body">
    <div v-if="!consent" class="fixed inset-0 bg-black/90 flex flex-col items-center justify-center space-y-4 z-50">
      <div class="absolute bottom-6 inset-x-6 bg-white dark:bg-gray-800 rounded-lg">
        <div class="w-full py-12 px-6 lg:px-6 xl:px-20 max-w-full mx-auto xl:max-w-content">
          <div class="headline-lg mb-6">
            {{ $t('common.cookieBanner.title') }}
          </div>

          <p class="mb-8 max-w-xl">
            {{ $t('common.cookieBanner.description') }}
          </p>

          <BaseButtonGroup>
            <BaseButton
              :text="$t('common.cookieBanner.btnAcceptAll')"
              @click="handleConsent(true)"
            />
            <BaseButton
              variant="outline"
              :text="$t('common.cookieBanner.btnConfirmSelection')"
              @click="handleConsent(false)" />
          </BaseButtonGroup>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
const consent = useCookie('consent')

function gtag() {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push(arguments);
}

function handleConsent(consentGiven) {
  consent.value = consentGiven ? 'granted' : 'denied'

  gtag('consent', 'update', {
    ad_user_data: consent.value,
    ad_personalization: consent.value,
    ad_storage: consent.value,
    analytics_storage: consent.value
  })
}

onMounted(() => {
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  })

  const { proxy } = useScriptGoogleTagManager()

  useScriptEventPage(({ title, path }) => {
    proxy.dataLayer.push({
      event: 'pageview',
      title,
      path
    })
  })
})
</script>

Would you mind making an issue to track? 🙂

Yup doing that tomorrow 👍👍

I just discovered another important point. When I use my own gtag function, everything also works through the onBeforeGtmStart hook. But if you use the gtag function provided by the onBeforeGtmStart hook, then it doesn’t work.

The issue is caused by the gtag function provided by the onBeforeGtmStart hook.

This works

function gtag() {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push(arguments);
}

onMounted(() => {
  const { proxy } = useScriptGoogleTagManager({
    onBeforeGtmStart: () => {
      gtag('consent', 'default', {
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'ad_storage': 'denied',
        'analytics_storage': 'denied',
        'wait_for_update': 500,
      })
    }
  })
})

This doesn’t work

onMounted(() => {
  const { proxy } = useScriptGoogleTagManager({
    onBeforeGtmStart: (gtag) => {
      gtag('consent', 'default', {
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'ad_storage': 'denied',
        'analytics_storage': 'denied',
        'wait_for_update': 500,
      })
    }
  })
})

just created a pull request #494 to solve this issue. Also added an example in the documentation showing how to use the new onBeforeGtmStart hook to configure consent mode.