If your website uses cookies for things like analytics, ads or social media features, you need to ask users for consent first. In Cookie Information, we give you two methods to let you block third-party cookies with a so-called third-party cookie blocking script.
In this article, we’ll show you how to use a specific script to block third-party cookies on your website.
Before you start
Here are a few things to know before you start:
If your website uses cookies for things like analytics, ads or social media features, you need to ask users for consent first. Under the GDPR and the ePrivacy Directive, you must get clear and informed consent before setting any non-essential cookies. That means:
Consent must be freely given, specific, and unambiguous.
Users need to know exactly what types of cookies you use, why you use them, and who you share data with before any cookies are set.
You can’t run scripts that create third-party cookies, for instance, like Meta Pixel, until you've got consent.
To stay compliant, make sure non-essential cookies only load after the user has accepted them.
Before the user gives consent in the popup, the script won’t run, and none of its functions will fire. It will fire once the user gives consent.
The consent solution includes four cookie categories based on their purpose. Users can give consent to functional, statistical, marketing cookies and necessary.
The third-party cookie blocking script includes these cookie categories to consider:cookie_cat_functional
cookie_cat_statistic
cookie_cat_marketing
You don’t adjust the consent category for necessary cookies as they’re required for the website to function and deliver the basic services requested by the user.
Block third-party cookies using a script (method 1)
Use this method inline when you want to control and run cookie-setting code directly on your site.
1. Wrap your cookie-setting script using our third-party cookie-blocking script:
<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>
2. Replace the cookie_cat_category variable with the appropriate consent category, e.g., cookie_cat_marketing.
3. Add the script directly to your webpage so it runs without needing to load any external resources.
Note: In this method, our third-party cookie-blocking script utilizes a JavaScript if statement to verify whether the user has provided consent for a specific category.
4. Once consent is given, the script runs asynchronously, ensuring compliance with privacy regulations.
5. Done.
An example of the Meta (Facebook) Pixel categorized 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>
Note: This statement calls a JavaScript function called: CookieInformation.getConsentGivenFor, which checks if the user has consented to cookie_cat_marketing.
Block third-party cookies using a script (method 2)
Use this method if you're loading a third-party tool from another website, such as Google Analytics or Hotjar.
Follow the steps:
1. Find the external script in your website or application's code. For example, Google Analytics uses this: <script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>
2. Use the custom attribute data-consent-src to store the script's src URL.
3. Use the custom attribute data-category-consent to define the consent category label e.g., 'cookie_cat_marketing.'
Note: A JavaScript library will handle these attributes to determine whether the script should be loaded, depending on the user's consent preferences.
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 third-party cookie blocking script 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>
Block more than one cookie category using a third-party cookie blocking script
If you need to block more than one category, it’s better to use the first method as it checks for multiple types of consent before running the script.
For example, a YouTube video embed might set two types of cookies:
One cookie is set in the statistics category
Another is set in the marketing category
To block the script unless the user agrees to both, use this logic:
if (CookieInformation.getConsentGivenFor('cookie_cat_statistic') && CookieInformation.getConsentGivenFor('cookie_cat_marketing')) {
// Insert your code here
}Note: To embed a YouTube video based on consent, you need to use an if statement. This checks if the user has accepted both statistics and marketing cookies.
The complete code should look like this:
if (CookieInformation.getConsentGivenFor('cookie_cat_statistic') && CookieInformation.getConsentGivenFor('cookie_cat_marketing')) {
const iframe = document.createElement("iframe");
iframe.width = "560";
iframe.height = "315";
iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
iframe.src = "https://www.youtube.com/embed/n9MCuT6gDbU";
iframe.style.border = "none";
document.body.appendChild(iframe);
}Optional: Use placeholders for blocked elements, such as YouTube videos, to provide a better user experience.