How to detect AdBlockers using JavaScript [Simple Examples]

# Table of Contents

# How to detect AdBlockers using JavaScript

To detect AdBlockers using JavaScript:

Create a file called ads-prebid-wp-banners.js containing the following line.

ads-prebid-wp-banners.js

Copied!
window.runningAdsAllowed = true;

The idea behind the name of the file is that Ad Blockers usually block the words "ads", "prebid", "wp-banners".

In your script, you just have to check if the window.runningAdsAllowed variable is set.

Here is an example HTML file that has a script tag that does that.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>

    <!-- 👇️ load the ads-prebid-wp-banners.js file here 👇️ -->
    <script src="./ads-prebid-wp-banners.js"></script>
  </head>

  <body>
    <h2>bobbyhadz.com | Home</h2>

    <h2 id="adblock-message"></h2>

    <script>
      // 👇️ if this runs, the user has an Ad Blocker active
      if (window.runningAdsAllowed === undefined) {
        console.log('Detected Ad content Blocker');

        const h2 = document.getElementById('adblock-message');

        h2.innerHTML = 'Disable your ad block to support us';
      }
    </script>
  </body>
</html>

The code for this article is available on GitHub

Notice that we loaded the ads-prebid-wp-banners.js script in the head tag.

index.html

Copied!
<head>
  <!-- 👇️ load the ads-prebid-wp-banners.js file here 👇️ -->
  <script src="./ads-prebid-wp-banners.js"></script>
</head>

Then we can check if the window.runningAdsAllowed variable is set.

index.html

Copied!
<script>
  // 👇️ if this runs, the user has an Ad Blocker active
  if (window.runningAdsAllowed === undefined) {
    console.log('Detected Ad content Blocker');

    const h2 = document.getElementById('adblock-message');

    h2.innerHTML = 'Disable your ad block to support us';
  }
</script>

If the variable is undefined, then the user has an Ad Content Blocker.

Otherwise, they don't.

This is what the Home page looks like if the user has an Ad Blocker.

content of home page

Open the developer tools on the page by pressing F12 and then click on the Console tab.

You will see that the ads-prebid-wp-banners.js file is blocked by the Ad Blocker.

ad blocker blocks script

Ad Blockers block the script based on its name, therefore the following line isn't run.

ads-prebid-wp-banners.js

Copied!
window.runningAdsAllowed = true;

If the line doesn't run, the window.runningAdsAllowed variable will be undefined and the following condition is met.

index.js

Copied!
if (window.runningAdsAllowed === undefined) {
  console.log('Detected Ad content Blocker');

  const h2 = document.getElementById('adblock-message');

  h2.innerHTML = 'Disable your ad block to support us';
}

The code for this article is available on GitHub

If the user accesses the page without an Ad Blocker active, no message is shown as the ads-prebid-wp-banners.js script is loaded.

page accessed without adblock

However, this approach doesn't detect the Privacy Badger extension.

If you also need to detect the extension, use the approach from the next subheading.

# How to detect AdBlockers and Privacy Badger in JavaScript using fetch()

You can also use the fetch() method to detect AdBlockers in JavaScript.

To be on the safe side, combine the solution from the previous subheading with the following solution.

Here is the HTML code for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <script src="./ads-prebid-wp-banners.js"></script>
  </head>

  <body>
    <h2>bobbyhadz.com | Home</h2>

    <h2 id="adblock-message"></h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
async function detectAdBlockUsingFetch() {
  let adBlockEnabled = false;

  const googleAdsURL =
    'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';

  try {
    await fetch(new Request(googleAdsURL)).catch(_ => {
      adBlockEnabled = true;
    });
  } catch (err) {
    adBlockEnabled = true;
  } finally {
    console.log(`AdBlock enabled: ${adBlockEnabled}`);

    if (adBlockEnabled) {
      // The user has an Ad Block enabled

      const h2 = document.getElementById('adblock-message');

      h2.innerHTML = 'Disable your ad block to support us';
    }
  }
}

detectAdBlockUsingFetch();

// --------------------------------------------------

function detectAdBlockUsingGlobalVariable() {
  if (window.runningAdsAllowed === undefined) {
    console.log('Detected Ad content Blocker');

    const h2 = document.getElementById('adblock-message');

    h2.innerHTML = 'Disable your ad block to support us';
  }
}

detectAdBlockUsingGlobalVariable();

The code for this article is available on GitHub

We used the fetch() method to make an HTTP request to a Google script that the Ad Blockers target.

If an error is raised, we use the .catch() method to handle the error and set the adBlockEnabled variable to true.

index.js

Copied!
await fetch(new Request(googleAdsURL)).catch(_ => {
  adBlockEnabled = true;
});

If another error occurs, the catch() method is run where we also set the adBlockEnabled variable to true.

index.js

Copied!
catch (err) {
  adBlockEnabled = true;
}

The finally block runs regardless if an error occurred or not.

index.js

Copied!
finally {
  console.log(`AdBlock enabled: ${adBlockEnabled}`);

  if (adBlockEnabled) {
    // The user has an Ad Block enabled

    const h2 = document.getElementById('adblock-message');

    h2.innerHTML = 'Disable your ad block to support us';
  }
}

The code for this article is available on GitHub

We simply check for the value of the adBlockEnabled variable.

If the variable is set to true, then the user has an Ad Blocker enabled.

user has ad blocker enabled

This approach also detects the Privacy Badger extension.

works even for privacy badger extension

If the user doesn't have an Ad Blocker enabled or the Privacy Badger extension, no message is shown.

# How to detect Ad Blockers and Privacy Badger with a script tag

You can also manually add a script tag that loads the Google ads page that is blocked by Ad Blockers.

Here is the updated HTML code.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      async
      id="ads-by-google"
      src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    ></script>
  </head>

  <body>
    <h2>bobbyhadz.com | Home</h2>

    <h2 id="adblock-message"></h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the updated JavaScript code.

index.js

Copied!
function detectAdBlockUsingGlobalVariable() {
  if (window.runningAdsAllowed === undefined) {
    console.log('Detected Ad content Blocker');

    const h2 = document.getElementById('adblock-message');

    h2.innerHTML = 'Disable your ad block to support us';
  }
}

detectAdBlockUsingGlobalVariable();

// -------------------------------------------------------------

const scriptElement = document.getElementById('ads-by-google');

scriptElement.addEventListener('error', adBlockEnabledFunction);

function adBlockEnabledFunction() {
  // The user has an Ad Block enabled
  console.log('adBlockEnabledFunction runs...');

  const h2 = document.getElementById('adblock-message');

  h2.innerHTML = 'Disable your ad block to support us';
}

We added the following script tag in the head section of the index.html file.

index.html

Copied!
<head>
  <script
    async
    id="ads-by-google"
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  ></script>
</head>

The next step is to add an error event listener to the script tag.

The error event is triggered when the script fails to load (e.g. because it was blocked by an AdBlocker).

index.js

Copied!
const scriptElement = document.getElementById('ads-by-google');

scriptElement.addEventListener('error', adBlockEnabledFunction);

function adBlockEnabledFunction() {
  // The user has an Ad Block enabled
  console.log('adBlockEnabledFunction runs...');

  const h2 = document.getElementById('adblock-message');

  h2.innerHTML = 'Disable your ad block to support us';
}

The code for this article is available on GitHub

If the script fails to load, the user has an Ad Blocker enabled or Google's servers are down (unlikely).

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to detect AdBlockers using JavaScript [Simple Examples]

# Table of Contents