Use AdBlocking in your Dev Environment
Be careful how you name those <div>s
I used to turn off all browser extensions while developing Web Apps locally to avoid unintended code injections into my pages. However, a few months ago, while I was writing an integration for a client into officeroo.io, I started receiving bug reports that some of the images on our page are not loading. Strangely, everything worked fine for me…
… Until I installed an AdBlocker. You see, an AdBlocker is a browser extension which filters out advertising and tracking code from the web pages that you visit. It does so either by using a list of CSS selectors to hide elements on the page, or by blocking entire domains from being requested by the browser.
AdBlocking is a hard problem. It’s a continuous cat-and-mouse game between the volunteers who maintain the filter lists (see EasyList for instance) and Ad Networks who keep changing their code. It is impossible to filter out some ads without using CSS selectors, which means that you, an innocent Web Developer, should pay attention and not get caught by these filters while developing your ad-free product.
With over 30% user penetration rate in the USA and similar statistics worldwide, users who installed some form of AdBlocking are likely to represent a large chunk of your audience. It is your job as a Web Developer to make sure that you deliver the best possible experience to as many of your users as possible, regardless of whether or not your business is supported by ad-related revenue.
What does this mean in practice?
Fighting against your <div> IDs and class names
Let’s start simple. Did you know that, depending on how you name your div IDs and classes, AdBlockers decide whether or not to display your content?
<div id="ad_div"> You won't see this </div>This is kind of obvious if you think about it. You just claimed that you are showing an ad on your page. Whether or not that is true does not matter much, the AdBlocker will just hide it.
But you have a beautiful SaaS product, ads are not your thing, you should be safe, right?
<button id="adv_top"> You won't see this </button>Well naming things is a hard software problem. If you have a button that advances the checkout process and it happens to be placed at the top of the page, you’d better not call it adv_top or your users will not know what to do next.
Alright, so no ads or things that rhyme with ads?
<div class="banner_slot"> You won't see this </div>Oh, the synonyms. Of course! Make sure you have Thesaurus open when you name things. Do not name your <div>s Banner, Sponsor, Commercial, Marketing, Affiliate, Reklam, Publicity, Pub (careful drinkers) or other related terms.
So no ads, rhymes of ads, or synonyms…
<div id="content_mpu"> You won't see this </div>MPU being… Mid-Page Unit, or allegedly a 300 x 250 pixel banner that sits somewhere in the middle of your page. I found a dictionary full of these terms and there are many of them. For instance, be mindful of DFP (DoubleClick For Publishers) and OAS (Open Ad Stream).
So no ads, rhymes of ads, synonyms or acronyms of ad networks…
<div class="ddb"> You won't see this </div>
<div class="rec_title_footer"> You won't see this </div>
<img src="criteo.png" alt="You won't even see this">Don’t forget the ad companies either: DDB, Criteo, Taboola, REC and others.
Is that all?
<div class="brave-overlay"> Don't be brave or you won't see this </div>Maybe…
What should you do as a Web Developer?
Remembering the rules above is futile. The filter lists are updated several times a day and there is no way to stay on top of it. Here are few things that might work instead:
- Use an AdBlocker inside your Development Environment to identify issues early
- Be mindful your components ids and class names to reduce the chance of being filtered out
- Use AdBlocking in your Selenium Tests.
- Write a tool that checks all your pages against all known ad filter lists and add it to your Continuous Integration workflow. (If such a tool exists, please let me know and I will add it here.)
Happy Coding!
Other interesting resources:
Hey there, Andrei here. If you enjoyed the article and want to make sure you know about my next one, you can sign up with your email address below. I only send blog-related updates and have a zero-spam policy.
Gain control over your news, do not let the corporation algorithms decide for you!
