Building a simple “Anti Adblock” script

Posted September 5th, 2009 in Monetisation, Tutorials

AdBlock detector tutorial

There seems to be a growing trend amongst webmasters of adding so called “anti adblock” scripts to their site to disable access to users using adblocking software. A lot of these scripts however require lots of javascript or server side code, in this blog post we’ll highlight a way of detecting adblocking software in just a few lines of javascript!

Now this post I expect is somewhat controversial – at least as controversial as a javascript tutorial can be! We don’t and won’t use this script here on our site or blog – we believe that if users find our site useful and appreciate it costs money to upkeep they will unblock our ads. On top of that we make sure we only use simple text or static ads – no flash or sounds here.

However some webmasters see it differently, seemingly believing that users using adblocking software are “stealing” from them in terms of bandwidth and shouldn’t be allowed to access their website. The script demonstrated in this blog post will leave it up to you to decide what to do with users who have adblock enabled. Our suggestion is a removable message, telling them why they should unblock ads on your site. You may wish to redirect them to a “No ads, no access” page – but frankly that’s just not nice!

The setup

So what’s the idea behind this script? What we’re going to create is a javascript file which will write a <div> tag on the page. The name of the javascript file, advertisement.js, should trigger any adblocking software and result in the tag not being written. Therefore when we check for the existence of the tag we can differentiate between a user using adblocing software (tag doesn’t exist) and a user without (tag does exist).

The tag won’t have any styles applied to it – so it won’t effect users without any adblocking software installed.

The code

Firstly, is the code for the advertisement.js file:

1	document.write('<div id="adpbtest"></div>');

This single line of code “writes” a div onto the page, identifiable by the id “adpbtest” – this value will be important in the next part.

Next, is the code used to detect the div tag.

var x = document.getElementById("adpbtest");
if(!x) {
    var noads=true;
}

Line by line, this script firsts attempts to find the element by the earlier id value. If it can’t find it (denoted by the ! before the variable name, x) a new variable, noads, is set to true.

This snippet of code needs to be added after the advertisement.js file – either in another file or inline like so:

<html>
<head>
<title>Adblock detector</title>
</head>
 
<body>
<script type="text/javascript" src="advertisement.js"></script>
<script type="text/javascript">
var x = document.getElementById("adpbtest");
if(!x) {
    var noads=true;
}
</script>
</body>
</html>

You now have a javascript variable called noads which you can use to either write messages, redirect to another URL or perform other actions on users with adblocking software. As talked about in the start of this tutorial – it’s up to you, we wouldn’t suggest directing a user again from your page but just a little message asking to help support the site if they like the content.

Users without javascript

Of course this script won’t work on javascript disabled browsers and that is the drawback of using such a simple script over a much larger server side one. However seeing as very few users have javascript disabled nowadays and those that do probably wouldn’t see adverts in the first place anyway it seems that this isn’t too big a of a problem.

And that’s that – this nifty little code snippet is able to help you detect users with adblocking software on your website. Please remember that if you want to block or annoy users with messages about using adblocking software you’re going to have some good content – don’t go slapping this code on “Made for Adsense” sites!