Ad block no ads. As bloggers, many of us rely on adverts for income. A new danger is shadowing that income though; the ad blockers. We have already asked whether ad blocking is moral or not, but regardless of the answer, people will continue to use it.

If you’re looking to protect your income, you need a solution to this problem. Blocking all FireFox users is not a good solution, and even blocking only those using the extension isn’t ideal either.

The Answer Is To Hide an Image

In the morality discussion, we came to the conclusion that whilst ad blocking may not be moral, and while it may damage the internet as a whole, it will continue to be used because it suits individuals. And therein lies the answer.

If you want to stop the ad blockers, you need to make having the ads disabled worse than having them enable plea to the user to re-enable your ads.

To do this, simply add an image beneath your ads. Normal users will never see the image, but the ad blockers will.

Of course, if your adverts are pop-ups, CSS overlays and such, then the ad-enabled version will always be too annoying, meaning that this won’t help you at all. Online those who use less obtrusive, inline adverts (Like Adsense) stand a chance. That way you are allowing users to do what they want to do, whilst still achieving your site’s own goals.

The Code

Your HTML will not change much. Take whatever ad code you have, and wrap it in two divs, as shown below:

<div class="nameyourdiv">
<div>
## Ad code here ##
</div>
</div>

Now, add the following to your CSS:

.nameyourdiv, .nameyourdiv div {
margin:0;
padding:0;
}

.nameyourdiv div {
height: 280px;
width: 336px;
background: url(nameyourpic.gif) 10px 10px no-repeat;
}

You have to make 2 changes to the CSS above:

  1. Replace the values of height and width with the height and width values of your advert.
  2. Replace the nameyourpic.gif line with the URL of the image you want to use, relative to the stylesheet’s location (Important – Make your image 20px shorter and 20px thinner. This is a precaution to prevent your ads from being seen under rounded corners.)

How To Use This Effectively

It is still possible for ad blockers to block this advert and background image by removing the containing divs altogether. However, by making this as awkward as possible to do, we can ensure that most users will simply disable ad block for your site (Success!).

  • The divs are already awkward to disable. Thanks to the nested divs, the only way to do it is with some advanced selectors which the vast majority of users won’t know/care about.
  • Change the nameyourdiv and nameyourpic names to something unique. Create your own unique names so that ad blockers will have to create filters specifically for your site (Tip: Do not use names with either “ad” or “advert” anywhere in them).
  • Change the names every now and again. Very few users are likely to create the necessary filters, but if they do, you can break those rules simply by changing the nameyourdiv and nameyourpic names every now and again (This is only likely to effect regular visitors though, so it’s up to you to decide whether it is worth it or not).
  • Tell users why they are seeing the image. If a user is only seeing a “Haha. Got ya!” message, they won’t have a clue what’s going on. You don’t want to annoy them, you want to convince them to turn adverts back on, so tell them as much. “You wouldn’t be seeing this image if you hadn’t disabled my ads.”
  • Update (06/10/07): Thanks to the comments on this article, I’m changing this last point. Originally I suggested making the image annoying, but as you can read below, that may have more negative effects than positive ones. Instead, using an image with a message along the lines of “I need the adverts to keep this site running” may work on your more caring readers.

To conclude, I want to re-emphasize that I’m not out to attack ad blockers (I do agree that there are certain ad types that need to be blocked!), but there are many bloggers who rely on their modest ads for some reimbursement for all their work. I’m trying to help them here, and at the very least, I never want to find another site blocking me just because I use FireFox…

Enjoy this post? You should follow me on Twitter!