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

As someone who uses an ad blocker, I don't know how I feel about someone circumventing it. — Oded, Dec 24 '11 at 16:02
Obviously, but sometimes, we really don't have a choice. There are some websites however where I do whitelist. StackOverflow is an excellent example. — Madara's Ghost, Dec 24 '11 at 16:05
Actually, it is interesting to note that Chrome's popular extension `AdBlock` started allowing ads that are unobtrusive in a recent update. Also, if you host the ads on your own server, you automatically dodge the `hosts` file ad-blocker that some people use. — Some Guy, Dec 24 '11 at 16:12
Yes, but generally hosting ads for money (or linking to another website for money) is a big no-no and will earn you a big fat penalty on search engines. — Madara's Ghost, Dec 24 '11 at 16:16
@Truth 'Alternative ad content' or 'alternative page content' ? — c69, Dec 24 '11 at 18:31
Alternative ad content. I want to display the same page, only with a request for the user to disable his ad blocker for my site. — Madara's Ghost, Dec 24 '11 at 18:43
I am not sure if the users who block the ads in first place would like to see the message. Still, to answer your question, you can have a background image or a div of the same size as of the ad and display the ad over it. So the message would always be there but visible only when the ad i blocked. — Virendra, Dec 24 '11 at 18:53

Muhammad Usman · Accepted Answer · 2013-06-22T08:26:48.313

17

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 :)

edited Jun 22 '13 at 08:26

answered Dec 24 '11 at 19:08

Muhammad Usman

12,439
6
36
59

It won't work, as I said ads are manipulated a while after the DOM is ready so we have to check it after the ads are manipulated. – Muhammad Usman Dec 24 '11 at 19:55
Okay, but 3 seconds looks rather... extreme – Madara's Ghost Dec 24 '11 at 20:16
1

Well 3 seconds is not compulsory, you may use as low as you need and get it tested. I just played safe with a higher timeout. – Muhammad Usman Dec 24 '11 at 20:18
You should also test if the div exists if ad blocker delete the div. – KeizerBridge Jul 02 '15 at 08:42
Your demo displays nothing with ublock origin. – Michael Rogers May 24 '20 at 00:16

score 6 · Answer 2 · answered Dec 24 '11 at 20:22

6

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!

answered Dec 24 '11 at 20:22

Madara's Ghost

172,118
50
264
308

Works like a charm. I replaced the .css() bit with what I wanted to display. – user2959229 Jul 10 '15 at 11:56

Daniel Szabo · Answer 3 · 2011-12-24T20:08:50.137

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.

score 2 · Answer 4 · answered Jul 27 '14 at 12:48

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

Thanks! TBF I asked this question about 2 years ago, when I wasn't as good with VanillaJS :P — Madara's Ghost, Jul 27 '14 at 13:05

score 2 · Answer 5 · answered Dec 24 '11 at 18:56

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.

Mike Szostech · Answer 6 · 2014-06-30T23:14:01.810

0

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)

edited Jun 30 '14 at 23:14

answered Jun 20 '14 at 22:33

Mike Szostech

479
3
6

Answer started well, but there is no need to paste all the classes here (hence the -1). – TryHarder Jun 22 '14 at 13:44
Removed the class names - I was just trying to be helpful and make the answer idiot proof! – Mike Szostech Jun 30 '14 at 23:14

score 0 · Answer 7 · answered Jan 10 '15 at 01:06

<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

score 0 · Answer 8 · answered Aug 10 '17 at 06:53

0

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

answered Aug 10 '17 at 06:53

Saul Bretado

1
1

Put some example code here. Don't answer using link only – DeKaNszn Aug 10 '17 at 07:21

milan · Answer 9 · 2011-12-24T19:11:01.010

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.

Display Alternative Content for Users with AdBlockers

9 Answers9