Ad Blocker detection AKA Adblock Plus

Question 1

I have found one of the best scripts if you use third party ads.

antiblock.org Disclaimer I'm not affiliated with this site in anyway.

It will work for most sites and if they want to bypass it they will have to add their own filters (complicated for normal users) or contact adblock filters and have one added but they quit doing that cause the list is getting over loaded and slowing down ad block users.

Question 2

You don't need to have a plugin to detect adblock, simply use this:

<script type="text/javascript">
    var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
    if(adblock) {
          //adblock is installed and enabled on this site :-D
    }
</script>

Content of adframe.js:

adblock = false;

Update: Adblock Plus blocks certain requests or hides certain elements based on patterns it already has. One of those patterns is this (in patterns.ini):

[Filter]
text=/adframe.
hitCount=843
lastHit=1456391595626

which blocks any URL that has /adframe. in it.

Update 25th august 2018

Adblock plus has changed the way it finds the list and blocks the ads. It has bunch of lists called subscriptions which are used for blocking. For example this one which is the default one:

https://easylist-downloads.adblockplus.org/easylist.txt

You can use the rules on this file to find a file name to use. For example you can use seo-ads.js

P.S for developers: For some reason I couldn't get ABP to block these files on local environment.

P.S: ABP is my favorite ad blocker :-D

Question 3

Use my plugin "FuckAdBlock", it can very easily detect AdBlock: https://github.com/sitexw/FuckAdBlock

Example :

fuckAdBlock.on(true, function() {
    alert('AdBlock detected !');
}).on(false, function() {
    alert('AdBlock is not detected =)');
});

Example online: http://fuckadblock.sitexw.fr/

Question 4

What I've seen in the field is using a background image behind the ad. If adblock isn't active, the ad will be displayed over the background-image (which makes the background-image not viewable). If adblock is active, the ad is blocked, and the user will instead see the background-image.

<div id="ad-container">
  <img src="../ad/ad.png" id="ad">
</div>

With CSS:

#ad-container {
  background-image: url( http://domain.com/pleasedonotuseadblocker.png );
  height: 200px;
  width: 200px;
}

#ad {
  height: 200px;
  width: 200px;
}

Question 5

If you want to ads to be showing, even when AdBlock is active, you'll have to understand what AdBlock is capable to do.

AdBlock can block resources from loading
AdBlock can hide specific elements in the DOM.

Although it is said that AdBlock can also modify CSS, I can't find any documentation on that other than hiding and collapsing elements.

So what exactly could you do to be 'smarter' than AdBlock?

You could disguise your request in a way that it will never be 'matchable' (e.g. http://domain.com/ae9a70e0a.png, where the image name will be random every time and without a common prefix). As far as I am aware, a rule in AdBlock cannot contain a regex. A rule would either match no ads, or too many resources. It would be possible to rewrite such an url on the server to point to your ad.

However, while AdBlock might not be able to block your ad from loading, it might still be able to hide it. There is no real way of going around this. There will always be a smart CSS selector that will -just- select your element. You could however add a background-image with content. This is not useful for an ad (not clickable), but might help you display an other message. Downside is that if someone decides to block that annoying background image, it will hide your content too.

As far as a script goes, you might be able to load the ad with an ajax request. I suppose (but cannot test) that it will give an error if the resource could not be loaded (because it was blocked). ($.ajax( request ).error( function() { ... } ); in jQuery or some equivalent in regular javascript). You could use that to do something else. You could include that in the document itself, instead of an external resource, to ensure it will always run (if javascript is enabled). Even then, you cannot be sure that 'whatever else you do' will ever be visibly displayed. As last resort you can make a window.alert( ... ). Assume that within 3 pages, your visitors will never come back if you use that.

An other way I can think of, is making a websocket to the server (afaik this cannot be blocked by AdBlock). On the server side you'll need to examine if the ad pages are not loaded when a certain page is loaded. This information can be sent through the socket, which can be used in your script to do 'something'. This, however, sounds crazy complicated and is a significant overhead for 'just' a script that detects AdBlock.

Question 6

A simple Ajax call does the job:

var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
  if( xmlhttp.readyState == XMLHttpRequest.DONE ){
    if( xmlhttp.status !== 404 ){
        console.log("Blocking ads")
    }else{
        console.log("Not blocking ads")
    }
  }
}
xmlhttp.open("GET", "/498100ffe815d700cd838d1/ads/showad.js", true)
xmlhttp.send()

Or even better, without the HTTP overhead:

var adBlockTester = document.createElement('div');
adBlockTester.innerHTML = '&nbsp;';
adBlockTester.className = 'adsbox';
document.body.appendChild(adBlockTester);
window.setTimeout(function() {
  if( adBlockTester.offsetHeight === 0 ){
    console.log("Blocking ads")
  }else{
    console.log("Not blocking ads")
  }
  document.body.removeChild(adBlockTester);
}, 60);

Question 7

The following snippet will pretty much detect all ad blockers. Requires jQuery.

(function(){
    var bait = 'http://googleads.g.doubleclick.net/pagead/gen_204?id=wfocus&gqid=advertisment&advert=ads';
      $.ajax({ url: bait, dataType: "script"})
      .fail(function () { alert('ad blocked'); })
      .abort(function () { alert('ad blocked'); });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It's wrapped in a self-executing anonymous function so it doesn't interfere with other vars or code on the site.

The bait uses the most popular ad serving network (Google's double click) and includes a few other query params used by easylist and others.

The fail() and abort() methods are both required, but only one or the other will be invoked.

Don't put the code in adblocker.js or similar since those sort of filenames themselves get blocked from loading. Either inline it or include it in an random/arbitrary filename or combine it in your main site JS file.

Question 8

Here is the code to detect adblock. You can learn how the code works here

function detect()
{
    //create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
    //In the URL use the words specific to advertising so that Adblock can do string matching.
    var iframe = document.createElement("iframe");
    iframe.height = "1px";
    iframe.width = "1px";
    iframe.id = "ads-text-iframe";
    iframe.src = "http://domain.com/ads.html";

    document.body.appendChild(iframe);

    setTimeout(function()
               {
                   var iframe = document.getElementById("ads-text-iframe");
                   if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                   {
                        alert("Adblock is blocking ads on this page");
                        iframe.remove();
                   }
                   else
                   {
                        alert("Adblock is not detecting ads on this page");
                        iframe.remove();
                   }
               }, 100);
}

Question 9

Simple javascript/jQuery detection that works nicely:

$('body').append('<div id="ad-container" style="position:absolute;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" id="ad"></div>');
var ad_container = $('body').children('#ad-container');
if(!ad_container.is(":visible")) {
  // Add your warning and/or adblock detection logic here.
}
ad_container.remove();

Question 10

The Smartest and easiest way I found is:

1) add this html code on somewhere in your markup probably on top.

<div id="bait" class="pub_300x250" style="color: #fff">.</div>

Usually ad blockers detect ad sizes of (pub_300x250) as mentioned in Easylist and blocked them, which is triggered by "bait".

2) then add this js code into your script file.

if (document.getElementById("bait").offsetHeight === 0) {
    // function code or alert (whatever) here.
   alert("Ad-Blocker DETECTED");
}

Our Script detects if that piece of markup is existed in present html by checking thorugh "bait" id.

This works for me with Adblock , AdBlock-Plus & uBlock Origin on every site on every browser.

Question 11

For me none of the tricks worked, may something I was doing wrong. but this is a very specific way to implement for google ads.

window.onload = function() {
   if (document.getElementsByClassName('google-auto-placed').length == 0){
                // Adblock Detected
   }        
}

If you have other ad system like amazon, look for their generic class name / ids by inspecting page.

If you are planing to put this code in seperate .js file make sure file name does not have "Ad" word in it. just name it magic.js

If Google ever decides to change div name, this method would fail. but that seems unlikely.

Question 12

In my case ADB was hiding the content even that there were no ads.. ( just because the ad word was present in many urls, because it was the post type slug.. )

But I noticed that they don't remove the content, just applying display: none to the body

So as an extra solution,

I just noticed that applying display: block !important; to de body, prevents hiding the content by Adblock plus

<body style="display: block !important;">
  <img src="url-containg-ad-ads-word.jpg" alt="you should see this anyway" >
</body>

Question 13

It's an arms race, for sure, and I support anyone's right to block ads, but I also support websites that depend on ad revenue trying to convince users otherwise, or perhaps persuade them to subscribe or make a donation to make up for lost ad revenue. I don't approve of sites trying to force users to see ads, but a polite message is fine.

Anyway, right now it's worth noting that there are many adblocking extensions/plugins, and they can all have different ways of doing it, and it sometimes is different between OSes and browsers too. I've found that for my purposes right now, this jQuery selector is enough to at least see whether AdBlock or AdBlockplus is being used, cross-platform, across at least Chrome and Firefox:

if($("div[id^=google_ads_iframe_] iframe:visible").length == 0)  {
    // pop up a message or whatever
}

Question 14

Here is a simplest way to deal with it (no iframe, no jquery):

var elem = document.createElement('div');
elem.className = 'adclass';
document.body.appendChild(elem);
window.setTimeout(function () {
    var isAdblockEnabled = !(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
    if (isAdblockEnabled) {
        // Adblock is enabled
    }
}, 0);

Question 15

I know this is kinda old, but here's IMHO a better way to do it:
Add this to your <head> section:

<script type="text/javascript">
window.onload = function() {
var iframe = document.createElement('iframe'),
    randomDomain = Math.floor(Math.random() * (10000 - 100 + 1)) + 100,
    iframeLoaded = true;
    
iframe.src = "http://"+ randomDomain +".com/ads.html";
iframe.height = ".1px";
iframe.width = ".1px";
iframe.id = 'some-ad';
iframe.onload = function() {iframeLoaded = false;};

document.body.appendChild(iframe);

setTimeout(function() { 
    var someAd = document.getElementById('some-ad');
    if(!iframeLoaded ||
       someAd == null || 
       someAd.style.display == "none" || 
       someAd.style.display == "hidden" || 
       someAd.style.visibility == "hidden" || 
       someAd.offsetHeight == 0)
        document.getElementById('ab-message').style.display = 'block';
    someAd.remove();
}, 500);
};
</script>`<br>

Now you can use the ab-message id wherever you want to display a message to AdBlock users:

<div id="ab-message" style="display: none">Your message here!</div>

Note the inline style added to hide it originally (Of course, you can also do this from your own CSS file).
Also note that it takes 500ms, that's because it has to wait for the adblocker to do its thing or it won't work.

A little explanation of how this script works

First, it appends an iframe with a source of a randomly generated link. (It is randomly generated because some adblocks are smart, at some point, they realize a link is fake).
Then it runs multiple checks on that iframe (if it was loaded successfully or if its style was modified). If one of these tests is true, it then displays the ab-message element to adblock users.

This script works for most (if not all) ad blockers.

EXTRA

No point, really, could have just created a gist, but instead I created a Github project, but still, check it out and star it if it helped you.
abDetector: Simple vanilla JavaScript AdBlock Detector.
Enjoy.