How to Block the Advert Blockers

block advert blockers I 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" "https://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:

As the page is loaded, the main content is switched off for everyone and only the #blockermessage is shown.
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.
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.