Ad Blocker detection AKA Adblock Plus

Question

After searching Google and Stackoverflow for a few hours I could not find a solution. What I\'m trying to do is detect Adblock plus and display a simple message for now.

Answer 1

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;
}

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 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.

1. AdBlock can block resources from loading
2. 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.

Answer 6

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>