How to implement Cookiebot (via the code or via GTM)?

3 options for implementation

There are 3 ways to implement Cookiebot:

• Option 1: Via the code
• Option 2: Via Google Tag Manager
• Option 3: Via a plugin

With option 3, you might encounter some issues related to the order in which Cookiebot is loaded. The consent update often arrives too late, causing you to miss out on a lot of data. It’s better to choose option 1 or 2 if you want to get the most out of it. Therefore, in this article, I will focus only on how to set up these two options step-by-step.

Option 1: Implementing Cookiebot via the code

To implement Cookiebot via the code, there are two scripts that need to be loaded:

• Cookiebot defaults script
• Cookiebot implementation script

Cookiebot defaults script
It’s important to manually send the default statuses for each parameter from the website. For safety, I always use my own script to ensure the defaults are sent on time.

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }

    gtag("consent", "default", {
        ad_personalization: "denied",
        ad_storage: "denied",
        ad_user_data: "denied",
        analytics_storage: "denied",
        functionality_storage: "denied",
        personalization_storage: "denied",
        security_storage: "granted",
        wait_for_update: 2000,
    });

    gtag("set", "ads_data_redaction", true);
    gtag("set", "url_passthrough", true);
</script>

It is crucial that this script is loaded before Google Tag Manager and before the Cookiebot script itself.

Cookiebot implementation script
My advice is to load the following script immediately after the consent defaults script and before Google Tag Manager. Cookiebot itself advises a different setup, as they recommend loading this script directly after Google Tag Manager. However, with their advised setup, I receive the consent update too late. I have reported this issue to Cookiebot and am waiting for their response.

<script id="Cookiebot"
    src="https://consent.cookiebot.com/uc.js"
    type="text/javascript"
    data-cbid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXX"
    data-blockingmode="auto"
    data-consentmode-default="disabled"
></script>

Replace the unique CBID in the code above; you can find the CBID or ‘Domain Group ID’ in Cookiebot under the ‘Scripts’ tab.

With this code, you also indicate that you want to use the automatic data blocking and that you manually send the defaults.

Option 2: Implement Cookiebot via Google Tag Manager

Step 1: Add the Cookiebot tag template.

• Click on ‘Templates’.
• Click on ‘Search Gallery’ at the top under Tag Templates.
• Click on the magnifying glass icon at the top right.
• Search for Cookiebot.
• Click on Cookiebot CMP, by cybotcorp.
• Click on ‘Add to workspace’.
• Click on ‘Add’.

Step 2: Add a new tag.

• Click on Tags.
• Add a new tag.
• Under ‘Custom’, select tag type: Cookiebot CMP by cybotcorp.
• Enter your CBID or Domain Group ID, which you can find in Cookiebot under the ‘Scripts’ tab.
• Language is set to Default (auto-detect) by default, leave it as is.
• Add Geo Region(s) is turned off by default, leave it as is.
• Ensure ‘Enable Google Consent Mode’ is enabled (checked).
• IAB Transparency and Consent Framework should only be enabled if you display ads on your website. Only enable this when ads from various advertisers are shown on your website, so not when you are an advertiser on another website.
• Wait for update is set to 2000 by default, leave it as is.
• Redact ads data is set to Dynamic (match ad_storage) by default, leave it as is.
• Ensure ‘Enable URL passthrough’ is checked.
• Under Default Consent State, no regions are listed by default, leave it as is.
• Finally, add a trigger. Choose one of the standard built-in triggers called Consent initialization – All Pages. This trigger will fire first.

Step 3: Publish the changes

• Click on ‘Submit’ at the top right.
• Choose a version name, for example Cookiebot implementation.
• Click on ‘Publish’ at the top right.

Next steps:

After the implementation, it’s important to set up a few things in GTM so that you can actually use the preferences to load tags. I’ll explain this in my next article.

Disclaimer:

I’m sharing all of this information for free and this content is not sponsored. As an analytics nerd I’ve helped many companies to implement consent mode with different CMP’s such as Complianz, Cookiefirst, Cookiecode, Iubenda & more. However, my favorite CMP is Cookiebot by Usercentrics.

Therefore, I’ve signed up as a Cookiebot partner and I can give you a 20% lifetime discount on your subscription. I’ll have to invite you manually, so contact me if you want help and would like the discount.

If you want to support my content and don’t need the discount, when you click this affiliate link and sign up I’ll get a small affiliate fee. Thanks for reading this far, hope the content is helpful and if there’s anything I can help with: let me know!