How to detect AdBlock via Javascript

Source Code

Adblock is a classic double edge sword of the internet. As a consumer, It helps save computing power, blocks you from third party trackers and prevents nasty malwares from infecting your computer. On the other hand, as a publisher, it cuts off your only stream of income, if ads on your page aren’t being shown, you won’t be able to fund yourself to produce free content.

According to PageFair:

Ad blocking estimated to cost publishers nearly $22 billion during 2015.
There are now 198 million active adblock users around the world.
Ad blocking grew by 41% globally in the last 12 months.
US ad blocking grew by 48% to reach 45 million active users in 12 months up to June 2015.
UK ad blocking grew by 82% to reach 12 million active users in 12 months up to June 2015.

This is an alarming trend.

I’m sure you’ve been to sites with adblock on and it gives you a pop up asking you to turn off your Adblocker software/plugins to support their site, Forbes is a great example, where it actually disallows you to visit if you have Adblock turned on.

In this tutorial, I’ll show you a very easy way of how you can quickly detect whether your visitors are using adblockers. What you do afterwards is totally up to you. Let’s get started.

First we need to create a file on your server call advertisement.js:

window.showAds = true;

then you create your main Javascript file script.js, which contains your site’s logic, make sure to include it AFTER advertisement.js in your html file:

if (window.showAds) {
    // Your user is not using adblocker
    document.getElementById('status').innerHTML = 'No Adblocker detected.'
} else {
    // You user uses adbocker, show a popup dialog, alert, etc here
    document.getElementById('status').innerHTML = 'You have Adblocker!'
}

and finally, here’s our main project file index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>PentaCode AdBlock Detector</title>
</head>
<body>
    <h1>Welcome to PentaCode</h1>
    <h2 id="status"></h2>
    
    <script src="advertisement.js"></script>
    <script src="main.js"></script>
</body>
</html>

Check out the Plunker here: https://plnkr.co/edit/gQCM5jDKnBn3kcGwQCO7

Try visiting the page with/without Adblock on and you should see how the page can detect your Adblock status.

So how does this work?

To understand how/why this works, we need to learn about how Adblock works:

It looks at your page source, to detect any file you’re loading in that contains the phrases “ad”, “advert”, “advertisement” or similar.
It looks at containers on your page with ID or Class Names that matches its list of ad related phrases, if it sees them it hides the DOM element.
It blocks any web request to its up to date list of ad servers, that way no ad requests will ever be made and therefore no ads will display.

What we did above is we set a bait for Adblock by bringing in an external file called advertisement.js, we made it painfully obvious that this is a Javascript file about advertisement in the hope that Adblock blocks it, and when that script is blocked, window.showAds will be set to undefined, and given that, we can easily detect if someone is running an Adblocker.

That’s it, it’s quick, simple and effective.

Tracking Usage

I highly recommend you emit a tracking event via something like Google Analytics to get a full report on how your user’s Adblock usage.

(Note: If someone uses a strong blocker like Ghostery, then Google Analytics may be blocked too, in that case I suggest you implement an image pixel and track it on your own server)

We just need to modify our code a little bit to take advantage of GA’s reporting suite.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>PentaCode AdBlock Detector</title>
</head>
<body>
    <h1>Welcome to PentaCode</h1>
    <h2 id="status"></h2>
    

  <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
        ga('create', 'UA-XXXXXXX-XX', 'auto');
        ga('send', 'pageview');
    </script>

    <script src="advertisement.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js

if (window.showAds) {
    // Your user is not using adblocker
    document.getElementById('status').innerHTML = 'No Adblocker detected.';
 ga('send', 'event', 'User Interaction', 'Adblock', 'Disabled');
} else {
    // You user uses adbocker, show a popup dialog, alert, etc here
    document.getElementById('status').innerHTML = 'You have Adblocker!'
    ga('send', 'event', 'User Interaction', 'Adblock', 'Enabled');
}

And now if you visit your page, you will notice GA tracking everytime someone visits your page with or without a Adblocker. Nifty!

I hope you find this tutorial useful, I do not recommend cutting off your site’s content from users of Adblock, it’s not their fault that ads are ruining their experience, it is the ad industry that needs a reform to better serve the internet. Hopefully with this knowledge, you will find a way to send a message to your Adblock users.

Comments Or Questions? Discuss In Our Discord

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

PentaCode

So how does this work?

Tracking Usage

More from PentaCode