Display Alternative Content for Users with AdBlockers

Question

I'm working on an ad funded project. Really something subtle and content aware, not lame popups for genital enlargement etc.

Since the project is ad funded, people with Ad Blockers will not benefit the project, (since they obviously don't know the ads on that specific site is not that bad).

How can I display an alternative content for people with ad blockers? Something like

We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!

How can I test for an ad blocker?

Found an example! http://mangastream.com

Answer 1

Ad Blockers basically manipulate some elements with some IDs or jQuery like selection rules, stored in their database, it is done a while after the DOM is ready.

So you have to check if your ad element is manipulated or not after a certain time for example 3 seconds after the DOM is ready. You can basically check the display (because AdBlockers hide it) CSS property or the innerHTML of your ad element. Below is an example:

Working Demo: http://jsfiddle.net/cxvNy/ (Tested using AdBlock for Chrome, you need to have this active)

If your Ad HTML is:

<div id="google_ads_frame1">aa</div>

Then:

$(function(){
   setTimeout(function(){
      if($("#google_ads_frame1").css('display')=="none") //use your ad's id here I have used Google Adense
      {
          $('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
      }
  },3000);
});

Hope above code is self explanatory :)

Answer 2

Eventually, I used the following implementation (similar to this site's). The following code is used:

function abp() {
    if ($('.ad').height() == 0) {
        $('.ad').css("height", "90px");
        $('.ad').css("background-image", "url(/static/images/msblock.png)");
    }
}
$(abp);

At the very end of the document. Seems to be working like a pro. Thanks for everyone's excellent answers, upvotes for all!