Adobe Dynamic Tag Management deployment – Cookiebot Support

Publishers using Adobe Dynamic Tag Management (DTM) can easily deploy Cookiebot to their websites with DTM by following these step-by-step instructions.

In this guide, we will show you how to:

Implement the cookie consent banner in DTM
Use Cookiebot in DTM to control cookie-setting tags like Google Analytics and AdSense
Display your cookie declaration in full on a subpage using DTM

We assume that you have already created a DTM account, created a property for your website in DTM and embedded the DTM header and footer codes in your website.

1. Implementing the cookie consent banner in DTM

First, create the data elements which are the glue between Cookiebot and DTM event handling.

From your DTM property click the “Rules” tab, then the sub-tab “Data Elements” and finally the button “Create New Data Element”.

Create a total of three Data Elements with the following unique values:

Name	Path
"Cookie Consent Preferences"	"cookie_consent_state.preferences"
"Cookie Consent Statistics"	"cookie_consent_state.statistics"
"Cookie Consent Marketing"	"cookie_consent_state.marketing"

For all three Data Elements, select “JS Object” as type, “false” as Default Value and “Pageview” for persistence.

Example on Data Element “Cookie Consent Preferences” configuration:

Image: https://c2.staticflickr.com/8/7591/27536055363_f5fe286201_o.png

Now, click the “Page Load Rules” sub-tab to create a rule to include the Cookiebot tag on all pages.

Click “Create New Rule” and configure the rule with the following value:

Name: “Cookie Consent”
Conditions/Trigger rule at: “Top of Page”
Conditions/Add criteria for URL-Path: Path include “.*”, enable Regex

Javascript/Third Party Tag/Add new script: Name “Cookiebot Tag”, Type: "Sequential HTML".
Insert the following code:

<script>
  var cookie_consent_state = {
    preferences: "false", statistics: "false", marketing: "false"
  }

  function CookiebotCallback_OnLoad() {
    ["preferences", "statistics", "marketing"].forEach(function (e) {
      cookie_consent_state[e] = Cookiebot.consent[e] ? "true" : "false";
    })
    _satellite.cookie.set("sat_track", Cookiebot.consent.marketing ? "true" : "false");
  }
</script>
<script
  id="Cookiebot"
  src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000"
  type="text/javascript"
  async
></script>

Replace the CBID value "00000000-0000-0000-0000-000000000000" in the code with your own ID from the "Your scripts" tab in the Cookiebot Manager.

At the same time, make sure to enable Cookiebot on your website by registering the domain name(s) of your website(s) in Cookiebot.

This is what your rule configuration should look like in DTM:

Image: https://c2.staticflickr.com/8/7432/28047477722_5d1126fb73_o.png

Finally, approve and publish your changes for the consent banner to display on your website.

2. Controlling cookies

To comply with the visitor's cookie consent, you need to define the logic which controls the behavior of cookie-setting scripts on your website. Cookiebot exposes a client side object named "Cookiebot" which you can reference in DTM to check which types of cookies the visitor accepts (the visitor's consent state). For a full overview of the Cookiebot API, please visit https://www.cookiebot.com/goto/developer.

For integrated tools in DTM like Adobe Analytics and Google Analytics, you need only to check the option "Enable EU compliance" under "General" > "Tracker configuration" in the tool’s configuration. For all other script tags you must add an event condition as described below:

Example: Google AdSense/DoubleClick

In this example, we will show you how to implement and control the Google AdSense tag with Cookiebot in DTM, so that AdSense will only fire if the visitor has accepted marketing cookies. Since DTM loads asynchronously, we will use the asynchronous version of the AdSense script.

In DTM, click the sub-tab “Event Based Rules” and “Create New Rule”.

Name the rule, e.g. “AdSense” and enter the following values in the “Conditions” section:

Event → Event Type: “dataelementchanged”
Event → Select Data Element: “Cookie Consent Marketing”
Rule Conditions → Add Criteria “Data – Data Element Value”:
Data Element = “Cookie Consent Marketing”, Value = “true”

In the “JavaScript / Third Party Tags” section, add a new script of type “Non-Sequential” and insert the following code (replace “000000000” with your own AdSense ID):

Cookiebot.getScript(
    "//www.googleadservices.com/pagead/conversion_async.js",
    true,
    function () {
        window.google_trackConversion({
            google_conversion_id: 000000000,
            google_custom_params: window.google_tag_params,
            google_remarketing_only: true,
        });
    }
);

Save the rule. When you approve and publish this rule, AdSense will only trigger for website visitors who has opted in for marketing cookies.

Image: https://c2.staticflickr.com/8/7408/27870001410_27f0a2b882_o.png

3. Implementing the cookie declaration

If you want to show the optional full page cookie declaration for your website on a specific subpage, e.g. on a separate cookie manifest page or as part of your privacy policy, DTM can inject the declaration in real-time into an empty HTML placeholder element on the subpage, identified by attribute "id" or a unique class name.

First you need to create a new rule with the URL path to the page in question, e.g. "/privacy policy".

Under “Page Load Rules”, click “Create New Rule” and configure the rule with the following values:

Name: “Cookie Declaration”
Conditions → Trigger rule at: “Onload”
Conditions → Add Criteria “URL – Path”: “Include” – “/privacypolicy” (change to your own URL path)

In the “JavaScript / Third Party Tags” section, add a new script of type “Non-Sequential” and insert the following code:

(function (b, c) {
    var cookieDeclarationPlaceholder = document.getElementsByClassName(b)[0],
        s = document.createElement("script");

    s.type = "text/javascript";
    s.id = "CookieDeclaration";
    s.src = "https://consent.cookiebot.com/" + c + "/cd.js";
    cookieDeclarationPlaceholder.appendChild(s);
})("body-content", "00000000-0000-0000-0000-000000000000");

Remember to replace the class name "body-content" with the class name of the empty HTML placeholder element on your website. Also, replace the identifier value "00000000-0000-0000-0000-000000000000" in the code with your own Doman Group ID from the "Your scripts" tab in the Cookiebot Manager.

This is what your event configuration should look like (except url path):
Image: https://c2.staticflickr.com/8/7323/27870001420_63266b6c82_o.png

Finally, approve and publish to push the changes to your site. The cookie declaration will now display in the page element with the class “body-content” at the url path you have defined above.