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 sets 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 to 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 the 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>
An 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 consents 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 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 they disagreed on
the request doesn't fire–the marketing cookie from this initiator can't be set in the 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.
Removing cookies upon change of consent
In some European countries, it is required by law that the cookies be removed when a user has changed their consent.
For example, if a user initially accepts all the cookies on the website and then changes their mind, only accepting Necessary cookies, all other cookies should be removed from the browser.
To enable this, we have extended our SDK to include logic which will aid in the removal of these cookies.
Like above, you would change the cookie_cat_category variable to one that is appropriate for the required purpose, e.g. cookie_cat_marketing and then insert your cookie-setting script into the first part of the script.
In the second half of the script, you will insert the logic for removing the cookie once consent has been changed.
This part depends on the implementation of the setup or technology used. If you have questions about what logic to place here, we recommend getting in touch with the publisher's support team who should be able to assist you.
<script>
window.addEventListener('CookieInformationConsentGiven', function(event) {
if (CookieInformation.getConsentGivenFor('cookie_cat_category')) {
// Place cookie-setting script here.
// Here is the logic that will set cookie (first party or third party)
} else {
// There is no consent for this category or it was declined by visitor.
// Place logic for removing cookie.
// Implementation in this else block depends on the setup, technologies, etc. used by publisher.
}
}, false);
</script>
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 which 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: