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.

JavaScript Course

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.


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:

Network request blocked by client

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>
adblock.html
Copied to clipboard!

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';
});
adblock.js
Copied to clipboard!

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.


Other Ways to Check for Adblocker

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'));
fetch.js
Copied to clipboard!

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
}
adblock.js
Copied to clipboard!

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.
}
adblock.js
Copied to clipboard!

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.


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.

onerror on script tag

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.

Using catch for fetch

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.

Checking CSS properties

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.

Looking at global functions

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.


Conclusion

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!

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.