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!

Answer 3

Shooting from the hip here, but methinks you can check the content of your ad's div with some javascript after the page has loaded.

<!-- html -->
    <div id="MyAdDiv">
       <div id="BeaconContainer" style="display:none">I rendered!</div>
       // Ad content here.  
    </div>

// javascript

    var d = document.getElementById("MyAdDiv");

    if ( d.innerHTML.indexOf("I rendered!") === -1 )  {
       // Your ad has been blocked.
       // Run code to launch WhiteList request message.
    }

I don't know exactly when the adblocker does it's thing, so it would probably be a good idea to delay this function's execution for a few seconds with setTimeout(). There's probably some interesting stuff you could do with some ajax calls, too, like collecting stats on how many users are running ad blockers. Management just loves that kind of stuff.

UPDATE: I just installed adblock for Chrome and checked it against StackOverflow. It looks like AdBlock just removes the contents of the ad container, so the method above will work.

Answer 4

The most common trick is to create a JavaScript file with a name which is commonly blocked by adblockers, for instance /ads/advert.js. If the file gets blocked, you know the visitor has an adblocker enabled.

CSS files usually don't get blocked by adblocker lists, so this would be a safer approach.

Answer 5

This can be done with simple JavaScript also, without using jQuery.

<script>
window.onload = function(){
  setTimeout(showAdblockImage, 3000); 
};
function showAdblockImage(){
    //get all google ad elements
    var adsList = document.querySelectorAll("ins.adsbygoogle");
    if(!adsList){ return;}
    for(var i=0; i<adsList.length;i++){
        if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
            //AdBlock is not active, hence exit
            break;
        }
        //apply inline css to force display
        adsList[i].style.cssText = 'display:block !important';
        //modify html content of element
        adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
    } 
}
</script>

Ref: Place alternate content in place of AdBlock Censored Ads

Answer 6

I don't know how ad blockers work but for example a Chrome ad blocker I have lets me pick a specific DOM element containing ad to be removed: <div id="ad_holder"> ... ads ... </div>, and the blocker would remove it somehow.

If you put some javascript inside that div, with a short timer, that would modify a global variable, and another timer that executes afterwards, reading that global variable, could you then assume there're no ad blockers on the page if the variable was properly set? What happens if the blocker removes the div after Chrome evaluating that javascript, would the timer stil manage to set the variable although the parent div was removed?

AdBlock also maintains a public list of 'bad' servers (http://www.doubleclick.com ?) and will probably block http requests for content from those servers. This can be done if it integrates with Chrome so that it can define some sort of a content policy - what gets loaded and what doesnt. This case you can detect with the previously described approach. If your client is an ad provider, i guess sooner or later it will end up black listed :)

The blocker might only modify the CSS and hide the whole div, but this could be easily detected.

Answer 7

My favorite approach is to simply add a class of 'ads' or 'ad' or something similar around all nice large useful content blocks on my site, then when people with an ad blocker view it, they don't see anything.

They're forced to disable their ad block in order to see the content.

Don't bother with warnings, let them figure it out. It's not dummies using ad blocking software.

Here is the current list of block rules from some popular adblock extensions. Simply pick a class or id that they are blocking (use your developer tools to view the list of css classes)

Answer 8

<script> // Run after all the page elements have loaded  window.onload = function(){ 
// This will take care of asynchronous Google ads
setTimeout(function() {     
  // We are targeting the first banner ad of AdSense
  var ad = document.querySelector("ins.adsbygoogle"); 
  // If the ad contains no innerHTML, ad blockers are at work
  if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {     
    // Since ad blocks hide ads using CSS too
    ad.style.cssText = 'display:block !important';         
    // You can put any text, image or even IFRAME tags here
    ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';      
  }      
}, 2000); // The ad blocker check is performed 2 seconds after the page load   }; </script>

Use this code you can set image in replacment of google ads

Answer 9

You can implement https://github.com/sitexw/FuckAdBlock which is very good and easy to use.