Introduction

According to GDPR and ePrivacy regulations, website owners must respect the user's choice regarding cookie tracking. A user must give consent before your website setting unnecessary cookies. To use cookie tracking, users have to give their consent first.

This rule dictates that the website owner needs to control when a cookie-setting script is being executed. Cookie Information provides you with a software development kit (SDK) to help with that task.

Below you can find instructions on implementing the cookie control SDK for inline and external cookie-setting scripts.

How does it work?

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

Once the user consents, the script will execute.

There are many ways to implement a script onto the website, e.g. inline, external scripts, through an iframe or a Tag Manager. The following guide describes how to implement cookie control SDK on inline and external scripts. For an iframe or Tag Manager implementation guide, check out our advanced settings section.

Cookie categories

The consent solution provides you with four cookie categories that represent the purpose of the cookies. Your users can give their consent: necessary, functional, statistic, and marketing.

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

  • cookie_cat_functional

  • cookie_cat_statistic

  • cookie_cat_marketing

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.

To block or allow cookie-setting script from running depending on the visitor's decision, we have to place the SDK around the cookie setting script itself, as shown below.

Remember to replace the cookie_cat_category variable with one that is appropriate for the purpose needed, e.g. cookie_cat_marketing

<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>

Example with Facebook Pixel set as marketing.

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

! function(f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function() {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');

}
}, false);
</script>

This statement calls out a javascript function called: CookieInformation.getConsentGivenFor, which checks if the user has consented to cookie_cat_marketing.

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, 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'.

Example of an external script:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID">
</script>
<script >
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_ID');
</script>

Using the Cookie Control SDK and setting the cookie_cat_category to marketing:

<script async src = ""
data-consent-src = "https://www.googletagmanager.com/gtag/js?id=GA_ID"
data-category-consent = "cookie_cat_statistic" > </script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_ID');
</script>

Below we are listing some case scenarios as examples to showcase the logic behind the Cookie Control SDK.

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 is set to the category that the user agrees on

  • 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 their 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

Blocking more than one category

In some cases, a script will set Cookies that fall into more than one category. A YouTube video embed can set one cookie in statistics and one in marketing. If you wish to block a script in more than one category, you can use the same logic behind blocking inline scripts.

The code below checks for both statistics and marketing to be true before the script can fire.

if (CookieInformation.getConsentGivenFor('cookie_cat_statistic') && CookieInformation.getConsentGivenFor('cookie_cat_marketing')) {

// Insert your code here

}

To use Youtube Embed inside this IF STATEMENT

document.write('<iframe width="560" height="315" src="https://www.youtube.com/embed/n9MCuT6gDbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
Did this answer your question?