Google Tag Manager (GTM) & Google Consent Mode v2

This tutorial has been updated to take into account changes introduced with the new Google Consent Mode V2. Klaro is fully compatible with this new mode now!
If you're using the hosted version of Klaro, GTM support can be automatically enabled by adding the "Google Tag Manager" service to your configuration via the "Configs" tab or setup wizard. You will still need to create the required event trigger in the GTM web UI, however.

This tutorial explains how you can integrate Klaro with Google Tag Manager (GTM) to manage consent for services that are manged within GTM. The consent notice you see below controls an example GTM installation that manages a Google Analytics Tag. Klaro can fully manage GTM tags and also support Google's new "Consent Mode". As an example, the consent notice below controls a GTM tag that's installed on this site, which will load a Google Analytics tag when loaded, but only if you accepted the use of Google Analytics via Klaro.

Please note that with the new consent mode V2 changes, you will need to send two additional data values ad_user_data and ad_personalization, which need to be sent in addition to ad_storage and analytics_storage. You should ask separately for these permissions as in the example configuration below.

Example

Let's assume we want to use GTM to embed a Google Analytics tag in our website. To do that, we first include the GTM on our website, modifying it so that it can be managed by Klaro.

<head>
    ...
    <!-- Google Tag Manager -->
    <script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MZTF9XR');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
     <!-- Google Tag Manager (noscript) -->
    <noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    ...
</body>

Then, we create a Google Analytics tag in the GTM web UI. As a trigger, we create a custom event trigger 1 with name klaro-google-analytics-accepted. This ensures that GTM will only load Google Analytics if the user has granted consent for it via Klaro. And that's it! Klaro will now manage GTM and ensure that it only loads services for which the user has given consent via Klaro. Important: To add another service via GTM, first add it to your Klaro config and then simply define a custom event trigger of the form klaro-[service-name]-accepted, where [service-name] is the name of the service in the Klaro config.

Example Config

Here's the example Klaro config that we've used on this page. We define a "Google Tag Manager" service as well as a "Google Analytics" service. The different event handlers (onInit, onAccept, onDecline) take care of telling GTM about the consent choices the user has made, which in turn enables GTM to load the corresponding tags.

var klarConfig = {
    acceptAll: true,
    services: [
        {
            name: 'google-tag-manager',
            required: true,
            purposes: ['marketing'],
            onAccept: `
                // we notify the tag manager about all services that were accepted. You can define
                // a custom event in GTM to load the service if consent was given.
                for(let k of Object.keys(opts.consents)){
                    if (opts.consents[k]){
                        let eventName = 'klaro-'+k+'-accepted'
                        dataLayer.push({'event': eventName})
                    }
                }
            `,
            onInit: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
        },
        {
            // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
            name: 'google-analytics',
            cookies: [
                /^_ga(_.*)?/ // we delete the Google Analytics cookies if the user declines its use
            ],
            purposes: ['marketing'],
            onAccept: `
                // we grant analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'granted',
                })
            `,
            onDecline: `
                // we deny analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'denied',
                })
            `,
        },
        {
            name: 'google-ads',
            cookies: [],
            onAccept: `
                // we grant ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'granted',
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted'
                })
            `,
            onDecline: `
                // we decline ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'denied',
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied'
                })
            `,
            purposes: ['marketing'],
        }
    ]
}

Verifying Your Config

To verify your configuration, you can use Tag Assistant. Just enter the URL of the site where you integrate Klaro (this can be a local URL as well) and GTM will try to connect to that site. You can then see the events as they are fired. For example, initially when loading the page with the above configuration you should see that all storage types are in the denied state. If you accept both Google Ads and Google Analytics, you should see that consent was updated and all storage types are set to granted. Toggling either Google Ads or Google Analytics in the consent dialog should trigger events that update the consent state for these two cases.

Questions?

We know that integrating Klaro with Google Tag Manager and the new consent mode V2 is tricky, hence if you have any questions don't hesitate to contact us!

  1. https://support.google.com/tagmanager/answer/7679219?hl=en ↩