How to Detect if AdBlocker is Enabled Using JavaScript and jQuery?

If you have a blog or website and you are living off of the money you make from the website you probably want to know if users are using ad blockers. When you detect it you can for example either use the space where the ads are to display content, you can show other content, display affiliate links, or many other things.

In this quick tutorial you learn how you can detect if a user has installed an ad blocker like AdBlock, AdBlock Plus, UBlock Origin, AdGuard, Ghostery, or any other using JavaScript and jQuery.

Check out the final outcome here.

How do Ad Blockers Work?

In general ad blockers are maintaining a big blacklist. If your website is trying to load ads from one of the blacklisted domains, the adblocker will not allow the browser to load it.

You can look at easylist.to which was designed for AdBlock. They have a huge blacklist. Some example domains on the blacklist are

ads-twitter.com
googlesyndicatiion.com

How to Detect Ad Blockers?

We can use the way ad blockers work in oder to detect if they are enabled. Therefore we will try to load a blocked URL. If we are able to load it, the user does not have an adblocker enabled. If you are not able to load it the user has an adblocker installed. Then we can take measures to handle the situation.

The whole code looks as follows:

<!doctype html>
<html lang="en">
<head>
  <title>Detect AdBlocker by SmartLazyCoding.com</title>
</head>
<body>
  <!-- Page Content -->
  <div id="result" style="font-size:40px">
    loading...
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
  $( document ).ready(function() {
    console.log('document loaded');

    function areAdsBlocked(callback) {
      var URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';

      fetch(URL, {
        method: 'HEAD', 
        mode: 'no-cors'
      })
      .then(response => callback(false)) //Response was received --> ads are NOT blocked
      .catch(error => callback(true));   //No response           --> ads are blocked
    }

    function checkAdBlocker() {
      areAdsBlocked(function(isBlocked){
        if(isBlocked){
          $('#result').text('Ads are blocked');
          $('#result').css('background-color', 'red');

          // TODO: Add code here which handles if visitors block ads!
        } else {
          $('#result').text('Ads are NOT blocked');
          $('#result').css('background-color', 'green');
        }
      })
    }

    checkAdBlocker();
  });
  </script>
</body>
</html>

The code is pretty simple. We try to load the URL https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js using the JavaScript fetch() method. We are using the HTTP HEAD method which only returns the headers of the URL and not the data/content. This is enough for us to check if we can reach the URL.

Furthermore we need to disable CORS (Cross-Origin Resource Sharing). CORS is a mechanism that allows you to restrict access to resources on your domain from requests by other websites. In our case it can be disabled by setting the mode no-cors.  This allows us to reach the above URL from our website (if no ad block is installed). If we would not disable CORS, we would see the following error message in the browser:

CORS Error Access-Control-Allow-Origin

If we were able to reach the URL, we will return the callback value callback(false) otherwise we will return callback(false). After that, we set the text and color of #result to the outcome. You can add your code, which handles the situation if a visitor blocks ads.

I hope you liked this tutorial. Leave a comment if you have any questions.