How to detect Adblock on my website?

Question

I would like to be able to detect if the user is using adblocking software when they visit my website. If they are using it, I want to display a message asking them to turn it off in order to support the project, like this website does.

If you enter to that site and your browser has some kind of adblock software enabled, then the site instead of showing the actual ads shows a little banner telling the users that the ad revenue is used for hosting the project and they should consider turning Adblock off.

I want to do that on my website, I'm using adsense ads on it, How can I do that?

Answer 1

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>var adb=true;</script>
<script src="./getbanner.cfm?"></script>
<script>
$(document).ready(function(){if(adb)alert('AdBlock!');});
</script>

and in getbanner.cfm file:

adb = false;

I think it's easiest way to detect adblock.

Answer 2

var

Answer 3

I'm a bit late to the party here but here's the simplest solution I know for the old AdSense code with jQuery:

$ads = $("ins");
if ($ads.length == 0) {
    // Replacement code about you needing ad income
}

And in plain JavaScript:

$ads = document.getElementsByTagName("ins");
if ($ads.length == 0) {
    // Replacement code about you needing ad income
}

For $ads you can use any selector that you know is consistent with the ad being generated. E.g. for the new AdSense code you can use $("iframe#google_ads_frame1").

Answer 4

I know there are already enough answers, but since this question comes up on Google searched for "detect adblock" at the topic, I wanted to provide some insight in case you're not using adsense.

Specifically, with this example you can detect if the default Adblock-list provided by Firefox Adblock is used. It takes advantage that in this blocklist there is an element blocked with the CSS id #bottomAd. If I include such an element in the page and test for it's height, I know whether adblocking is active or not:

<!-- some code before -->
<div id="bottomAd" style="font-size: 2px;">&nbsp;</div>
<!-- some code after -->

The rest is done via the usual jQuery suspect:

$(document).ready( function() {
  window.setTimeout( function() {
    var bottomad = $('#bottomAd');
    if (bottomad.length == 1) {
      if (bottomad.height() == 0) {
        // adblocker active
      } else {
        // no adblocker
      }
    }      
  }, 1);
}

As can be seen, I'm using setTimeout with at least a timeout of 1ms. I've tested this on various browsers and most of the time, directly checking for the element in ready always returned 0; no matter whether the adblocker was active or not. I was having two ideas about this: either rendering wasn't yet done or Adblock didn't kick in yet. I didn't bother to investigate further.

Answer 5

Just created my own "plugin" for solving this and it works really well:

adBuddy + jsBuddy:

ADBuddy JSBuddy GitHub

I added mobile compatibility and jsBlocking detection among other things... (Like an overlay that is shown to the users asking them to disable the adBlocking/jsBlocking software); Also made it responsive friendly.

It's opensourced under the Coffeeware License.

Answer 6

|style|document