feat(gtm): add onBeforeGtmStart

[huang-julien]

🔗 Linked issue

resolve #243

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR improves GTM by adding a new callback to allow users to push anything into the datalayer before we push gtm.start . This way, users will be able to correctly set the consent mode

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
scripts-docs	❌ Failed (Inspect)			Feb 17, 2025 9:51pm
scripts-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 17, 2025 9:51pm

[harlan-zw]

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 🤔

[huang-julien]

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

[huang-julien]

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 ?

[harlan-zw]

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

[endorfin]

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>

[harlan-zw]

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? 🙂

[huang-julien]

Yup doing that tomorrow 👍👍

[endorfin]

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

[endorfin]

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.