How do I block third-party scripts on my website?

What are third-party scripts?

Third-party scripts are commonly JavaScript code used to add features to a website, such as tracking analytics, displaying ads, or providing social media integration.

To include third-party JavaScript on a website, a script tag is placed in the HTML code. The browser will then load and execute the script when the webpage is loaded.

Good example of third-party scripts are Google Analytics, Google Ads, Meta pixel, Bing tracking tool and so on.

Why should I block third-party scripts?

There are a couple of reasons you should be asking for explicit consent (if required by regulation) before placing third-party script tags on your website. The two main ones are:

Third-party scripts may collect and share user data with third parties.
Third-party scripts may use third-party cookies. Third-party cookies (A.K.A. those that are stored under a domain that is not yours) cannot be reached/blocked by a Consent Management solution placed on your website.

So once the third-party script loaded on your website, these two mechanisms might kick in and you just breached a Data Privacy Regulation like GDPR.

So, how do I block third-party scripts?

Fortunately, the BigID Consent Management tool is already integrated with Google Consent Mode V2 and Facebook Consent, which means you only need to tweak a bit the way you setup those tags. Learn more at:

But what if you use other third-party scripts apart from Google and Facebook ones? Don't worry, we got you covered.

Blocking third-party scripts with Google Tag Manager

Follow the steps in the Implementing Basic Google Consent Mode section to configure any third-party tag you need to block. For example, if you want to block Hotjar, you should end up with something that looks like this:

Blocking third-party scripts with Adobe Launch

First, install Adobe Client Data Layer. The banner will fire the following custom events whenever the user sets a new privacy choice (granting or denying the consent):

bigidcmp_consent_marketing
bigidcmp_consent_statistics
bigidcmp_consent_preferences
bigidcmp_consent_opt_in
bigidcmp_consent_update: this is a general consent signal sent once per update submitted by the user.

Each event except for bigidcmp_consent_update will carry a “value” property of type boolean signaling the user’s choice. True means granted, false means denied. You can hook any tag when you see any of these events with a positive value (true).

Blocking third-party scripts with vainilla Javascript

Similarly to GTM and Adobe Launch, the banner will fire the following custom events you can catch with Javascript whenever the user sets a new privacy choice (granting or denying the consent):

bigidcmp_consent_necessary
bigidcmp_consent_marketing
bigidcmp_consent_statistics
bigidcmp_consent_preferences
bigidcmp_consent_opt_in
bigidcmp_consent_update: the difference with bigidcmp:consent_set is that the latter carries also the consent state, while the former is only a stateless signal.

Here’s a code example showing how you can enable third-party script tags after the consent for Marketing tools is given:

window.addEventListener(
  'bigidcmp_consent_marketing',
  () => {
    const id = 'marketing-tool';
    const isPresentAlready = !!document.getElementById(id);
    if (!isPresentAlready) {
      const script = document.createElement('script');
      script.setAttribute('id', id);
      script.setAttribute('src', 'http://example.com/marketing-tool.js');
      document.head.appendChild(script);
    }
    // here you can append more marketing tools you might want to add
  }
);

The same you can do for other categories.

Advanced Configuration

The banner also provides a list of Vendors in each category and therefore, the user might accept one of them and reject the others. So, how you can make sure a particular vendor was accepted before firing its tool? You can listen to the whole Consent event and check its internal values. Here’s an example:

const addScript = (id, src) => {
  const isPresentAlready = !!document.getElementById(id);
  if (!isPresentAlready) {
    const script = document.createElement('script');
    script.setAttribute('id', id);
    script.setAttribute('src', src);
    document.head.appendChild(script);
  }
};

window.addEventListener(
  'bigidcmp:consent_set',
  (event) => {
    const consent = event.detail;

    // how to check the entire category
    if (consent.marketing.value) {
      addScript('marketing-tool', 'http://example.com/marketing-tool.js');
    }
    
    // how to check a specific vendor/service inside a category
    const targetService = 'Google' // exact same name as it is shown in the banner.
    const consentGranted = consent.marketing.services.some((v) => v.id === targetService && v.value);
    // consent is granted when the `value` for a specific service is true
    if (consentGranted) {
      addScript('google-tool', 'http://example.com/google-tool.js');
    }
  }
);

You’re all set!

Now none of your third-party scripts will be present on your website until the user gives the proper consent. Remember that if a user visits your website a second time, the scripts will be added on page load following user's previous choices.