How does an adblocker work?
To understand the following code and scripts, you should first get an idea of how an adblocker works. In a nutshell, an adblocker is blocking HTTP-requests. Those are done to load additional files like styles, scripts or images. To distinct a “normal” script or image from a script that loads an ad like the file show_ads.js from Google AdSense or a static image banner, adblockers like AdBlock Plus use lists with sources of ad-related HTTP-requests. These lists are also called filters.
The adblocker now monitors the HTTP-requests and compares them to the filters. If it finds a match, the ressource is not loaded. A lot of the filters are patterns that match such small things like file names. Allowing some ad ressources (called whitelisting) is possible, but this is a completely different topic.
A filter for an ad script like Google AdSense can be as simple as /show_ads.js or more complex, especially if they are design to work only on specific websites. You should be able to not only see the full list of filters in your adblocker, but also add some new elements if you feel disturbed by them.
How to detect an adblocker?
After you know now how an adblocker works it is quite easy to detect it. Basically, I would divide the methods into two groups.
- Check, if the content has changed
- Check, if a ressource has been loaded
Check, if the content has changed
In my experience, this method has the drawback of not being flexible, especially on websites you don’t know perfectly or where you can’t easily add a container around the ads. It might also be possible that for various reasons the height of an element is never 0, like when the web-developer assigned a mininimal height using CSS.
Check, if a ressource has been loaded
For the reasons mentioned above and to be more independent of the actual content of the website of my clients, I suggest to test for adblocker with an additional ressource. There are two methods for that, and just to be sure, I use both in my BlockAlyzer plugin.
Check for a banner image
The first method to test for adblock with an extra ressource is similar to the method before, but instead of using an element that already exists on the website, you load an additional ressource. This way you don’t have to modify your script every time you use it on another website. Well, maybe this is just a problem for someone who is doing ad optimization for clients or multiple of own projects.
The extra ressource in this case is the image banner.gif with the size of 1×1 and a transparent background. Simply load it anywhere with an <img> tag and an unformated containter with a specific id around it. Than use the code from above to check the height and voilá, you can start counting. banner.gif should be included in the popular adblockers, but if you want to be a 100 percent sure, move the file into a folder called ads.
The second method using an additional ressource is with the help of the (under adblocks perspective) suspicious named file advertisement.js. In case of BlockAlyzer, this file contains just the three following lines:
In your main code you now just need to check if the variable is set. In the full script you can download below this is done with the following snippet.
Even though I prefer the adblock test with advertisement.js, I don’t want to hide the argument I see against it: an additional ressource is being loaded. That means an extra HTTP-request that will make every performance purist cry a little.
The whole adblock test script
- index.html (sample code)
How to install the adblock counter
1. Copy adblocks.php, adblocks.txt and advertisement.js in your websites root folder or any other folder if you are more experienced.
2. Include advertisement.js in your header writing the following line between your <head> tags.
You might need to adjust the path to the file if advertisement.js is not in the root folder of your website.
3. Copy the code in the <script> tags in index.phtml (line 33 to 69) into your websites code. The best place for it is before the closing </body> tag.
4. Edit php_url in line 34 if your php-file is not in the root directory.
5. Visit your website and check if the content in adblocks.txt has updated.
If this didn’t work, please check spelling and paths of the files. If file names and paths are fine, please leave a comment telling me about your problem.
How to evaluate the result
After a while you might want to check adblocks.txt for your numbers. You find two values seperated with a hyphen there. The first value represents the total number of page impressions. The second number is the amount of page views with adblock enabled.
To get the percentage, just divide the number of adblock views by the total number of page views and multiply it by 100:
adblock page views / total page views * 100 = percentage of adblock pageviews.
Update October 16th: I added the percentage of the adblock users. The output of adblocks.txt should now look similar to this:
540-243 – (45%) – started: 16/10/2013 10:54
To compare the numbers, I installed this script together with BlockAlyzer on one of my private blogs. The numbers did vary a bit (19% to 17.3%), what I don’t find too bad.
If you don’t run your website in php, you need to change the file adblock.php into a file of your programing language. The file is quite simple and if you know your programing language, you won’t have a problem transfering it.
Updating the numbers in the adblock.txt-file is not the best choice, but the easiest for me to use the script on a clients site to just get an impression on the number of adblock users. I recommend you don’t use this script for a longer period.
BlockAlyzer writes the information into the database and I am working on other ways too. You might want to subscribe to the newsletter to get updates on this.
October 16th: thanks to Tom’s comment below, I updated the script so adblocks.txt also includes the percentage of adblock users and the date when counting was started. I also added some tests to check, if adblocks.txt does already exist.