Make Sure to Test Your Site With Adblockers Enabled

Today, we had two of those super-frustrating, but ultimately educational moments in web development.

We loaded up a new image to our site. It seemed to work perfectly in some browsers, but it absolutely refused to show in others.

Here’s how the image should have appeared, on our login screen.

And here’s how the same screen appeared in several different browsers. The main image with 3 people just completely failed to load:

We went round and round for 30 minutes trying to debug the problem.

Finally, it dawned on us that the problem browsers had Adblock software installed. The name of the image was book-club-dashboard-ad-big.jpg, and Adblock was apparently blocking it because of the -ad- in the name.

We changed the image name to book-club-dashboard-image-big.jpeg and everything worked perfectly. I mentioned the problem on Twitter and Chad Windangle responded this way:

I've had that issue before. Other things that are black listed are things like "lead", "tracking", "pixel" etc..

— Chad Windnagle (@drmmr763) April 3, 2017

Walt Sorenson chipped in with this advice:

also avoid "banner" in image, position, css naming for the same reason.

— Walt Sorensen (@waltsorensen) April 3, 2017

I’ve also seen claims that adblockers will filter out images that use standard banner sizes such as 460 x 60 and 728 x 90.

Apparently, there are blacklists of file names and URLs that are shared by many adblockers. There’s a list of blocked URLs that you can find on Github, and also some general adblocking rules for images.

A little while later, we were testing a new banner for on the site, and it just wouldn’t appear on mobile devices. All we saw was a blank area above the orange line.

Thanks for the our experience earlier in the day, the problem was easy to fix. The div containing the banner had a class called “div”. A mobile adblocker called NeverAds was hiding the banner. We changed the name of the class, and the banner showed again:

Conclusion

There are so many different adblockers that it’s difficult to provide blanket solutions. There are also significant differences between different adblockers, and between desktop and mobile versions.

I’ve seen adblockers wreak havoc with Javascript sites but as adblockers get more popular and more aggressive, even old-fashioned CSS and HTML sites need to adjust.

In your future development work, you would be wise to avoid normal advertizing conventions on image sizes and naming. And, make sure to include browsers with adblockers on your list of things to test.