Introduction

To comply with the GDPR and ePrivacy website owners have to respect the user's choice with respect to cookie tracking. This means that the website owner needs the ability to control when a cookie-setting script is executed on the website.

blocking-of-cookies.gif

This is required as the GDPR and ePrivacy state that the website owner is required to block cookie-setting script until they have collected consent from the user.

Compliant use of cookie tracking can be achieved by first executing cookie setting scripts after the user has given their consent.

Cookie Information's Consent Solution provides you with 4 cookie categories which represent the data processing purpose for which the cookies are used, and for which your users can give their consent

The 3 cookie categories included in the Cookie Control SDK that you need to consider:

  • cookie_cat_functional
  • cookie_cat_statistic
  • cookie_cat_marketing

The basic concept of the Cookie Control SDK

As illustrated below, before the user has given consent in the pop-up the script is not executed and the functions within the script are not able to fire.

Once the user consents then the script will execute.

cookie-control-sdk-and-scripts.jpg

There are many ways a service/script can be implemented onto the website, eg. inline, external, or through an iframe or through a Tag Manager. The following guide describes how our Cookie Control SDK is used on each method.

In the next sections, it will be explained how to use the Cookie Control SDK to control the execution of cookie-setting scripts on the website.

Google Tag Manager

*Please read the entire part of the Google Tag Manager in order to cover all possible errors and best practices.

Google Tag Manager is based upon having tags that are fired on triggers. These triggers are defined as an event occurring on the website, like the user clicking a button or visiting a certain URL.

*The cookie pop-up script "https://policy.app.cookieinformation.com/uc.js" should NOT be called using Google Tag Manager. The script should be implemented according to article section 2. Consent Pop-up.

Settings up the triggers

The most common trigger in GTM is PAGE VIEW. This trigger when set to, all pages will fire the tag on all pages of the website.

Our Cookie Control SDK will upon consent from the user, push out each cookie category the GTM's DataLayer. These can be used to check against in the trigger as a CUSTOM EVENT.

mceclip0.png

By default, there are 3 cookie categories which the users can consent to:

  • cookie_cat_functional
  • cookie_cat_statistic
  • cookie_cat_marketing

These will also serve as an event name for the triggers.

Setting up triggers

  • Navigate to the main dashboard, click the Triggers section, and select New
  • Select CUSTOM EVENT trigger from the list
  • Fill in the required inputs:

Use one of the existing cookie categories listed above as the trigger's event name, e.g. "cookie_cat_statistic". The trigger itself, however, does not need to use the category name.

mceclip0.png
  • Repeat the steps above for all individual cookie categories to cover all the possible choices of the end-user.

The GTM SDK implementation starts with creating a set of custom triggers and custom JS variables. These triggers and variables will be assigned to your existing tags to block them from firing when the user first visits the site. The tags will be "un-locked" once the user submits the consent.

You only need 3 custom trigger, because the necessary category will always be fired. Creating a custom trigger for "Necessary" is not needed.

And you will also need 3 custom JS variables. That can be done by creating a new user-defined variable and the type must be set to Custom Javascript.

Change the cookie category accordingly for each of the cookie categories.

function() {
return window.CookieInformation.getConsentGivenFor('cookie_cat_marketing');
}

*Remember that a trigger's event name is a key-value, while the name of the trigger can be set according to your preferences and will not affect the trigger’s functionality.

When to use a Custom Event as a trigger

The custom triggers we have just created need to be assigned to your tags. If the triggers will not be assigned, they will have no effect on the tags.

For example, let's add the newly created trigger to a Facebook tag. Currently, the tag is fired on a pageview trigger. This means that the tag will be fired every time a page is loaded.

We need to change this so that the Facebook tag is only fired when the user has agreed to the marketing category. We will need to remove the Pageview trigger (marked with a red dot)

Next, we will add the marketing trigger we have created in the first step. Remember, we only need to add one custom event trigger, since we are replacing the pageView trigger. From the list of triggers, select the appropriate trigger for the tag. Facebook uses the information for marketing, so we will select the custom event marketing trigger (marked with the red dot)

Now the marketing trigger is assigned to the Facebook tag. The tag will not fire unless the user has agreed to the marketing category. And once the user has agreed to the category, the custom trigger will act the same way as the pageView trigger. Press "Save" and the Facebook tag is now controlled by the consent pop-up.

Additional information

  • A tag can be called using a number of triggers. If more than one trigger is added, Google Tag Manager will require at least one of them to fire to execute the tag. (OR Statment).
  • Additionally, you can set how many times a tag can be triggered per a client’s visit.
  • Remember to publish your changes or the tag will not work as expected.

When you can't use a custom event (Important!)

Some Tags can't take custom events as a trigger. eg. click elements or click links. Also, you can't have a trigger with more than one Custom Event on.

If the tag is fired by a custom event you will need to use a custom JS variable.

Use only one custom JS variable per tag.

multiple-event-in-one-trigger.jpg

This example will NOT WORK, because there are more than one custom event defined: eventNumber1 and cookie_cat_statistic

When to use a Custom JS variable as a trigger

For example, you would like to fire this Google Analytics tag if the user has consented to the "statistic" cookie category. Then we will need to modify the trigger that is associated with this tag. So you will click on the trigger (marked with the red dot).

Now you can see that the trigger will fire the GA tag if a user clicks on an element that contains "XYZ". Every time that these conditions are met, the trigger will fire the tag.

We need to add another condition so that the trigger fires if the element contains "XYZ" and the user has consented to the statistic category. To add the condition for the cookie category click on on the plus sign (marked with a red dot).

From the dropdown, you will need to select one of the custom JS variables you have created. Google Analytics is used for statistic purposes, so you will select the statistic JS custom variable (1). Then you will need to match the custom JS variable with an outcome. To do so, select "equals" in the second field (2). And the variable should equal to true to fire. Type "true" in the third field (3).

Once that is done, the click trigger will look like in the image below. Click "Save" to save the changes you have made.

Custom JS variables can then also be used in combination with trigger based on Custom Events.

multiple-event-in-one-trigger2.jpg

Common Mistakes:

  • Not having the pop-up script implemented before GTM.
    The pop-up script must be implemented in the source-code before the GTM-script
  • Having more than one trigger on the same tag.
    Eg. All Pages and a Custom Event. Only one of these triggers has to be true before the tag is fired. This means that the Custom event is rendered invalid.
  • Using Custom event instead of Custom Javascript.
    Tag Manager can not fire a tag based on more than one custom event. You must instead use Custom Javascript as your condition.
  • Having Type errors
    The data-layer is case-sensitive, so be aware to type categories correctly.

Piwik Pro Tag Manager

The Cookie Control SDK is enabled via the custom trigger, events, and tags functions in Piwik PRO Tag Manager (PPTM). Events are fired by our script injected on your website with all the logic necessary to handle banners and widgets, so there is no need to implement our solution in the source code.

By default, there are 3 basic cookie types:

  • cookie_cat_functional
  • cookie_cat_statistic
  • cookie_cat_marketing

Those will also serve as triggers and event names.

Disable Piwik PRO Consent Manager for the tag

Picture1.png

Make sure that every tag, in PPTM, that will require Cookie Information consent will be set as ‘Does Not Require Consent’

This may seem counterintuitive but this simply prevents the Piwik PRO Consent Manager from interfering with the Cookie Information consenting mechanisms.

Create a trigger for every cookie category

Inside of your Piwik PRO Analytics Suite, open the Tag Manager

Picture2.png

and go to the Triggers menu.

Picture3.png

Create a new trigger by pressing the +Create new trigger button on the bottom-left side of the screen.

Picture4.png

Name your trigger,

Picture5.png

select the Event type, and paste the cookie type name into the Data Layer Event Settings.

Picture6.png

Hit the save button

Picture7.png

And now repeat the process for every other type of Cookie Information cookies.

Attach the trigger to the tag

All that’s left to do now is to attach one of our new triggers to every tag that requires certain cookie consent. To do that, open the tag, scroll to the very bottom and click +Existing trigger To add a trigger

Picture8.png

Select the trigger from the list and hit the save button to finish the process.

Picture9.png

That’s it, you can enjoy consented tag firing from now on.

Tealium IQ

The Cookie Control SDK is enabled via the UDO Variable in Tealium - Tag Manager. The categories selected by the users are stored in the UDO data layer (utag_data). You then have to option of placing a LOAD RULE to check against these categories, so the tag does not fire until the user agrees to the selected category.

By default, there are 3 basic cookie types, which your users can consent to:

  • cookie_cat_functional
  • cookie_cat_statistic
  • cookie_cat_marketing

Configure the variable

Inside Tealium Tag Manager - Navigate to the section: DATA LAYER. Then click the button: + Add Variable

Fill out the fields as shown by the image below. The most important one being the Source-field. This is the same name provided in the UDO data-layer pushed from our backend.

  • Source: cookie_information_categories
  • Type: UDO Variable
  • Alias: OPTIONAL
  • Notes: OPTIONAL

Creating a simple LOAD RULE

Navigate to the section: LOAD RULES. The click the button: + Add Load Rule

In the first dropdown box, choose our added UDO variable (Cookie Information Categories). Set the condition to CONTAINS and put in one of the category strings mentioned above. I.e. cookie_cat_statistic.

Remember! You can combine this with other categories, checking for multiple categories in the same load rule, by combining more than one condition in with an AND statement.

Using the load rule on a TAG

In this example, we have added a Google Analytics tag and checked our new Load rule to use on this tag.

This tag will now ONLY get injected onto the website if the user gives consent to the cookie category: Statistic.

Turning off Tealium library

If you for some reason need to turn off the part of our library that contains the Tealium SDK, you can do so by placing the data-attribute: data-tealium-enabled="false" on the pop-up script (uc.js).

data-tealium-enabled="false"

Inline scripts

An inline is a script that runs, without the need for an external source. Our SDK for inline scripts makes use of a Javascript IF-statement. The statement checks if the user has given consent for a specific category. Once the user has given consent the script will run a-synchronically.

The 3 cookie categories included in the Cookie Control SDK that you need to consider:

  • cookie_cat_functional
  • cookie_cat_statistic
  • cookie_cat_marketing

Implementation

To block or allow cookie-setting script from running depending on the visitor’s decision, we have to place the Cookie Control SDK around the script itself as shown below. REMEMBER TO REPLACE THE COOKIE CATEGORY

<script> 
window.addEventListener('CookieInformationConsentGiven', function (event) {
if (CookieInformation.getConsentGivenFor('cookie_cat_category')) {

// Place cookie-setting script here.
// Or some other javascript function you want to fire on consent.

}
}, false);
</script>

Replace the category variable with one that is appropriate for the purpose needed, eg. cookie_cat_statistic

Example with Google Analytics set as a statistic

<script> 
window.addEventListener('CookieInformationConsentGiven', function (event) {
if (CookieInformation.getConsentGivenFor('cookie_cat_statistic')) {

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})
(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

}
}, false);
</script>

*What the statement does is that it calls out a javascript-function called: CookieInformation.getConsentGivenFor, which checks the user has given consent for cookie_cat_statistic.

External scripts

Sometimes a script is loaded from an external source. and here is how to deal with it. To block or allow external cookie-setting scripts we need to use two custom
attributes handled by js library:

  • data-consent-src which keeps the src of the script to be executed, and
  • data-category-consent which keeps the label of the category (i.e.:
    'cookie_cat_marketing').

Also, we need to leave the src attribute empty. So, we have to move the value from the 'src' attribute to 'data-consent-src'.

Original code

Example of an external script:

<script type="text/javascript" src="http://example.marketingscript.com"></script>

Using the Cookie Control SDK and setting the cookie_cat_category to marketing

<script type="text/javascript" src=""
data-consent-src="http://example.marketingscript.com"
data-category-consent="cookie_cat_marketing"></script>

Example scenarios

The visitor consent to marketing cookies:

  • visitor agrees on setting marketing type cookies (cookie_cat_marketing)
  • website loads
  • js library finds the script
  • js library fires script with src="http://example.marketingscript.com", because it has
    the data-category-consent attribute set to the category that is agreed on by the user
  • the request fires marketing cookies from this initiator can be set in the visitor's browser

The visitor doesn't want marketing cookies to be set in his/her browser:

  • visitor disagrees on setting marketing type cookies (cookie_cat_marketing)
  • website loads
  • js library finds the script
  • js library blocks request (http://example.marketingscript.com), because it has
    the data-category-consent attribute set to the category that he/her disagreed on
  • the request doesn't fire–marketing cookie from this initiator can't be set in visitor's browser

iFrame and pixels

Some cookies are set by a source implemented of a "Pixel tag" or Iframe. An example of this is Facebook-pixel which many businesses use. Pixel tags and iframes are handled by the js library in the same way as external scripts.

Implementation

We need to use two attributes data-consent-src and data-category-consent and set src to an empty string "":

Pixel-tracking

Original code:

<img src="https://example.marketing.com" />

Using the Cookie Control SDK and setting the cookie_cat_category to marketing

<img src="" data-consent-src="https://example.marketing.com" data-category-consent="cookie_cat_marketing" />

Iframes

Original code:

<iframe src="https://someiframe.statistics.com"></iframe>

Using the Cookie Control SDK and setting the cookie_cat_category to statistic

<iframe src="" data-consent-src="https://someiframe.statistics.com"data-category-consent="cookie_cat_statistic"></iframe>

Configuring external scripts, pixel trackers, and iframes are based on the same rules. They are just different HTML elements.

Setting other attributes in elements does not affect the way that the js library and the cookie control SDK work. So, for example, we can add "id", "class", etc to the element and it won't break.

<iframe id="someiframe" class="col-md-5 red-border" src=""
data-consent-src="https://someiframe.statistics.com"
data-category-consent="cookie_cat_statistic"></iframe>

The Cookie Control SDK only needs to have data-consent-src and data-category-consent set and have src set to an empty string "".

Serverside PHP

<?php

if(isset($_COOKIE["CookieInformationConsent"])){
$php_json = json_decode(preg_replace('/\s*:\s*([a-zA-Z0-9_]+?)([}\[,])/', ':"$1"$2', preg_replace('/([{\[,])\s*([a-zA-Z0-9_]+?):/', '$1"$2":', str_replace("'", '"',stripslashes($_COOKIE["CookieInformationConsent"])))));

$cookieInformationConsent = $php_json->consents_approved;

$functional = 'cookie_cat_functional';
$statistic = 'cookie_cat_statistic';
$marketing = 'cookie_cat_marketing';

if(in_array($functional,$cookieInformationConsent)){

echo '<p>Functional is enabled</p>';

}else{

echo '<p>Functional is disabled</p>';

}
if(in_array($statistic,$cookieInformationConsent)){

echo '<p>Statistic is enabled</p>';

}else{

echo '<p>Statistic is disabled</p>';

}
if(in_array($marketing,$cookieInformationConsent)){

echo '<p>Marketing is enabled</p>';

}else{

echo '<p>Marketing is disabled</p>';

}
}

?>

Did this answer your question?