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 scanned your website cookies, 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.

If all cookies from a third-party script are assigned to a certain category, you should include that category in data-cookiecategory as the attribute of the script.

data-cookiecategory the attribute should have a value of the 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 the user agrees with the Cookie Policy.

It is now possible to assign a third-party script to several categories, this is helpful if the third-party script sets cookies from several categories and the user has to agree to all cookie categories that are set by the script.

To use multiple categories, list them all separated by space. In this case, a third-party script will be included if the user agrees to all categories listed in the data-cookiecategory attribute:

JavaScript will be executed when the user clicks the I agree button or saves his cookie category choices without page refresh.

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 an 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 scanned your website cookies and have category checkboxes in Cookie Consent popup, add data-cookiecategory attribute. Use the same list of categories as described in the 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 the user agreed with Cookie Policy.

Iframe will be updated when the user clicks the "I agree" button, without page refresh.

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 to the user that he must accept the Cookie Policy 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 the YouTube video is blocked until the user accepts the cookie policy.

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-cookiescript="accepted" data-alt-img="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 the 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 the 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 the 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 the 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"/>

Want to show an image with a message before the real photo or video appears? You can! Just use a custom placeholder image. For example, your designer could create something that says: "To view this content, please accept cookies." It looks cleaner and feels more user-friendly than plain text.

Here’s how you can set it up:

<img
  data-src="assets/img/hero-img.png"
  data-cookiescript="accepted"
  data-cookiecategory="functionality"
  src="assets/img/cookies.jpg"
/>

What’s happening here:

The src is the image that shows before the user gives consent — your placeholder with the message.
The data-src is the actual image that will load after the user accepts cookies (like for the "functionality" category).

This setup gives your visitors a clear, friendly prompt — and once they accept, the real image loads automatically without refreshing the page.

Blocking third-party cookies set with JavaScript