How to Block the Advert Blockers

Tweet

block advert blockersI recently wrote an article about why it’s important to choose file names that are not inadvertently blocked by ad blockers. The comments revealed that advert-blocking technology annoyed many site owners. Why should they produce premium content if they can not receive revenue in return?

Detecting for the presence of advert blockers is not possible. Different implementation technologies are used and they are not necessarily embedded in the browser. Ad blockers also work in different ways: some use a long list of advertiser domains whilst others use regular expressions to suppress matching URLs.

Regular expression matching is used by one of the most popular blockers, Firefox’s Adblock Plus add-on. However, we can exploit URL checking using a technique that prevents Adblock users viewing your content unless they disable the add-on.

Your HTML page should follow this example:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Advert Blocker blocking</title>
<meta http-equiv="content-language" content="en"><meta name="language" content="en">

<style type="text/css">
#content { display: none; }

#blockermessage
{
	font-weight: bold;
	text-align: center;
	padding: 4px;
	color: #fff;
	background-color: #c00;
}
</style>

<script type="text/javascript" src="/banner-advert.js"></script>

</head>
<body>

	<div id="content">
		<h1>Main content</h1>
		<p>This will be hidden to people using advert blockers.</p>
	</div>

	<div id="blockermessage">
		<p>Please switch of your advert blocker and enable JavaScript to view this page.</p>
	</div>

</body>
</html>

Explanation:

  • The main content should be contained within an outer element, such as <div id="content">.
  • You should provide an alternative message for people using an advert blocker, as shown in <div id="blockermessage">.
  • It is important that the first two CSS rules on the page style these elements. Since external CSS file can be blocked, I would recommend embedding it directly in the HTML. The #content rule must be set to display: none, whilst the #blockermessage rule can be styled big, bold or in any way you choose.
  • Finally, an external JavaScript file is included. This should be given a file/folder name that will trigger ad-blocking rules, e.g. banner-advert.js.

The code for banner-advert.js:


// reveal content to those not using an advert blocker
if (document.styleSheets && document.styleSheets.length > 0) {
	var ss = document.styleSheets[0];
	var bRule = (ss.cssRules ? ss.cssRules : ss.rules);
	if (bRule.length > 1) {
		bRule[0].style.display = "block";
		bRule[1].style.display = "none";
	}
}

It works in the following way:

  1. As the page is loaded, the main content is switched off for everyone and only the #blockermessage is shown.
  2. For most people, the banner-advert.js code is executed immediately. This alters the embedded styles so #content becomes visible and #blockermessage is hidden. It occurs before the main content is displayed so users should not see any difference.
  3. AdBlock will spot banner-advert.js and refuse to load it. The styles are not modified so the main content remains hidden.

That should please many premium content site owners. But — hold back — I strongly recommend you do not implement this on your web site! There are a number of technical issues and blocking the blockers is futile … see Why Blocking Ad Blockers Will Fail.

See also: Why File Naming is More Important Than You Think.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • I’m an ad blocker

    I use adblock+ on all my computers. If a site doesn’t want to share “Premium” content, then start charging for it. Most ads are an annoyance that can be done without!

  • adblocker

    If a site blocks my ad blocker, it is a reason to not visit that site anymore, no matter how nice the content might be. I use an ad blocker to keep from being distracted by obnoxious flashing ads that keep drawing my eyes away from the content.

    If you want me to read your ads, make sure they are restrained and tasteful, and fit with the content. Then I would consider not using an ad blocker in the future and I might be persuaded to actually click on them once in a blue moon.

    Remember newspapers? They have ads that are not flashing at you or overlaying the text you try to read. Emulate those and the audience will thank you.

  • Michael Hansen

    I’m pretty sure all this would really do is start an ad blocking arms race.

  • Tarh

    You mentioned this already, but I’ll clarify for developers who think they’ve just found the holy grail: AdBlock has an exceptions facility. So, the maintainers of the subscription lists simply have to add banner-advert.js to the exceptions list.

  • Jaap

    I’m detecting blocked ads on my site but not denying people content if they use an ad blocker. Instead I use the reserved ad space to show a small text asking people to unblock my site. I even have a link in that text providing a simple filter subscribtion for ad block plus that does nothing but unblock my site.

  • http://www.halbrooktech.com mhalbrook

    Too bad so many vendors/advertisers work with ad networks, that means if I want to promote a company, 99% of the time I have to use the #$)(* ad networks. I’ve got a couple local targeted sites I’m working on,I plan on selling advertising the old-fashioned way, talk to the business and work out a direct agreement.

  • Michael

    This is crap. What about users who decide to switch off Javascript? They can only see the content if they also switch off CSS. And there’s another point… switching off CSS will display the content. Plus you could just get Firebug and change the #content style to display:block to view the content without disabling AdBlock.

    Not sure why you bother to way until tomorrow’s post to explain these flaws. Essentially you’re saying “here’s a crap article, tomorrow I’ll explain why it’s so crap”.

  • Radu C

    I have a personal ad policy that generally goes like this:
    1. All ads are enabled by default because they generate revenue to the site owner so I don’t have to pay for it.
    2. If the ad is flashing like mad telling me that I just won something, or that I have an unread message, etc., I block the entire ad provider, but leave the rest of them working.
    3. If the ad has sound (with or without me triggering it by hovering with my mouse), I block it.
    4. If it’s a popup, popunder or JS “div” window over the content, I block it, and make a mental note not to recommend that site to anyone.
    5. If my clicks are hijacked to go around the popup blocker, I make a mental note to press Alt+F4 as soon as the popup shows up, so I don’t see it anyway.

    I like Google AdSense: Sensible ads. They don’t annoy, they don’t interfere, they don’t mess with my head. And I actually go to some of the advertised websites out of genuine interest. Flash banners are ok too, even if they do interactive stuff as long as they keep to their side of the page.

    Ad blockers appeared because advertisers started to be cocky and not mind the user anymore. And instead of saying “yeah, we pushed our luck” they started a war against blockers, becoming even more obnoxious.

    Personally, I’d dump any advertising network that annoyed my customers, mainly because they’d annoy me first.

  • heggaton

    I agree with @adblocker.

    I personally am happy to see ads but if a site chooses to use ridiculous ads that flash, move, distract in any obnoxious way, I will block either the ad in question or the ads for the entire site.

  • http://autisticcuckoo.net/ AutisticCuckoo

    Oh, brilliant solution! Now you’re adding a requirement to have JavaScript enabled just to see a static web page. Did you ever hear about something called ACCESSIBILITY?

    If you don’t earn the millions you expected when littering your site with annoying advertisement, perhaps it would be better to revise your business model than to invent new impediments to accessibility and usability.

  • http://www.optimalworks.net/ Craig Buckler

    @AutisticCuckoo
    Totally agree – come back later for more reasons why blocking ad blockers won’t work.

  • Rajaeskharan

    Ad blockers will cause significant loss of revenue. You have put a lot of effort into putting an article together with screenshots and video recording. This content has to cost the visitor something. Our content solves a problem that the visitor has when they view our content. Even if it is looking at ‘flashing’ and ‘annoying’ advertisements. Imagine asking time magazine to remove their ads and send us just the articles. What would they say?

    Just because the content is online, people seem to get an entitlement attitude. I say, if the adblockers’ argument is that “I can easily get the same content elsewhere, without your ads”. Go ahead.

  • http://www.optimalworks.net/ Craig Buckler

    @Michael

    Essentially you’re saying “here’s a crap article, tomorrow I’ll explain why it’s so crap”.

    The comments on the file naming article indicated that many site owners would block content from AdBlock users if they knew how to. This is one of the simplest solutions you could implement and I’m sure some will try it.

    The single point made by this article is that blocking ad blockers is possible. The next article will list several important technical and business flaws you should consider before doing so…

  • http://www.jasonbatten.com NetNerd85

    Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

    This article and your “bio” don’t align.

  • http://www.optimalworks.net/ Craig Buckler

    This article and your “bio” don’t align.

    I wrote it in IE6 ;-)

  • http://charlessweeney.com Charles Sweeney

    I only use text links for ads, and I restrict the number of them. This way my visitors don’t get annoyed, and my advertisers get a better deal. Before you tell me the down side of (some) text links, I use the nofollow attribute so my advertising customers and myself don’t get penalised by Google.

  • Stevie D

    The fact that you have to say “I strongly recommend you do not implement this on your web site!” shows what a stupid idea this is.

    Most web users hate adverts – fact.
    If you block them from accessing your website unless they look at adverts, most of them will just go elsewhere – because they object to having adverts forced on them, because they don’t trust you not to be doing anything dodgy, or just because they don’t really understand what’s going on.

    Banning users from seeing your website unless they enable adverts is on a par with disabling right-click. It causes unnecessary problems for people wanting to use the website, it fails to achieve anything much because it can be avoided, it makes some people more determined to subvert the ‘block’ and just turns others away.

    If you want to make your site into a laughing stock, go ahead and block advert blockers. If you’ve got any sense, don’t bother.

  • http://www.jasonbatten.com NetNerd85

    I wrote it in IE6 ;-)

    lol

  • Andrew

    Not only is this approach dreadful for accessibility but Google won’t index your content either.

  • Michael

    Blocking Ad blockers is a dangerous game, you’re going to annoy your users to the point that many of them will leave, devaluing your site, thereby decreasing revenue. Is it worth it? I seriously doubt it.

    As others have pointed out its not so much the ads in general, as it is the annoying ones that sit over top of the content, flash incessantly, have audio that starts automatically, etc. And worst of all, some of them are so poorly designed that they actually slow a user’s system down. These are the ones I block.

    Additionally we’re constantly saying that we need to design our sites in a manner that doesn’t interfere with a user’s preferences, blocking ad blockers is doing exactally the opposite of what we’re preaching.

    So go ahead, block my ad blocker, I’ll go somewhere else. Your’s isn’t the only game in town.

  • http://www.optimalworks.net/ Craig Buckler

    @Andrew
    Yes, it’s dreadful for accessibility, but Google will still index the content. In fact, Bing would even show a clip of the (potentially hidden) text.

    @Stevie D
    It is a totally stupid idea. Blocking the ad blockers is futile on so many levels, but it doesn’t stop some site owners thinking this sort of technique is viable. Hopefully they’ll also read the next post…

  • http://www.jasonbatten.com NetNerd85

    Hopefully they’ll also read the next post…

    You could have made them by integrating it into this one but you didn’t!?

  • http://www.optimalworks.net/ Craig Buckler

    You could have made them by integrating it into this one but you didn’t!?

    It was originally, but it became far too long and had too many points. Anyway, it’s now available – read Why Blocking Ad Blockers Will Fail

  • SpacePhoenix

    Could the technique described be classed as cloaking, which if I remember correctly will get a site banned from search engines. If a site gets banned from search engines, it won’t get found very much and the sites revenue would then drop a lot more.

    Also anyone who uses the noscript FireFox add-on would not see the content. If the technique breaks accessibility then the site could perhaps fall foul of accessability laws.

  • http://www.optimalworks.net/ Craig Buckler

    @SpacePhoenix

    Could the technique described be classed as cloaking…

    That’s an interesting thought. IMHO, I wouldn’t have thought so – most people and search engines will see the page as you intended. Only those modifying the page themselves – via AdBlock or disabling JS – would have a different experience.

    Strictly speaking, I doubt it’s breaking accessibility laws either (they’re not that specific). You’re only preventing access for “unsupported” browsers and providing alternative content telling the user how to fix the problem.

    That said, it goes against the spirit of accessibility. If you want to hide premium content, then make people register or pay for it. That’s a far better overall solution than content blocking.

  • http://autisticcuckoo.net/ AutisticCuckoo

    You are not providing alternate content, you’re just providing a rude message which many non-savvy users wouldn’t even understand.

    And you’re not telling the user how to fix the problem, if that user is unable to enable JavaScript. For instance, using a public computer in a library, or in a corporate environment where scripting is disabled centrally or blocked by a firewall.

  • Shady Aidy

    I would in this situation produce ‘premium content’ in such a way that e.g. premium images get blocked. The user can still read the article I’ve produced but won’t get the really nice high res piccys – maybe modify this approach so that they only get a grainy low-res image instead?
    I stand on both sides of the fence here – I don’t use adblockers directly because I don’t agree with them, but I do add an entry to my hosts file in order to block ads that either give me Javascript pop-up errors (in IE – poorly coded JS powered adverts popping up debug alerts all over the place p!$$ me off more than annoying adverts – and don’t tell me to use FF, browser zealots – it’s MY choice, I’m comfortable with it and like it. I use FF for testing and development only) or induce migraines.
    I know that adblockers have ‘exceptions’, but, not having any imperative data at hand to go on, I would rely on the good old human psyche to tell me that the average user who uses an adblocker will rarely, if ever, grant an exception.

  • http://www.optimalworks.net/ Craig Buckler

    @AutisticCuckoo

    You are not providing alternate content, you’re just providing a rude message which many non-savvy users wouldn’t even understand.

    Hold on there! Website owners can use whatever text they like … they could provide highly detailed instructions, or even a summary of the premium content the user’s missing. The example above is brief – because it’s an example!

    But what makes you think ad-blocking users are non-savvy? Could a novice install Firefox and AdBlock then add regex rules? It also takes a little knowledge to disable JavaScript and doing so blocks many adverts too.

    My point is: yes you can block the blockers, but you will cause accessibility issues and harm your business

  • http://autisticcuckoo.net/ AutisticCuckoo

    But what makes you think ad-blocking users are non-savvy?

    I didn’t say ad-blocking users are non-savvy. But it’s not impossible that non-savvy people use ad blocking. Perhaps a more savvy friend or relative installed it for them? Perhaps the company IT department did?

  • http://www.optimalworks.net/ Craig Buckler

    @AutisticCuckoo
    Ok, but corporate and public environments tend to have locked-down PCs. Those users won’t be able to enable JS or disable a blocker, so detailed instructions would be useless … you might as well keep the “rude” message!

    Joking aside, this all leads us to the same conclusion: blocking the blockers is not clever.

  • Patrick

    IMHO not a good approach for three reasons:
    1. Most website owners use some kind of CMS, hacking around in it is usually not a good idea (think: updates).
    2. If someone uses an adblocker, s/he effectively makes the statement: I won’t click anyway. Trying to force those people to see banners is a vain attempt for PPC ads.
    3. Someone, who does not click on ads may still give backlinks.

  • http://blog.whitesites.com WhiteSites

    This is a bad idea. Google now checks back clicks to evaluate if a site has relavent content for search. So if a person finds your site with google, and then immediately are hit with an pop up asking them to unblock something, some users might just hit the back button, in which google will consider negative for the site.