How to Reliably Check if Adblocker is Enabled

Adblocker extensions and programs have become a default tool for enhancing the browsing experience. They block most — even if not all — ads from displaying on every corner and hurting the user experience.

However, there’s another side to the coin. Adblockers can hurt publishers who are undistruptively trying to place ads on their site to be able to maintain and cover the costs of their page, with the income from advertisements.

While there is no silver bullet (just like adblockers can’t block every single type of ad), there are some reliable clever techniques you can use to detect the presence of an ad blocker and try to persuade the visitor to disable it.

For this tutorial, I will go with using Google Adsense as an example, but other ad publishing networks may work with this solution just as well. Let’s see the solutions.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

How to Detect an Adblocker

In order to detect an ad blocker, we need to know how they work. They either block the request for ad services, or hide the displayed ad on your page, or both. For example, if you open a page with Google Adsense installed, and you have an ad blocker enabled, you will see the following error inside your console:

This means you can use this error in JavaScript to see if an adblocker blocks the request. Where you load the resource file for the ad network, add an onerror attribute, with the following value:

<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="document.dispatchEvent(new CustomEvent('adBlocked'));"></script>

This will fire a custom DOM event with the name of adBlocked. In your app, you can listen to this event, which will only be triggered if the resource is blocked or unavailable. You can listen to this event in the following way:

document.addEventListener('adBlocked', () => {
    // Implement your custom logic on how to handle adblockers
    document.querySelector('.adsbygoogle').className = 'ad-fallback';
});

In the example above, I change the class of the elements, that display the ad to something else. This can load in a custom background image to let the user know they have adblocker installed which cuts down the income of the site.

If you want to be more agressive with your anti-ad blocking strategy, here you can show an anti-ad block popup which only lets users consume your content, if they disable their ad blocker.

There are also other ways to go about detecting an adblocker. Staying with the rejection of network requests, if you load the resource through JavaScript, you can simply add a catch block to your fetch request.

fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
     .catch(() => console.log('Network request failed, adblock is enabled'));

You can also take the CSS route and check if the styles of your blocks have been changed:

if (
  document.querySelector('.adsbygoogle').style.display === 'none' ||
  document.querySelector('.adsbygoogle').style.height === '0px'
) {
    // Adblock has rendered the element hidden
}

You can also test if funcions from the ad network is available in the global scope. If the resource is blocked by an ad blocker, these functions will not be defined.

if (typeof __google_ad_urls === 'undefined') {
    // An ad blocker blocked the request for the external JavaScript, which made this function unavailable.
}

Lastly, as cleverly pointed out by this comment on StackOverflow, you can create a bait file with the name of prebid-ads.js and add a global variable to it. If this variable is undefined inside your app, that means that this file has been blocked.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Remove ads

---

Which Solution is the Most Reliable?

So which of these solution is the most reliable? Let’s see in order what are the potential problems with each.

While this works for most of the time, especially for Google where uptime is 99.99%, the onerror event can also be triggered if the resource could not be loaded, because it is unavailable. In any case, your site won’t be able to display ads, so if you are not blocking your whole site with a popup, then it hurts no user.

Just like for the previous solution, the catch block can be triggered if the target resource is down, or rejecting the request. You should only use this solution if you are already loading an ad library from JavaScript. Otherwise, you are only making an extra unnecessary request.

While CSS properties can give you great hints about whether an ad block is present in the user’s browser, if your site is relying on changing styles of ad blocks through JavaScript — which for most it shouldn’t —, it may also generate false positives. Depending on your ad service, the presence of CSS properties for hiding ad space may also be due to the fact that there is simply no suitable personalized ad to display.

This solution relies on the external JavaScript library that is loaded into your page. Intentionally depending on external third party libraries is never a good choice. This assumes you know for a fact that function names won’t change, and they will be present no matter what. In case your ad service decides to change their implementation, this solution break, as your check will always return true.

So what is the conclusion? If you can, I suggest going with an onerror event handler. It has a good support, even IE can handle it. If you want a more robust solution, you can also combine this with reading CSS values. That way you can be sure you covered most type of adblockers.

Do you have any other recommendations? Let us know in the comments below! Thank you for reading through, happy coding!