Websites using Google Tag Manager (GTM) can easily deploy Cookiebot by following these step-by-step instructions.
In this guide, we will show you how to:
In this guide, we will show you how to:
- Implement the cookie consent banner
- Control cookie-setting tags
- Display the cookie declaration on a subpage
We assume that you have already created a GTM account, created a website container in GTM and added the GTM container snippet to your website as required: https://support.google.com/tagmanager/answer/6103696
When you implement Cookiebot using GTM, Cookiebot will also be able to control tags not set from GTM, i.e. script tags that are inserted directly in your website template. Just mark up such tags for 'prior consent' as described in Step 3 of our general implementation tutorial.
1. Implementing the cookie consent banner in GTM
In your GTM container create a new tag by clicking "New" > "Custom HTML Tag".
In the "HTML" field, insert the following snippet and replace the serial number "00000000-0000-0000-0000-000000000000" with your own serial number from the 'Your scripts' tab in the Cookiebot Manager:
<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>Please note: You can't just copy the Cookiebot script tag from the Cookiebot Manager, you need to move the 'cbid'-attribute inside the URL as described above, because GTM will strip the attribute 'data-cbid' from the default script. Without the 'cbid' URL-fragment, Cookiebot will not display on your site when served through GTM.
Choose "All pages" as trigger and apply a name to your tag at the top of the configuration page, e.g. "Cookie Consent". Click "Save" to create the tag.
This is what your tag configuration should look like (except for the value of the serial number):
Finally, click "Publish" to push your changes live to your site.
Also, make sure that you have registered and saved the domain name(s) of your website(s) in Cookiebot.
The consent banner is now active on your website.
2. Controlling cookies
To honor the visitor's consent, you need to define the logic that controls the behavior of cookie-setting scripts on your website.
Example: Google Analytics
In this example, we will show you how to implement and control Google Analytics Universal (GAU) with Cookiebot in GTM, so that GAU will only set cookies if the visitor has accepted statistic cookies.From the GTM "Triggers" list, click "New".
Choose "Custom Event" and enter an event name for the trigger, "cookieconsent_statistics", in the field "Event name".
Click "Save" to create the trigger.
This is what your trigger configuration should look like:
Repeat the above for each type of cookies, so that you have three triggers named "cookieconsent_preferences", "cookieconsent_statistics" and "cookieconsent_marketing".
Now create the GAU tag by clicking "New" from the Tags list - or edit your existing GAU tag.
If creating a new GAU tag, select "Universal Analytics" under the "Choose tag type" pane. Select "New Variable" in the select box under "Google Analytics settings" and enter your GAU Tracking ID (available from Google Analytics) in the field "Tracking ID". Click "Save".
As trigger, select the trigger you have just created, "cookieconsent_statistics". Click "Save" to create or update the tag.
This is what your final GAU tag configuration should look like (except for the Tracking ID):
Finally, click "Publish" to push your changes live to your site.
Controlling cookies with multiple triggers
While the approach above is efficient when using only one trigger on a tag, you need a different approach when controlling cookies on tags with multiple triggers.In GTM, a tag will fire if any of the triggers on a tag evaluate to true. Since we want the tag to fire only when the existing trigger and the relevant cookie consent event both evaluate to true, you must add a condition to the existing trigger instead of adding the cookie consent trigger to the tag itself. Trigger conditions must all evaluate to true in order for the trigger to fire.
The values of the cookie consent trigger condition to add are: Event - equals - cookieconsent_marketing
Replace "cookieconsent_marketing" with "cookieconsent_preferences" or "cookieconsent_statistics", depending on the type of cookies set by the tag.
Example on adding a cookie consent condition to an existing trigger:
If your trigger is of a different type than "Custom Event", eg. "Click - Just Links", you will not be able to define a trigger condition based on an Event as illustrated above. In this case you need to define a new "User-Defined Variable" of type "Custom JavaScript" for each category of cookies.
Example:
Create a user-defined variable and name it "Cookiebot.consent.marketing". In the field "Custom Javascript", enter the following snippet:
function(){ return Cookiebot.consent.marketing.toString()}Repeat these steps to create a variable for "preferences" and "statistics"-cookies as well by replacing "marketing" in the above variable name and Javascript.
Now go back to your trigger configuration and add a new condition referring to one or more of the above variables, e.g. "Cookiebot.consent.marketing" - contains - true
Please note: If your existing trigger is of the event type "Page View", you need to change it to event type "Window Loaded" since the visitor's consent is not available to GTM before the window has loaded.
3. Implementing the cookie declaration
If you want to display the cookie declaration for your website in full length on a specific subpage, e.g. on a separate cookie declaration page or as part of your privacy policy, GTM can inject the declaration in real-time into an empty HTML placeholder element on the subpage, identified by attribute "id" or a classname.
First you need to create a new trigger with the path to the page in question, e.g. "/privacypolicy".
From the Triggers list, click "New" and select "Page View" as type on the "Choose trigger type" pane.
Select "Some Page Views" and define this condition for the trigger to fire:
url path - equals - /privacypolicy
Click "Save" to create the trigger.
This is what your trigger configuration should look like (except the final url path):
From the Triggers list, click "New" and select "Page View" as type on the "Choose trigger type" pane.
Select "Some Page Views" and define this condition for the trigger to fire:
url path - equals - /privacypolicy
Click "Save" to create the trigger.
This is what your trigger configuration should look like (except the final url path):
From the Tags list create a new "Custom HTML Tag". In the field "HTML" copy/paste the snippet below and replace the Cookiebot serial "00000000-0000-0000-0000-000000000000" with your own serial as described earlier. Also make sure that the variable "contentPlaceholder" is set to the correct HTML element on your page, i.e. by renaming the element id "bodycontent" to the id of your own placeholder element.
<script>var contentPlaceholder = document.getElementById("bodycontent");var cookieDeclarationScript = document.createElement("script");cookieDeclarationScript.type = "text/javascript";cookieDeclarationScript.id = "CookieDeclaration";cookieDeclarationScript.src = "https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js";contentPlaceholder.appendChild(cookieDeclarationScript);</script>
Under the "Triggering" section, select the trigger you have just created. Click "Save" to create the tag.
This is what your tag configuration should look like (except for the value of the serial):
Finally, click "Publish" to push your changes live to your site.
The cookie declaration will now display at the path you have defined above.
For instructions on how to make the cookie banner change language depending on which (language) part of your website a visitor navigates, please see Multilingual support when using GTM.
See also our blog post: Google tag manager and GDPR
Last updated: 29 May 2018
Comments
1 comment
Hello,
I maintains many wix website but this I followed the procedure but it does not work.
The cookies content banner does not appear. Why ?
Please sign in to leave a comment.