How to block third-party cookies

In today world almost every website uses some kind of third-party services like Google Analytics, Facebook like buttons or any other third-party service provider. In this case those service providers might set a third-party cookie to track your visitors.

In other words, third-party cookies are cookies that are set by a website other than the one you are currently on. You can also read our detailed explanation about how third-party cookies work.

If you want your website to comply with the latest regulations, you might want to block those third-party cookies unless user specifically agreed to use them. This article explains how that can be done using Cookie-Script as a cookie compliance solution.

Blocking third-party cookies set with JavaScript

To block third-party cookies, find a JavaScript code that is setting third-party cookies and:

• change type attribute from text/javascript to text/plain (if type attribute missing, just add it)
• add data-cookiescript attribute and set it to accepted
• if you have scaned your website cookies and have category checkboxes in cookie consent popup, add data-cookiecategory attribute. Below is a list of available values for this attribute. If you don't have cookie category choices, you can skip adding this attribute.

data-cookiecategoryattribute should have a value of cookie category that this third-party JavaScript is assigned to. This means that whole third-party service cookies should be assigned to one of the following categories (which is usually the case). Possible category values are: 

• Strictly Necessary cookies: strict
• Functionality cookies:  functionality
• Marketing cookies: targeting
• Performance cookies: performance
• Unclassified cookies: unclassified

All JavaScript with such attribute changes will only execute if user agreed with Cookie Policy.

Example of standard Google Analytics code

Change code from:

<script type="text/javascript">
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Change code to:

<script type="text/plain" data-cookiescript="accepted" data-cookiecategory="targeting">
(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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Example of included JavaScript file

Change code from:

<script src="/js/myscript.js"></script>

Change code to:

<script type="text/plain" data-cookiescript="accepted" data-cookiecategory="functionality" src="/js/myscript.js"></script>

Blocking third-party cookies set with iframe

To block third-party cookies set with iframe (like YouTube videos), find an iframe code that is setting third-party cookies and:

• change src attribute name to data-src
• add data-cookiescript attribute and set it to accepted
• if you have scaned your website cookies and have category checkboxes in cookie consent popup, add data-cookiecategory attribute. Use same list of categories as described in previous section of this article. If you don't have cookie category choices, you can skip adding this attribute.

All iframes with such attribute changes will only show up if user agreed with Cookie Policy.

Example of standard YouTube video iframe

Change code from:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxx" frameborder="0" allowfullscreen></iframe>

Change code to:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" alt="" data-cookiecategory="functionality" frameborder="0" allowfullscreen></iframe>

You can also add a text explaining user that he must accept cookie policy in order to see the video. Use alt attribute for that:

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" alt="Please accept cookie policy first" frameborder="0" allowfullscreen></iframe>

Or you can add an image/YouTube thumbnail while YouTube video is blocked until user accepts cookie policy.

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" alt="<img src='https://img.youtube.com/vi/xxxxxxxxx/maxresdefault.jpg'>" frameborder="0" allowfullscreen></iframe>

Blocking embed / object / link third-party cookies

In the same manner you can block embed / object / link elements from setting third-party cookies

Example of embed element

Change code from:

<embed src="somefile.swf">

Change code to:

<embed data-src="somefile.swf" data-cookiescript="accepted" data-cookiecategory="functionality">

Example of object element

Change code from:

<object src="somefile.swf"></object>

Change code to:

<object data-src="somefile.swf" data-cookiescript="accepted" data-cookiecategory="functionality"></object>

Example of link element

Change code from:

<link href="http://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet" type="text/css">

Change code to:

<link data-href="http://fonts.googleapis.com/css?family=Roboto:100" data-cookiescript="accepted" data-cookiecategory="functionality" rel="stylesheet" type="text/css">

Example of image element

Change code from:

<img src="http://example.com/image.jpg" />

Change code to:

<img data-src="http://example.com/image.jpg" data-cookiescript="accepted" data-cookiecategory="functionality"/>