Selling ads is one of the main income sources for publishers and online businesses. But most publishers show more than just few couple ads per site, or annoying ads, that make us users get an ad-block client to surf safely on the internet. Using an ad blocker is also known to save you more on data usage, and browse faster as those extra content ads are not loaded. That’s why as a publisher we see that a good percentage of our traffic is from users blocking ads, and we want to show them fallback and alternative content instead.

You can have alternative ads that are not blocked by ad blockers, such as images linking to an affiliate website, like an amazon product or an SEO service, make sure you don’t mention the word “ad” or “banner” or such thing in the image source, or link CSS selector, or anywhere as ad blockers block content with these things.

This tutorial will be focusing more on Google Adsense, since it’s the most popular advertising business out there, but it’s pretty simple to implement this for any other advertising service.

Using Simple CSS and JavaScript to show alternative content for ad blockers

We can get started by adding a default class to our body tag:

<body class="no-ab">

Now you can see we added the class no-ab which stands for no-adblock (we don’t want to use that full term in there, adblock might end up blocking the whole document). Now when the document loads at first, the body will have that class attached, and yet we do not know if the user does not use an ad blocker and therefore we consider them as a non ad block users.

Adding a fallback image or content

We’ll be adding a simple image with a link to some random site, but you can add your custom content to show for ad blockers here, make sure to add the class ab-fallback to it as it will be used to show/hide these elements for ad blockers and non ad blockers:

<p class="ab-fallback">
  <a href="http://google.com" title="adopt a kitty">
    <img src="https://lorempixel.com/200/200/cats/" />
  </a>
</p>

Hiding the fallback content/image by default

The fallback and alternative content should be hidden by default, and only shown when we detect an ad blocker is in the house. We can do this with CSS:

body.no-ab .ab-fallback { display: none !important; }

That’s to be added to your main CSS file or the head part of your HTML document.

Now what?

Now we have the alternative content (a fallback linked image in our example) hiding by default. We will proceed now to detecting the ad block presense using JavaScript.

This technique is very simple, we know that ad blockers block the JavaScript libraries for the ad services, you can see “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” errors in your browser console while you have an ad blocker and trying to load a JavaScript library for ads. We’ll use this to get us going.

We have this script which we use to load the JavaScript library for Google Adsense:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Now Google gives you this script to paste it into your site whenever you create an ad unit, it is attached to the ad unit code, so a pro-tip is load this script only once and remove it from all the ad unit codes if you have more than 1 ad unit. This script belongs to the footer of your site (right before the body closing tag), so add it there once and it will work for all the ad units you have on your content.

We’ll be using onerror attribute, which gets triggered whenever an error happened and the script (our ad library code in our case) is failed to load, which means in our case whenever ads are not showing, so this can also work for cases where ads are not showing not due to the presense of an ad blocker, but to other reasons like a low connection, a DNS issue, etc. Let’s get back to our tutorial.

If we change our adsense script code to this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="alert('Error loading ads library!')"></script>

and activate an ad blocker, and try to load our page, it will throw an alert saying “Error loading ads library!”. Good. We can now use this to remove the no-ab class from our document body tag, and that is all, the fallback image and alternative content should start showing now, and it will be displayed to the ad blockers:

document.body.classList.remove('no-ab')

The full script tag:

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  onerror="document.body.classList.remove('no-ab')"
  ></script>

That should be it. If I refresh the page with an ad blocker active, then I am seeing a cute kitty with a link saying “Adopt a kitty”. Wonderful!

Other Libraries

You can use the same method with other libraries script tags as well, it should work flawlessly and it is relatively light and only uses 1 line of CSS code, and another line of JavaScript code.

Tutorial Source Code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body.no-ab .ab-fallback { display: none !important; }
    </style>
</head>
<body class="no-ab">

<p class="ab-fallback">
  <a href="http://google.com" title="adopt a kitty">
    <img src="https://lorempixel.com/200/200/cats/" />
  </a>
</p>

<script
  async
  src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  onerror="document.body.classList.remove('no-ab')"
  ></script>
  
</body>
</html>
Digital Ocean

Cheap Cloud SSD Hosting

Get a VPS now starting at $5/m, fast and perfect for WordPress and PHP applications

Sign Up with $10 Credit