How to Fix Cookiebot’s Official Guide and Protect Yourself from GDPR

[UPDATE 22th november 2019]

If you are reading this guide it’s probably ‘cause you heard that Cookiebot can simplify your compliance with GDPR and you would like to install it with Google Tag Manager.

Well, I’ve got a couple of things to tell you.

Good News (yay!): you can find the official guide and learn how to install Cookiebot using Google Tag Manager on their official Website.
Here: https://www.cookiebot.com/en/google-tag-manager-gdpr/

That’s great, ‘cause this means that people are understanding the importance of GTM and the tool is spreading more and more. But…..

Bad News: There’s a problem.

I checked the official guide and noticed that it’s not as performing as it could be.
There’s a specific detail that blocks one of GTM’s most important advantages and this damages the way Google Tag Manager works internally, thus compromising other Tags and Events tracking on your website losing some key-benefits of GTM.

What? This sounds terrible, isn’t it?

No problem: it took me one sleepless night to figure it out, but I finally found a trick to solve the problem and make the installation work anyway without affecting the GTM’s system.

Are you curious to know what’s the trick?

First of all, I will show you the official guide on Cookiebot’s website. Then, I will explain to you what is not working, why and how to optimize it.

Let’s get started!

OFFICIAL GUIDE:

STEP 1 – Add the Snippet with a Custom HTML Tag

• Find your Cookiebot ID number in your account. You will find it under the “My scripts” Tab

• In your GTM container create a new Tag: Tag > New > Custom HTML Tag.
• Copy-paste the following snippet (watch out: it’s not the same suggested in the “My scripts” Tab!), replacing the ID number (the red number, in the example) with yours.

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000" type="text/javascript"></script> <script> function CookiebotCallback_OnAccept() {     if (Cookiebot.consent.preferences)         dataLayer.push({'event':'cookieconsent_preferences'});     if (Cookiebot.consent.statistics)         dataLayer.push({'event':'cookieconsent_statistics'});     if (Cookiebot.consent.marketing)         dataLayer.push({'event':'cookieconsent_marketing'}); } </script>

• Choose the Trigger: All Pages.
• Rename the Tag “CookieBot GDPR Consent” and save it.

As you can see, the script is pushing 3 Custom Events, according to the cookie-settings chosen by the user on your website:

• preferences (cookieconsent_preferences)
• statistics (cookieconsent_statistics)
• marketing (cookieconsent_marketing)

STEP 2 – SET UP THE TRIGGERS

The script just created is pushing the 3 Events into the Data Layer. Now, we need to set up the Custom Events.

We are going to repeat the same procedure for each of them.

To set up “cookieconsent_preferences”:

• Triggers > New > Custom Event
• Event Name: cookieconsent_preferences
• This trigger fires on: All Custom Event

Do the same thing for the other 2 Triggers: “cookieconsent_statistics” and “cookieconsent_marketing”.

STEP 3 – LINK THE TRIGGERS TO THE TAGS

Now you will have to link the Tags you want to make GDPR-proof to the corresponding Triggers.

There are different cases listed in the official guide.

When you have a Pageview Trigger you can simply substitute it with one of the Triggers just created: “cookieconsent_preferences”, “cookieconsent_statistics” or “cookieconsent_marketing”.

For example:

• Tag: GA Pageview // Trigger: cookieconsent_statistics
• Tag: Facebook Pixel // Trigger: cookieconsent_marketing

and so on… for example Hotjar or AdWords Remarketing Tags.

This is how your GA Pageview will look like now:

STEP 4 – LINK THE CUSTOM EVENT TRIGGERS

In the second case explained by the official guide, you should create a Custom Event Trigger with these two filters:

• Fire it on a specific page.
• Event equal “cookieconsent_preferences”, “cookieconsent_statistics” or “cookieconsent_marketing”.

STEP 5 – LINK OTHER KINDS OF TRIGGERS

All the other cases, like a Click Trigger or Link Trigger for example, should be treated in a completely different way.

The official guide suggests to create some JavaScript Variables related to the cookie-settings chosen by the users.

• Variables > New > Custom JavaScript Variable
• Name: “Cookiebot.consent.marketing”
• Add the following code:

function()
 {
 return Cookiebot.consent.marketing.toString();
 }

 

Then you should do the same with “Cookiebot.consent.preferences.toString()” and “Cookiebot.consent.statistics.toString()”.

The value returned could be “true” (meaning: the user accepted the preferences cookies) or “false” (meaning: the user did not accept them).

In order to add this condition you should go back to the new Trigger and add a new condition, for example:

• “Cookiebot.consent.marketing” contains true

Here’s the problem. The official guide states something which is apparently a detail, but in facts it’s not. Not at all.

As you can see in the screenshots, the JavaScript will be executed only after the Window Loaded event, so all the Tags should be now fired after the Window Loaded as well, not after the Page View.

WTF!

WHY THE OFFICIAL GUIDE WON’T WORK:

When I saw this I almost fainted: this change means that we will have to lose the Event type “Page View” and “DOM Ready”, since all the Tag will be fired after the Window Load!!

Is this a joke?? This means losing a Google Tag Manager milestone!

I didn’t like the official guide at all. So what to do? Surrender to it for the sake of GDPR? Naaaaa…. I decided to change it “slightly”.

I stayed awake one whole night to fix the problem, but it was definitely worth it:

HERE’S THE SOLUTION:

How to fix the Cookiebot’s official guide and protect yourself from GDPR without screwing up Google Tag Manager.

STEP 1 – SET UP THE COOKIEBOT VARIABLES

First of all, set up a Variable containing the Cookiebot ID we copied in the first step of the official guide.

• Variables > New > Constant variable
• Name: CookieBotId
• Value > Insert your Cookiebot ID.
• Rename it “CookieBotId” and save.

Now we need to set up other 4 Variables.

• CookieConsent
• CookieConsent.marketing
• CookieConsent.preferences
• CookieConsent.statistics

STEP 2 – CREATE THE COOKIE VARIABLE

Cookiebot includes a cookie for the cookie-settings chosen by users once they have stated their preference.

Therefore now we need to create a Variable to get the cookie’s values.

• Variable > New > 1st Party Cookie
• Cookie Name: CookieConsent
• Variable Name: “CookieConsent”
• Save the Variable

STEP 3 – CREATE THE OTHER COOKIE CONSENT VARIABLES

Now we’ll need to set up the other Variables (CookieConsent.marketing, CookieConsent.preferences and CookieConsent.statistics) in order to detect the cookie-settings chosen by users.

Ingredients: 3 RegEx Table, a smart trick and a little patience 😉

CookieConsent.marketing RegEx Table:

• Variables > New > RegEx Table
• Input Variable: {{CookieConsent}}
• Pattern: marketing:true ► Output: true
• Pattern: marketing:false ► Output: false
• Advanced Settings: leave only “Ignore Case” selected (see the screenshot)
• Variable Name: “CookieConsent.marketing”
• Save

Do the same thing for “CookieConsent.preferences” and “CookieConsent.statistics”. Be careful: you will have to change also the Pattern field (for example marketing: true will become statistics:true).

“Why are you setting up these Variables??”

Uuuhh… let me explain.

Thanks to this new trick the JavaScript will be executed BEFORE the Window Loaded event. This means that we won’t lose the Event types “Page View” and “DOM Ready” anymore!

YAY!! 😀

STEP 4 – INSTALL THE SCRIPT WITH A CUSTOM HTML TAG

[Cookiebot update from November 2019]

Cookiebot has created its own template,  a Tag created by them, which executes a push (probably seeing my guide) three events:

• cookie_consent_preferences
• cookie_consent_statistics
• cookie_consent_marketing

But these three events are still not completely performing. So my suggestion is to let them stay (pretend that they don’t exist) and continue using this guide of mine. The difference between mine and them is an underscore “_” character that I marked in red.

 

This part will be similar to the one in the first step. Just with some changes on the snippet from the official guide 😉

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js?cbid={{CookieBotId}}" type="text/javascript"></script>
<script>
function CookiebotCallback_OnAccept() {
 if ((Cookiebot.consent.preferences) && ({{CookieConsent.preferences}} != "true"))
 dataLayer.push({'event':'cookieconsent_preferences'});
 if ((Cookiebot.consent.statistics) && ({{CookieConsent.statistics}} != "true"))
 dataLayer.push({'event':'cookieconsent_statistics'});
 if ((Cookiebot.consent.marketing) && ({{CookieConsent.marketing}} != "true"))
 dataLayer.push({'event':'cookieconsent_marketing'});
}
</script>

• Tag > New > Custom HTML Tag
• Advanced Settings > Tag firing options: Once per Page.
• Trigger: All Pages.
• Tag Name: “CookieBot GDPR Consent”.

LET’S SEE TOGETHER WHAT’S CHANGED EXACTLY

First of all, “Tag firing options: Once per Page” avoids the Tag to be fired twice.

Secondly, I introduced new conditions (marked in bold) before each dataLayer.push. These new conditions verify the following things:

1) The CookieConsent has already been registered
2) The value for that particular cookie category (preferences, marketing or statistics) is not true.

What does this mean?
In other words the custom Event will be pushed ONLY if the user has already expressed his cookie preferences AND he didn’t accept that specific category of cookies.

Why do we need to do this? You’ll see in the following steps.

STEP 5 – SET UP THE TRIGGERS

This step is exactly the same as the STEP 2 in the official guide. Let’s create the 3 Custom Events.

To set up “cookieconsent_preferences”:

• Triggers > New > Custom Event
• Name: cookieconsent_preferences
• Fire the trigger on: All Custom Event

Repeat the same procedure for the other 2 Triggers: “cookieconsent_statistics” and “cookieconsent_marketing”.

STEP 6 – SET UP THE “NEGATIVE” TRIGGERS

Here’s another trick. We will now need to create what I call “Negative Triggers”. They are basically based on the same system as the Triggers just created but represent the opposite value (not true).

We will need to add them as a Trigger Exception in the most common Tags.

• Triggers > New > Page View
• This Trigger fires on: Some Page Views
• Fire this trigger when: CookieConsent.marketing does not equal true
• Rename the Trigger: “cookieconsent_marketing Not Accepted”
• Save

This is valid only for Page View Events.

Repeat the same procedure for “cookieconsent.statistics” and “cookieconsent.marketing”.

There’s a quickest trick. You can also create just one negative trigger valid for all types of Events. Then you need to add it as an expection to Tags:

• Triggers > New > Custom Event
• Event Name: .*
• Use regex matching: yes
• Rename the Trigger: “cookieconsent_marketing Not Accepted”
• Save

Repeat the same procedure for “cookieconsent.statistics” and “cookieconsent.marketing”.

 

STEP 7 – LINK THE NEW TRIGGERS

Thanks to these two kind of Triggers (Custom Event and Negative Triggers) we can now easy link them to our Tags. You will see that once you have configured everything for the first time, it will be much easier later to manage your GDPR compliance on the Tags you will create!

We’ll divide our Tag into 2 main categories:

1) Tags fired on Page View/DOM Ready/Window Loaded
2) Tags fired on all other kinds of Triggers

Let’s see the examples together.

1) Google Analytics Pageview

In order to make your GA Pageview comply with GDPR, the only thing you should do now is:

• Open your GA Preview Tag
• Keep the usual “All Pages” Trigger and add the Trigger: “cookieconsent_statistics”
• Add the exception: “cookieconsent_statistics Not Accepted”

That’s all, folks!

Now your Google Analytics Pageview will be fired ONLY when the user has already expressed his explicit consent to receive statistics cookies.

“Wow, so cool! But what if I have other kind of events? Like click or link event for example.”

I’m sorry dude. In those other cases you will have to be patient and always add the conditions manually when you create new Triggers.

Here you have an example:

2) Click Mailto

Let’s say we want to track when users click on a mailto link. The corresponding Trigger is related to the GA Event Tag. Therefore what we have to do is adding the condition:

• cookieconsent.statistics equals true

This means that the user must have accepted our statistics cookies in order for the Click Mailto Event to be fired.

SUMMARY

Wow, this guide was kinda complicated but totally worth it!

Now you can be sure of your GDPR compliance, thanks to GTM and my optimized guide to install and manage CookieBot with Google Tag Manager.

If something is still not clear and you need help don’t be shy and contact me (you have to be registed on CookieBot via this link: https://manage.cookiebot.com/goto/signup?rid=TMITA )

If you are a member of Club Tag Manager Italia you will have:

• priority over other people asking for consultancy
• video tutorials about the best way to install Cookiebot and protect yourself from GDPR
• my GTM templates that you have just to import in your GTM container to set up this guide

Here you find also Cookiebot’s official installation guide via GTM (remember: this version is not optimized):
https://www.cookiebot.com/en/google-tag-manager-gdpr/