Blocking JavaScript third-party cookies manually
Updated over a week ago

Blocking cookies before users provide consent is an important part of remaining compliant with data privacy laws. This includes blocking third-party cookies, which may come from Google Analytics, Facebook Pixel, LinkedIn, AdWords, and more.

To automatically detect detect, categorize, and block third-party tracking mechanisms, use Termly's Auto Blocker. Following the manual blocking steps on this page will override Auto Blocker's behavior.

For third-party code deployed via Google Tag Manager (GTM), follow the steps on this page.

Manually blocking these cookies requires you to disable the JavaScript function of third-party libraries. This can be accomplished by changing type attributes and adding data-categories attributes. This will prevent the scripts from automatically running when users enter the webpage. It will also allow Termly’s script to find and unblock cookies when users give consent to specific categories.

How to manually block third-party cookies

To begin, find your JavaScript code that is setting third-party cookies. Then, complete the following:

  • Change the type attribute from text/javascript to text/plain (if the type attribute is missing, add it)

  • Add data-categories attribute and set it to a corresponding category from the list of cookie categories (essential, performance, analytics, advertising, social networking, unclassified)

    • You can categorize cookies by referring to each service's website or terms of use

    • You can also find a cookie’s category from your Termly cookie scan report, which you can find on your dashboard

JavaScript code that follows the attribute convention described above will now respond to visitor consents in real time, without needing to refresh your page.

You’ll be finished blocking third-party cookies after you’ve completed these steps for all third-party code on your page.

See below for examples of these changes across different scripts. Changes are bolded in all examples.

Script example

See the example below for how to categorize a given script as 'analytics':

Original script:

<script type="text/javascript">
<!-- // Script logic here //-->
</script>

Changes to this:

<script type="text/plain" data-categories="analytics">
<!-- // Script logic here //-->
</script>

JavaScript example

Original script (no attribute type selected):

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

Changes to this:

<script type="text/plain" data-categories="social_networking" src="/js/sample.js"></script>

Manually block third-party cookies with iframe / embed / object / link

Blocking third-party cookies set with iframe / embed / object / link (like YouTube videos) requires these slightly different steps:

  • Find any iframe / embed / object / link code that is setting third-party cookies and change src / href attribute name to data-src / data-href.

  • Add data-categories attribute and set it to a corresponding category from the list of cookie categories (essential, performance, analytics, advertising, social networking, unclassified)

See below for examples of these changes across different codes.

Embedded YouTube video example

Original code:

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

Changes to this:

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

Embed element example

Original code:

<embed src="sample.swf">

Changes to this:

<embed data-src="sample.swf" data-categories="advertising" >

Object element example

Original code:

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

Changes to this:

<object data-src="sample.swf" data-categories="advertising" ></object>

Link element example

Original code:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

Changes to this:

<link data-href="https://fonts.googleapis.com/css?family=Open+Sans" data-categories="performance" rel="stylesheet" type="text/css">

Image element example

Original code:

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

Changes to this:

<img data-src="http://sample.com/sample.jpg" data-categories="analytics" />
Did this answer your question?