How Ad Blockers Cause “Ghost” UI Bugs That Are Difficult To Test, Difficult to Detect

An ad blocker Issue

Users often install various extensions in their browsers and one the most common extension used by most of the people is an Ad blocker. An ad blocker is a piece of software that continuously keeps watching what is being loaded into the browser and controls which content would be rendered. It filters out the content that matches certain rules and then the browser renders the page for the user without those contents. These sometimes can break the website and cause issues that are hard to track.

Some common ad blockers that are being used frequently

There are quite a few ad blocker extensions available out there. If we look at the chrome web store we can make a list of a few very popular ones.

Some of them have over 10 million downloads. This is a clear sign that developers or site builders should be aware of these extensions when they are creating their site. Although it is not implied that ad blocker will always break a site or create a hard to track UI issue, there is a possibility.

A Real time scenario

Let’s take a look at an example. Here, we will break a website with an ad blocker. Our choice of ad blocking extension is the uBlock Origin and we will be working on a page of the Smart Financial website. We can follow the below procedure to create a bug.

Install and activate the uBlock Origin extension
It is not mandatory but we can also give the extension permission to run on incognito mode.
We visit the web page: smartfinancial.com/get-fast-quote.html#/car-1-year
Now we will be trying to select a vehicle year. It won’t do anything.
If we disable the extension and reload the site again then the buttons will work.

So, what is happening? If we open the developer console, we will see that there are bunch of errors in the console and all are same:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

By examining the urls we can understand that there some tracker and ad service url are being blocked but it also blocked some URL that has caused the website to malfunction. We can further confirm this error by checking the network waterfall.

The status of the blocked urls are not any HTTP status. These are blocked from the client side, meaning these requests didn’t reach their destinations.

How this can affect the business

A study from the second quarter of 2020 on ad blocker usage in the United States, found that 45 percent of respondents aged 15 to 25 said that they used an adblocker. The same was true for 42 percent of respondents between the ages of 26 and 33 as well 46 and 55 years. So it is clear that a large portion of internet users use some kind of ad blocker in their browser. By now we know that ad blockers have the potential to break a website. And a dysfunctioning website drives it’s users away. Users generally don’t want to return to a website that was malfunctioning. And it is uncommon for a layman user to check if the fault is in their browser extension and disable their ad blocker. If a website drives its user away then is definitely wrong for the business.

How ad blockers blocks contents

Ad blockers generally use two methods to control contents in the webpage-

HTTP Request Blocking
CSS Rules to Hide Elements

HTTP Request Blocking

In this method the ad blocker listens to the outgoing requests and blocks anything from known ad platforms. Most of the advertising on the web relies on the javascript ad tag. These tags request an ad server to show ads on the web page. Ad blockers identify these requests by using regular expression and anything that matches a specific pattern in the outgoing url it will be blocked.

CSS Rules to Hide Elements

If the ad is a custom native ad which is coming form an in-house ad server, ad blockers find an alternative way to block these ads by hiding the ad contents from the webpage using CSS. Ad blockers make use of regular expression in this method as well.

Solving the problem

From the user’s perspective, the first and the easiest solution is to use incognito mode of the browser. Browser extension needs explicit permission to work on incognito mode. So, if permission is not given then, any ad blocker extension will not work in incognito mode. There are options in the ad blockers to whitelist some sites as well.

For the developers, site owners perspective, keeping a check in the urls patterns is the way to to. The static resources should be renamed in such a way that these won’t fall into the common regex pattern of ad blockers and get blocked.

What Bugmuse can do

Keeping the UI non-responsive behaviour in the primary focus, Bugmuse has developed a strategy for the developer to test their site for potential UI bugs. By including a script in you html bug muse will report your potential UI issues. Under the hood, it captures a screenshot of the UI every 300ms and compares it before and after an UI event has occurred. If it detects multiple UI events (eg. clicks) with no changes, it reports a bug. It would be very useful for the developers to identify if a bug is caused by an external program.