How to detect if AdBlock is installed on the device of your visitors with JavaScript

The AdBlockers are really a complicated discussion theme, because a lot of people doesn't support to see ads in websites, however as an administrator of a website, you will love to see ads on your own website because they generate money. According to Google estimations, ad blocking costs to Google $887 million every year. However, advertisement a necessary evil. A lot of pages like Forbes, won't allow you to access (for a developer, this is not an impediment as we can just inspect the element and remove the overlay) their website unless you disable AdBlock:

This has someway sense as most of the content on the Internet is free, just because the Ads. Most of us haven't millions in the bank and we write for fun you know? If you want to implement such feature in your website or just to show a moral message to your user that they should visit your website without an adblocker, you can implement it with JavaScript pretty easy.

If after reading the previous message and consequences of this activity, you still want to implement it, then in this article you will learn how to detect if your user has AdBlock installed using JavaScript.

A. Using a simple trick

The first and easiest way to verify wheter your user has AdBlock installed on the browser or not, is by creating in some entry point of your main script (preferably before every other script is loaded) a boolean flag variable identified as adblockEnabled. This variable will be set to true:

window.adblockEnabled = true;

// Some other JS here ..

Once the flag variable exists, proceed to create a new simple script file named adframe.js. The code of the script is the following:

// adframe.js (an extra file with the following line of code)
window.adblockEnabled = false;

It's obviously important that a new file is created (only with the previous line of code). As you can see, the script just update the boolean flag variable in the window identified as adblockEnabled which initially is set to true. Once the script (adframe.js) is loaded in your document using a script tag or with AJAX and AdBlock is installed on the user machine, then the adframe.js file will be really never loaded (making that window.adblockEnabled will remain set to true) and therefore, making you able to detect if your user has adblock installed on the browser.

See the following implementation example in a single file:

<!-- Set by default that adblock isn't enabled by a flag variable -->
<script type="text/javascript">
    window.adblockEnabled = true;
</script>

<!-- 
 Load the adframe.js script to change the adblock status to false
 obviously if the script is blocked by adBlock, then the adblockEnabled
 will remain as true, which means that adblock is enabled
 
 Code of the adframe.js file:

 window.adblockEnabled = false;
-->
<script type="text/javascript" src="adframe.js"></script>

<!-- Verify in some script if adblock is enabled -->
<script type="text/javascript">
    if(window.adblockEnabled) {
         alert("Hey, you're using adblock :(");
    }
</script>

It's pretty easy to do and functional till the date.

B. Using BlockAdBlock (FuckAdBlock)

If you are the kind of developer that loves libraries, then there's an useful vanilla script that will allow you to check if your user has AdBlock installed. BlockAdBlock (originally named FuckAdBlock, however for a more convenient name forked on a new repository with the name BlockAdBlock) is an useful script that allows you to detect nasty ad blockers.

To use this library, you can simply download a copy of the script and add it to your document with a script tag:

<script src="./blockadblock.js"></script>

If you use instead a package manager, you can install it via NPM:

npm install blockadblock

Or with Bower:

bower install blockadblock

If you need more information about this plugin, please visit the official repository in Github here.

To detect if an user has adblock installed on the computer with BlockAdBlock, you only need to add the script to the document using a script tag. Then verify if the variable blockAdBlock exists, in case not, it means that the blockadblock.js script was blocked (adblock is installed). Then, add 2 event listeners that will be triggered once the status of AdBlock on the computer is detected:

<script src="./blockadblock.js"></script>

<script>
    /**
     * Callback executed if adblock is installed 
     **/
    function adblockDetected(){
        alert("You're using adblock");
    }

    /**
     * Callback executed if adblock is disabled 
     **/
    function adblockDisabled(){
        console.log("Everything in order, show ads");
    }


    /**
     * Verify adblock
     **/
    if(typeof blockAdBlock === "undefined"){
        adblockDetected();
    }else{

        blockAdBlock.onDetected(adblockDetected);

        blockAdBlock.onNotDetected(adblockDisabled);
    }
</script>

Both methods works pretty well, it's up to you which to use and what to do if your user is using adblock.

Happy coding !