Oli Warner About Contact Oli on Twitter Subscribe

How to block Adblock

Monday, 3 September 2007 drm javascript webdev

With the way publishers go on about them, you’d be forgiven for thinking ad-blockers were going to destroy the universe. In a desperate effort to stem the whinging, I’ve written some code to help them be as obnoxious as they like on their own sites.

What I’ve written is technically DRM 2.0. Please don’t hate me.

2022 Update: In the time since this was written, both detecting and blocking detection of ad-blockers have come a long way. Indeed, Adblock Pro has been replaced by uBlock, and I’m sure in another 5 years, it’ll be something else.

I have updated the code and the test and they still work. In the future there may be a pure-CSS option available too but we’re not there yet.

Since ad-blocking began, the worst publishers have been the loudest voices in blaming them for falling revenue. But it’s publishers like these that abuse adverts, that abuse data collection, that abuse their visitors which is why I use an ad-blocker.

If you run a website it’s totally up to you how to handle my delinquency. Detecting an ad-blocker is simple.

Blocking Adblock, uBlock, Pi-hole, etc

For this to work we’re going to paint our advert inside an otherwise empty box. I’m going to use a lowly <div> and give it a name we can reference.

<div id="myTestAd">
<!-- advert code goes here -->
</div>

Normally we’d put our advert code in there, and the advert would load up, swelling the box. But if there is an ad-blocker in operation, the advert won’t load, the height will remain zero. Ad-blockers achieve this through a couple of mechanisms:

Our work to detect the blocking is simple. We wait 3 seconds, look for the element we declared, check its height and send an alert.

<script>
setTimeout(() => {
if (document.getElementById('myTestAd').clientHeight == 0)
alert("STOP BLOCKING MY ADVERTS!");
}, 3000)
</script>

Check out the test page

You can replace my alert(..) with your own action. You can show something else, add a CSS class, whatever.

Can’t you just block Adblock-blockers?

Of course.

Just as Adblock can detect the advert code, there could easily be code to detect Adblock-blocking code. In 2022, there are some rules to block third-party block-detection tools in my ad-blocker. This is a cat-and-mouse game where, ultimately, nobody wins. Agencies will update their code, a million open source people will update the Adblock definitions — ad infinitum.

But it should be important for content providers to recognise now that if their content is on the open internet, it is public. If you don’t like that, you could make the content loading contingent on the advert loading. It’s just as simple:

<script>
setTimeout(() => {
if (document.getElementById('myTestAd').clientHeight != 0)
load_content(...)
}, 3000)
</script>

But your content will be unindexed —and you’ll forfeit search engine traffic— unless you take extraordinary measures. It’s also a pretty horrendous thing to do to people who require the internet to work like it’s supposed to (eg who require accessibility tools). Do this at your peril.

So isn’t this DRM 2.0?

You could argue that placing checks on pages and preventing people who block advertising is managing what the user is allowed to do with the content (rights management). This is not something I believe is healthy for any medium, least of all the web. Restricting use restricts quality and usefulness.

So say it is DRM, and I implement this on a website, redirecting people to a block page, telling them to disable their advert blocker, does that mean my media, my webpage is protected by the infamous Digital Millennium Copyright Act (DMCA)? According to the DMCA it is illegal to provide tools that circumvent DRM — therefore making ad-blocker-blocker-blockers illegal.

Let’s piss all over that fair-use clause one more time. America truly is a scary place at times…

The moral arguments

There has been a range of comments from people in the past 15 years since this post was written. Most involve a belief that one should only see what one wants to see.

But producing content takes time. I mostly write for myself but the AdSense payouts are a nice bonus. If you’re a company with employees and shareholders, your drive is somewhat different to mine: you have to turn a profit, or at least attempt to. For them generating content costs real money.

If you don’t use a blocker and you don’t understand why somebody would, try one and have a surf around. It’s different and as time goes on, the difference is elongating. GDPR was supposed to make things cleaner but it’s still not uncommon for little regional newspaper websites to dump a hundred (no joke) different trackers on you, and as many advertisers. An ad-blocker there means the difference between having privacy and not.

If you run a website that relies on ad revenues, you’ve got a choice. It’s not my place to say what’s right for you, I’ve presented what’s possible. Most ad-block detection results in a banner message, or a recurrent pester message, or something else non-destructive. Most people understand the value, but aren’t going to pay Netflix money to view your website. Let people kick in pennies to turn ads off. It’ll likely be higher than your CPM.