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_marketing" > </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 the 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>');
For this example, you can also use placeholders for blocked elements such as YouTube videos to provide a better user experience.
What if I don't use inline or external scripts?
If you are using a tag management system to set scripts and other tracking tags rather than using inline or external scripts you should check out our Blocking content section. We have great implementation guides for Piwik Pro, Google Tag Manager and Tealium.
You could be also using tracking Pixels, iFrame or serverside PHP that also need to be held back before user consent is collected.
It is most common to use, for example, Google Tag Manager for some tracking tags but set others using inline scripts. If you don't know where the service is initiated you can check with our advanced compliance dashboard where we indicate the initiator source for you.
Related articles: