Posted: November 24, 2008

Ultimate guide to detecting adblock software

I debated writing this article as I may be unleashing a new evil on the internet. Like most things, I came to the conclusion that if I don't, some other smart person eventually will.

I've been playing with the idea of adding ads to this site for a while, and recently I've been testing a couple different ad layouts. I myself run ablocking software and I noticed that they simply removed the ads without removing/hiding the containing divs. That meant that when my site was viewed with adblocking software enabled, there were huge white spaces in my site that could be used for displaying content.

That's when I set out on my path to find a way to detect ad-blocking software and change my site accordingly. The plan was to find out if the user or client was preventing ads from being displayed, and if so, get rid of the ad divs all together.

That's when I came across this site: http://detect-ad-blocking-software.webconrad.com/. This author was faced with a similar dilemma but wished to display a different message and donate button in the event that the ads weren't being displayed. The method he used is found elsewhere on the internet, so I don't know who to give original credit to. I simply chose his site because it was the easiest to understand and it actually worked.

His method involves making a fake or dummy "ad" that no ad blocker would possibly allow, then seeing if that made it through. If that ad didn't, it would follow that the real ones probably didn't either. If it did, then certainly the real ones are being displayed.

I tried the code myself and it does work for most ad blocking software. It didn't however, work for my firewalls built in ad blocking abilities. I use NetBarrier and when I have the "Banner Filter" enabled, that guys ad block detection method doesn't work. That's why I've written my own method which should work for any ad blocking software around. The key difference between his and my approach is that mine tests the actual ad itself to see if it was displayed, and his tests a decoy ad.

How it works:

Get the ad code as the browser evaluates it with ad blocking software disabled.
Get the ad code as the browser evaluates it with ad blocking software enabled.
Search for a key difference that you can test between the two.
Set up a simple if statement and change the code accordingly.

The details:

The HTML for my ad always looks like this:
<div id="ad" style="width: 100%; height: 90px; margin-left: -3em; padding-left: 1px;">
    <script type="text/javascript">
    </script>
    <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <script type="text/javascript">
        var whichad=1;
    </script>
</div>
But that's not how it looks to the DOM after the browser has loaded it.

To figure that out I simply use javascript to query the DOM after that part of the code has been loaded.
alert('|'+document.getElementById("ad").innerHTML+'|')
That line will pop up an alert with the actual contents of the div containing my ad. The reason for the pipe symbols(|) at the beginning and end is to see where exactly the white space ends and the code begins.

After that it's just a matter of running that script once with ad blocking software enabled and once without. Here are my results when I do that:
Enabled
|
    <script type="text/javascript">
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                    |

Disabled
|
    <script type="text/javascript">
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script><script>window.google_render_ad();</script><iframe name="google_ads_frame" width="728" height="90" frameborder="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-2861474182926556&dt=1227228659351&output=html&slotname=2762556657&correlator=1227228659351&url=http%3A%2F%2Fwww.metamorphosite.com%2FBUI&ea=0&frm=0&ga_vid=2222168753818471200.1227228544&ga_sid=1227228544&ga_hid=1577096325&ga_fc=true&flash=10.0.12&u_h=800&u_w=1280&u_ah=687&u_aw=1280&u_cd=24&u_tz=-360&u_his=7&u_java=true&u_nplug=11&u_nmime=231&dtd=2" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"></iframe>
                    |
See the difference?

Now it's just a matter of picking a piece of the unblocked code to test for. In my case, I decided to test window.google_render_ad(). Here's the test:
alert(typeof(window.google_render_ad))
That will display an alert with what "type" the function google_render_ad() is. If you run that code with ad blocking software enabled you should get undefined. If you run it without ad blocking software, you should get function.

Using that information it is easy to write a simple if statement that contains code to change your website after it's been executed depending on whether ad block software is enabled or not:
if(typeof(window.google_render_ad)=="undefined")
{
    document.getElementById("ad").style.display = 'none';
}
I think that's about all there is to say about that!

Please, use the code and method responsibly. Remember, web developers spend lots of time and money to bring you free web pages and clicking on their ads is just one way they can recoup some of that investment.