Jayd Saucedo

Blog

Display a message for adblock users
A week ago I made a post on how I developed a system to collect data about visitors who were using ad blocking techniques, such as extensions like Adblock for Firefox. Now I will show you how to display a message in place of your ads whenever there is something preventing your ads from showing.

I am not against Ad blocking. I have Adblock plus installed and I use it on average of a couple times a week. I don't really see the point in keeping it on constantly. I do, however, keep an extension called "Flash Block" on because I believe flash ads are one form of online advertisement that should never exist. I have adblock bound to a key combination for whenever I need to quickly enable it for abusive javascript ads. Adblock plus features a white list, this allows for users to accept ads from certain websites of their choice. This feature assumes you constantly have adblock enabled. I would like to see a blacklist feature for people who constantly have adblock disabled. That way we can target certain websites or ad techniques that we do not like. This feature will probably never exist, mostly because it is assumed that adblock users always have adblock enabled. With adblock users blocking ads from every website it is likely that visitors will never even give your ads a chance. When 14% of your visitors are using ad block, as visitors on one of my sites were, it kind of makes you wonder how those extra pageviews might affect your total ad revenue. That is why you must deliver your message to them in place of the blocked ads. Asking them to give your ads a chance.

The JavaScript I developed for delivering your message is actually quite simple, as is the technique for detecting if a visitor has ad block enabled. Of course, it doesn't actually detect if Adblock is enabled. Instead, it checks the height of the container your ads are in, if that height is zero then it assumes something blocked the ads from displaying. This is all thanks to the DOM element called "offsetHeight".

Here is an example of my script. Turn adblock on (or off) and refresh the page.

The first thing you need to do is put all of your advertisments in some type of container that can be given an ID. I usually just use DIV. if you have multiple advertisments on one page you need to give them unique IDs or else the javascript will only change the one that it finds first. You need to make sure that the advertisement is the only thing in the container. if you have other text in the container then the script will not work.

The script is less than a kb, including my array of container ids and my message. It is only 12 lines long as well:

var ads = new Array('ads_left', 'ads_top', 'ads_right');
var 
msg = 'message goes here';

onload=function() {
    for(
i in ads){
        
el = document.getElementById(ads[i]);
        if(
el){
            if (
el.offsetHeight == 0){
                
el.innerHTML = msg;
            }
        }
    }
}

The first line is the array of containers. You need to add each container ID to this array in order for the javascript to check that container. Don't worry if the container doesn't exist on some pages, the javascript won't return an error, it will simply ignore it. The second line is your message. If you need to use a single quotation mark in your message simply escape it with a "\" character. If you are unsure what to use as a message feel free to steal mine:

It has been detected that you are blocking advertisements on this website. You are free to do so and I will not try to stop you. Just know that, although you are clearly not interested in clicking any of the advertisements on this website, effortlessly viewing them has a large impact on the amount of revenue that is gained from them; revenue that goes towards keeping this website online. The advertisements are as harmless and unobtrusive as the text you are reading right now. Simply putting this website on your white list would make all the difference. If you choose, you may also support the website by donating.

The onload=function() assignment assures that the javascript only executes when the entire page has finished loading. This is important because we do not want to check if a container is empty until we are sure everything has had the chance to load. The for loop goes through everything in the array and the next couple of lines detects if the id in the array exists, checks the height of the corresponding container, and then if the height is 0 it will fill the container with your message.

You can either include this into your pages using the src attribute in the script tag or you can embed it directly into your pages.