An estimated 615 million devices are now using Adblock to … enhance their browsing experience.
 

I’m guilty too.
 

I’m constantly wondering why websites have huge chunks of empty white space, sometimes even in such prime positions as the homepage banner, before I remember it’s probably my little adblocking friend. Amazingly, this is often because regular site content is identified in the code as advertising, so the Adblock picks it up.

With Google rumored to be including ad blocking in future releases of Chrome, the world’s most popular browser, these chunks of empty space will likely become familiar to more and more users over time.

top_image.jpg

It’s not a pretty situation with some fairly imperfect workarounds available (see below for actual code examples):

  1. Currently, many sites interrupt the user to request turning the adblocker off. However, with Google now penalising pop ups this may have a downside and, as adblock is ever evolving, might not actually keep working
  2. You can also implement so-called ‘graceful fallbacks’ for Adblock usage to ensure your template doesn’t break and there is some kind of back up content or placeholder to manage it

That’s more people than those using IE11 and you’re probably still testing for that.

coloured_image.jpg

Tech talk

Developer Tip #1: To prevent template issues when a banner is not shown due to Adblock

Wrap your banner image in a div container. Set your banner image dimension on the div container. This is to ensure the layout of your page is kept in place when Adblock removes the banner image.

Code

HTML
<div class="banner-container">
     <img src="http://ad-image.png"/>
</div>

CSS
.banner-container,
.banner-container img {
     width: 300px;
     height: 250px;
}

 

Developer Tip #2: Graceful fallback for missing images

You can avoid seeing big blank white space by giving a background to the div container. In the below example, we added a background color. You could also set a background image there if you like, but this would load two images, reducing page load speed and penalising those who don’t use Adblock.

Code

CSS
.banner-container {
     ...
     background-color: #e8e8e8;
}

example-1.jpg

Developer Tip #3:

Check out this handy dandy list of filter rules, including URL patterns and element selectors (and more), to avoid if you want to give your content the best chance of surviving a block.

Bonus Tip: You could even have text copy saying something like “Removed by Adblocker” in the CSS.

Code

CSS
.banner-container {
     ...
     position: relative;
     z-index: 1;
}
.banner-container:before {
     position: absolute;
     content: 'Removed by Adblocker';
     z-index: -1; // Hide the text behind the image if it shows up
}

example-2.jpg

We don’t recommend this because it assumes that the cause of an image not showing is Adblock when it might just be slow to load in browser.

My advice:

Remember to test your site with adblock enabled and do what you can to work around it, because anywhere up to 20% of your users are seeing that version of the site. And definitely make sure your banners and anything else that is ‘internal advertising’ is coming through.

Go back to Digital Marketing