Updated: 08/03/2011 – Added a live example of blocked non-ad images.

Note: This post is not condoning tricking users by trying to slip advertisements past ad-blocking plugins. The purpose of this article to to help keep actual content from incorrectly being labeled as advertisements, and thus hidden from visitors.

As someone viewing websites on the web, ad-blockers filter out adverts for “enhancements”, and a bunch of flashing, ugly advertisements. Not only this, but ad-blockers can help protect you from potentially sneaky and malicious code.

This is why one of the most popular downloads for Firefox and Google Chrome is ad-blocking extensions.

However, have you thought about the reverse? What is the effect of ad blockers on your website or the sites you design for clients?

Is my coding style or design choices limiting what’s viewable to visitors because it’s being incorrectly identified as advertising content by ad-blockers?

Choose Your Class and ID Names Carefully

You may reason, “I don’t have to worry about ad-blockers because I don’t have any advertisements on my website”.

While you may not have a single ad on your site, the names you give your classes and ID’s matter.

Classes and ID’s containing keywords like banner, ban, ad, advertisement, etc may get flagged incorrectly by a visitor’s ad-blocking plugin.

Important sections of information may never show on the screen because of this.

Avoid:

<p class="panel banner" id="bannercontent1">Real content. Not an advertisement. But still blocked.</p>

Better:

<p class="panel section" id="section1">Real content. Not an advertisement.</p>

Remember, elements with classes and ID’s that contain any filtered keywords run a high risk of being blocked by ad-blocking extensions. In theory, an ID or class named ‘bandaid‘ may get filtered as an ad.

Safe Choices For Classes and ID’s

What are safe choices for classes and ID’s?

While there’s no way to know exactly what custom keywords people will add to their blocking list, a good rule of thumb would be to look at the keywords that are contained in the default filter list. This list can usually be found in the ad-blocking extension’s settings.

Avoid using classes or ID’s that contain any of the keywords on the filter list.

Choose Your Images Carefully

You should also pay attention to your choice of images.

Since ad-blockers cannot actually view the contents of an image, they identify advertisements by relying on both the image filename and image dimensions.

Image Filenames and Directories

Images that contain banners, ban, ads, advertisement, and so on in their filenames may very well get flagged as an advertisement and get removed.

Let’s look at a real-life example of this in action:

IQ’s website lists their expertise: Strategy, Digital, and Advertising. Each has it’s own image/icon. However, with Adblock Plus installed, the icon for Advertising does not appear at all.

IQ's icon blocked

IQ's Advertising icon blocked by Adblocker Plus (Firefox)

As you can see, the image that should be above the Advertising header, is completely gone.

However, with Adblocker Plus disabled, the image appears (see below).

IQ's image unblocked

IQ's Advertising icon appears with Adblocker Plus disabled on the site.

In this case, the reason the image is incorrectly flagged as an advertisement is the filename: advertising_0.jpg.

Now in this case, it’s a perfectly appropriate filename. However, this image is clearly not an ad.

I have seem other sites that suffered from this issue in more obviously unfortunate situations (image that was blocked was not in a section dealing with advertising). So this is something to keep in mind. I once had an image blocked because it had the word ‘cookie’ in it. But that was a rare case.

You should also be aware of the directory names you choose. For example, using directories that contain words commonly used in banner advertisements are fair game for ad-blockers.

Image Dimensions

Your images’ dimensions matter. Images that have the same dimensions as common banner sizes run a high risk of getting wrongly blocked.

Common ad sizes (in pixels):

  • 728 × 90
  • 468 × 60
  • 234 × 60
  • 180 × 150
  • 125 × 125
  • 250 × 250
  • 88 × 31
  • 120 × 600
  • 160 × 600
  • 336 × 280
  • 300 × 250

Source: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

If Unsure, Test

If you’re not sure, download an ad-blocking plugin for your browser and test your design before going live.

This may involve checking your ad-block plugin settings as well. You may have set some rules that apply for your own site, so it’s always good to re-check your settings to be sure it’s turned on for testing.

Similar Posts: