Blocking Adblock

A Cat and Mouse Game


Banner ads are annoying. They are the most annoying thing on the Internet today, with the arguable exception of Game Invites on Facebook (no, I don’t want to play Candy Farm Whatever, thank you very much). Webmasters (do we still call them webmasters?) will tell you, though, that they’re a vital part of the Internet and if you want free(ish) content you must endure the ordeal.

Well, I’ve been on both sides. In fact, for the last 6 years, I’ve worked for the online gambling industry, the fiercest advertisers online. I know the tricks of the trade and how you go from showcasing banner ads to cashing in the revenue. Yes, blocking ads hurts website authors but not blocking them usually hurts user experience. Apparently, it is a zero-sum game.

Most websites have been abusing the annoying ads bandwagon for a long time and the solution for most Internet users came in the form of Adblock and Adblock Plus, two browser add-ons that save my sanity every single day. They work by hiding the offending elements with CSS and removing them from the DOM using Javascript. It’s all pretty simple, there are these lists of rules called “filters” that match the properties of ads and that the add-ons use to know what to send to oblivion.

These rules are written by people who contribute to the filters and they can be very simple or very elaborate. For example, if you look at Easy List (the default filter for ABP), you find that elements with a class of “Adsense” or an id of “AdArea” will be matched and one or more CSS rules will be applied to hide them, like these:

.Adsense, #AdArea {
display:none;
visibility: hidden;
opacity: 0;
}

But that’s just the tip of the iceberg. In fact, Ad blockers will also use Javascript to apply inline style, remove elements from the DOM and even prevent scripts, iframes and windows from loading by blocking the network connection to known offending domains. And all that spells trouble to web developers.

One of the problems I had to deal with the most in the last few years was a rule that blocks anchor elements used by Betfair affiliates:

a[href^="http://ads.betfair.com/redirect.aspx?"]{
display: none;
}

This became a nuisance because we’d been replacing all instances of the word “Betfair” with an anchor tag on our main website. And these weren’t exactly intrusive ads, people knew they were going to be redirected to a Betfair promotion page by clicking on the anchor.

There are many ways to get around this, the most simple I can come up with is changing the href attribute. You see, the rule above states that the style should be apllied to any anchor that has an href attribute starting with “http://ads.betfair.com/redirect.aspx?”. If we just change something like the protocol to either the current protocol or https, the rule will no longer be matched:

<a href="http://ads.betfair.com/redirect.aspx?pid=xxxx&bid=xxxx"> This will be blocked </a>
<a href="//ads.betfair.com/redirect.aspx?pid=xxxx&bid=xxxx"> This will NOT be blocked </a>
<a href="https://ads.betfair.com/redirect.aspx?pid=xxxx&bid=xxxx"> This will NOT be blocked </a>

But this won’t work with every URL out there and, due to other unrelated problems that I needed to solve at the time, I went with another solution: URL shorteners. Now, don’t go using bit.ly just yet because most ad networks still track where clicks come from. If you’re redirecting your traffic to another domain which will then send them to the final destination, the ad network may not be able to count that traffic as coming from your website. The good news is that you can run your own URL shortener on your own domain. Even if you don’t want to run a URL shortener, you can simply build an intermediate page to redirect traffic to the final destination. Your anchors will work without being blocked and you don’t even have to write any server-side code (or client-side, for that matter). Just link your anchor to an HTML page with this inside the head tag:

<meta http-equiv="refresh" content="0; url=http://ads.betfair.com/redirect.aspx?pid=xxxx&bid=xxxx" />

This should be enough for most publishers to get away with well-placed ads but some butthurt website owners have gone one step further and they started blocking Adblock. But how do you do that? Piece of cake, just put an ad on a page, see if Adblock has done its job and, if it has, punish the user with an oversized overlay. Like this:

<a id="makeMyDay" href="http://ads.betfair.com/redirect.aspx?pid=xxxx&bid=xxxx">Respect my authoritah!</a>
<div id="oneHugeOverlay" style="display: none;">
Oh... You're breaking my balls, man.
</div>
<script type="text/javascript">
(function() {
'use strict';
var testDiv = document.getElementById('makeMyDay'),
alertDiv = document.getElementById('oneHugeOverlay');
if (!testDiv || testDiv.offsetHeight === 0) {
alertDiv.style.display = 'block';
}
})();
</script>

And now you can’t see the content of the website unless you turn off Adblock or whitelist the page (queue in evil laughter). But you see, this doesn’t work properly either. Firstly, you’re driving visitors away: they can’t reach your content either because of the overlay or because of the ads. Secondly, they can use Adblock to hide the overlay just as easily as they can hide any other annoying element on your page. Once the overlay is gone, it’s business as usual.

But just like when they first blocked those who blocked ads, website authors can also block those who block the blocking of Adblock. Or they can just leave you a friendly message under all the ads, like FontSquirrel does. This is what’s left when their bottom banner is blocked:

FontSquirrel’s message to the ad blocking bastards
Font Squirrel relies on advertising in order to keep bringing you great new free fonts and to keep making improvements on the generator. If you are seeing this message, you probably have an ad blocker turned on. Please consider disabling it to see content from our partners.

You know what, FontSquirrel? I think not. Admittedly, FontSquirrel is not amongst the worst offenders: they have fixed places for their ads which don’t get in your way and they’re usually not too flashy so you can easily develop banner blindness and still let them make a buck or two. But the thing is we shouldn’t have to settle for this mediocre experience.

We’ve seen the same cat and mouse game happen with music piracy. Now you have services like Spotify where you can listen to music for free and still let the artists and record labels earn their fair share, either by also listening to some tolerable ads or by paying a subscription fee for extra features.

Webmasters complain about Adblock just like cab drivers complain about Uber and, just like cab drivers, they fail to address the situation properly. Sure you’re at a disadvantage but you’re also still sitting there, whining, instead of innovating. You don’t win your customers back by placing the blame on them!

YouTube is another great example of innovation. Authors are paid a share of the revenue generated by the ads displayed when people watch their videos. And even before Adblock blocking those ads became a problem, sponsors were moving to other marketing strategies. They started sponsoring individual channels, promoting reviews of their products and engaging with the public in more pleasant ways.

So, you see, this is not a zero-sum game and what website authors must realize is that using Adblock is not wrong, their business model is.