How to detect ad block in JavaScript? [SOLVED]

Introduction

As online advertising becomes more and more prevalent, users are increasingly using ad-blockers to avoid intrusive and often irrelevant ads. While ad-blockers can be a nuisance for website owners and advertisers, they can also be used to identify users who are using ad-blockers. In this article, we will discuss how to block ads using JavaScript

Detecting an ad blocker using vanilla JavaScript

For us to detect ad blockers we will need to implement a JavaScript file that will be triggered when the ad blockers stop the rendering of the bait html section. In other words, we will create a bait div section that will be stopped from rendering if ad blockers are triggered, and if stopped, the JavaScript file tells us there is an ad blocker in place.

Let’s write some HTML/CSS and JavaScript to show this. In the HTML, we place the div with the id bait which contains a div with the class ads that ad blockers look out for. The CSS file contains styling to had a 1px width to the div with ads class, and the JS file checks if the width is equal to zero. The width will be zero because the ad blockers will find the div with ads class and block it from rendering.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="bait">
            <div class="ads"></div>
        </div>
    </body>
    <script src="checker.js"></script>
</html>

CSS code (style.css)

.ads {
   width: 1px;
}

JS Code (checker.js)

let adsWidth = document.getElementByClassName('ads').offsetWidth;

if (adsWidth == 0){
	alert("Adblocker detected. Please deactivate your adblocker");
} else {
	alert("No adblocker present");
}

Detect an ad blocker using a third-party JavaScript library

Instead of using your own JavaScript, we can make use of third-party libraries such as BlockAdBlock. BlockAdBlock is an open-source JavaScript library that’s maintain to help you detect ads within your site. All of you need to do is link the BlockAdBlock JavaScript code within your code, and add some additional custom code for your own site.

Let’s show you how. First, download the BlockAdBlock JS code, and place it within the directory of your code. After, you can link the the code using the script tag. Upon doing this, you can create two functions (adBlockNotDetected and adBlockDetected) that will carry out certain actions when ad blockers are detected or not.

The blockAdBlock is a variable, and if the file is not called (due to the ad blocker), the variable does not exist blockAdBlock and will therefore be undefined.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body></body>
    <script src="blockadblock.js"></script>
    <script>
        // Function called if AdBlock is not detected
        function adBlockNotDetected() {
            alert("No Ad Block present");
        }
        // Function called if AdBlock is detected
        function adBlockDetected() {
            alert("Ad Block is present");
        }

        if (typeof blockAdBlock === "undefined") {
            adBlockDetected();
        } else {
            blockAdBlock.onDetected(adBlockDetected);
            blockAdBlock.onNotDetected(adBlockNotDetected);
        }
    </script>
</html>

Output

Summary

If you want to increase your earnings via ads, you need to make sure your users aren’t using ad blockers to block relevant ads, and by using JavaScript, you can make it possible. We can write our own bait JavaScript code or use third-party libraries to achieve ad blockers detection.