Detecting Ad Blockers on Your Website the Easy Way

October 19, 2013

Readers are getting your rock-solid news content for free. Some readers don’t even want to pay the relatively minor toll of seeing ads on your site. What can you do?

As the developers of an adserver, you can imagine we’re sort of opposed to ad blockers − the most famous being the AdBlock Plus browser plug-in. While we believe in readers’ freedom of choice, we believe more strongly in helping grow the businesses of independent publishers and helping establish their mission.

This is a code snippet that we’ve used in the past week to annoy readers on Genesee Sun who have ad blockers in place. Before you use it, read below for our own take on the pros and cons of using it.

This code snippet will display a short message to the user on every page load. You can change that message.

It encourages readers to disable ad blocking from your site, which is as easy for them as a couple of clicks. There is also a commented-out line for directing these readers to a donation page if you really want to annoy them. This script works in modern browsers (IE9+, Chrome, Firefox) and will exit gracefully if it’s an older browser.

Just for kicks, we’ve enabled this script on this page so you can see it in action if you have AdBlock Plus installed.

<div class="afs_ads">&nbsp;</div>
<script>
(function() {
    var message = "We've detected that you have an ad blocker enabled! Please enable it and help support our work!";

        // Define a function for showing the message.
        // Set a timeout of 2 seconds to give adblocker
        // a chance to do its thing
        var tryMessage = function() {
            setTimeout(function() {
                if(!document.getElementsByClassName) return;
                var ads = document.getElementsByClassName('afs_ads'),
                    ad  = ads[ads.length - 1];

                if(!ad
                    || ad.innerHTML.length == 0
                    || ad.clientHeight === 0) {
                    alert(message);
                    //window.location.href = '[URL of the donate page. Remove the two slashes at the start of thsi line to enable.]';
                } else {
                    ad.style.display = 'none';
                }

            }, 2000);
        }

        /* Attach a listener for page load ... then show the message */
        if(window.addEventListener) {
            window.addEventListener('load', tryMessage, false);
        } else {
            window.attachEvent('onload', tryMessage); //IE
        }
})();
</script>

This is something in which you may want to enlist the help of a developer.

Why Would You Want to Do This?

Here’s a short list:

It’s the Principal of the Thing!

You spend your days chasing down stories in town, closing advertisers, and trying to grow your business. Some readers are getting free content which you worked hard to produce.

Personally, we feel that as long as ads aren’t hideously obtrusive, readers should consider seeing advertisements as a form of payment.

You Run Network Ads

Some ad networks pay on a CPM basis − that is, they pay based on the total number of impressions their ads get. If someone is running an ad blocker, your revenue is being cut down by the folks who decided they shouldn’t see ads on your site.

This also applies to networks that pay on a per-click basis like Google. But you might imagine that users who are actively blocking ads aren’t likely to intentionally click on an ad in the first place.

You Want to Send a Message

When this script detects and ad blocker, it displays an editable message that says something about your mission as a town publisher, and can even direct them to a donation page. This gives you the chance to − well − send the reader on a minor guilt trip. After all, it’s incredibly easy for a user to disable AdBlock Plus for a single site, and they will hopefully be amenable to it.

Why Wouldn’t You Want to Do This?

When might it be a good idea to let the gripes go?

Swipers Gonna Swipe

Like we said above, those who actively block ads aren’t likely to click on them. If you’re showing ads that have no shot of being clicked on, it could take a toll on the click-through rate of an advertisement: More views, same clicks.

The Thought of Potentially Driving Away Some Readers is Scary

If you use the snippet above, ad-blocking users will see the pop-up every time they click into a new page. That may end up annoying some folks. But after all, where else are they going to get such awesome content? The Pennysaver? Patch?

Conclusion

If you’re a do-it-yourselfer, just place that code at the footer of your page template, right before the closing </body> tag. Reach out if you need help!

PS: On WordPress, this is usually the footer.php theme template file.

PPS: We’re thinking of writing a simple WordPress plugin to make this work. Let us know in the comment section if you’d like this sort of thing.