Detect Adblock - Ad blocker detection, made simple

Step 1 - Understand how ad blockers work

Ad blockers use filter lists to decide which requests to block. When a page tries to load a script or image from an advertising server, the blocker can prevent it from loading. Blockers on a home or office network work similarly, but apply to every connected device.

We can use this behavior to detect ad blocking by checking whether advertising resources load successfully.

View a popular filter list - EasyList

Step 2 - Add the detection script

The following script makes two small requests to Google's advertising servers and checks whether they succeed. These checks don't display ads; they test whether the browser can reach the resources. Add the JavaScript to your website's HTML just above the closing </body> tag.

<script>

function detectAdblock(callback){

  var waiting = 2;
  var answered = false;

  function result(blocked){
    waiting--;
    if(!answered && (blocked || waiting === 0)){
      answered = true;
      callback(blocked);
    }
  }

  // Test 1: an image from Google's advertising servers. A blocker
  // may refuse it or replace it with a 1 pixel stand-in.
  var image = new Image();
  image.referrerPolicy = 'no-referrer';
  image.onload = function(){ result(image.width < 2); };
  image.onerror = function(){ result(true); };
  image.src = 'https://googleads.g.doubleclick.net/favicon.ico?' + Date.now();

  // Test 2: a fetch request to another advertising resource.
  fetch('https://pagead2.googlesyndication.com/pagead/show_ads.js', {
    method: 'HEAD',
    mode: 'no-cors',
    cache: 'no-store',
    credentials: 'omit',
    referrerPolicy: 'no-referrer'
  }).then(function(){ result(false); }, function(){ result(true); });

  // No answer after 3 seconds means no blocking was detected.
  setTimeout(function(){
    if(!answered){
      answered = true;
      callback(false);
    }
  }, 3000);
}

</script>

The script uses both an image and a fetch request because ad blockers can handle them differently. Some block a request entirely, while others replace the resource with a small placeholder.

If your site uses a Content Security Policy, allow the image URL in img-src and the fetch URL in connect-src. Otherwise, the policy may block the test requests.

Step 3 - Run the ad blocking test

Call detectAdblock() after the script above. Your callback receives true when blocking is detected, or false otherwise, including if the checks time out after three seconds. The example below displays the result in an alert.

<script>

detectAdblock(function(blocking){
  alert('Blocking Ads: ' + (blocking ? 'Yes' : 'No'));
});

</script>
</body>

Example 1 - Track ad blocking in Google Analytics 4 (GA4)

If your site uses Google Analytics 4 with gtag(), this example sends a blocking_ads event. The event_label parameter records whether ad blocking was detected.

<script>

detectAdblock(function(blocking){
  if(typeof gtag === 'function'){
    gtag('event', 'blocking_ads', { 'event_category': 'Blocking Ads', 'event_label': blocking ? 'Yes' : 'No', 'non_interaction': true });
  }
});

</script>
</body>

A failed connection can look like ad blocking, so use these results as an estimate when collecting statistics.

Example 2 - Send ad blocking data to your server

To store the results in your own database, send them to a server endpoint using a POST request. Replace the example URL with your own endpoint, which will need to receive and save the blockingAds value.

<script>

detectAdblock(function(blocking){
  fetch('https://www.domain.com/api/data/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: 'blockingAds=' + (blocking ? 'Yes' : 'No')
  });
});

</script>
</body>

Example 3 - Ask visitors to allow ads

You can use the result to display a friendly message asking visitors to allow ads on your site. The message starts hidden and is shown only when the test detects blocking.

<style>
#dClkDxKQRvSO {
display: none;
margin-bottom: 30px;
padding: 20px 10px;
background: #D30000;
text-align: center;
font-weight: bold;
color: #fff;
border-radius: 5px;
}
</style>

<div id="dClkDxKQRvSO">
  Please support this website by allowing ads.
</div>

<script>

detectAdblock(function(blocking){
  if(blocking){
    document.getElementById('dClkDxKQRvSO').style.display='block';
  }
});

</script>
</body>

This is what the message looks like:

Please support this website by allowing ads.

Ad blocker detection, made simple