Part 1 - How ad-blocking works?

In this first of a six part series, ‘All about ad-blocking’, we start by covering a semi-technical explanation of how ad-blocking works. While the concept of ad-blocking is quite simple there are a number of misleading thoughts such as (i) Native advertising is a solution to ad-blocking and (ii) advertisers do not pay for blocked ads. Both of these concepts are inaccurate. However, armed with a few simple tricks and a better understanding of how ad-blocking works, publishers should be able to determine for themselves the true impact of ad-blocking on their website.

Ad-blocking methods

While it’s true to say that ad-blocking software can and often does block more than advertising on a publisher's website, this article focuses on the methods used by such software to block the successful delivery of online advertising only. In a future post and of interest even to publishers without any advertising on their website, we will cover the topic of “Ad-blockers - Blocking more than ads”.

In order to clearly understand how ad-blockers work, let’s first get a basic understanding of how a simple advert is displayed on your web page in the first place.

While displaying of the advert on a webpage takes a number of steps as can be seen in the slides above, the overall process of serving an ad can be broken down into two main stages:

  1. Loading of an advert’s resources, for example, images, video stylesheets, iframes, etc
  2. Rendering and displaying those resources in the context of the web page

When a website visitor has an ad-blocker active, such as Adblock Plus, Adblock, uBlock Origin or indeed any kind of ad-blocking software, one or both of the above stages in serving an advert is blocked. From this we can establish that there are two methods of blocking.

  • Network level ad-blocking
  • Cosmetic ad-blocking

Network level ad-blocking

Network level ad-blocking relies on blocking requests for some of the webpage’s resources by the ad-blocking software. The ad blocker, which can intercept ALL network requests, determines which requests are allowed and which are blocked. We refer to this method of blocking as network filtering.

The most common such resource requests which are blocked using network filtering are as follows:

  • Advertisements (e.g. images or iframes containing ads)
  • Analytic tools (e.g. Google, Adobe Analytics, HubSpot, Mixpanel, etc). A direct consequence of blocking these is that almost all websites which have ad-blocking visitors have significant amount of their tracking / analytic data blocked.
  • Social media / Content sharing buttons

In order to define, customize and widely distribute filters that maximize blocking efficiency for network filtering, ad-blocking software use various User Generated Content lists which act like a database of filters for what should and should not get blocked. While there are many blocking/filter lists available on the internet, the most popular user generated lists deployed by ad-blockers today are EasyList followed by another sometimes optional filter list called EasyPrivacy. It is these filter lists which are at the core of what ad-blockers block.

Taking a closer look at these filter lists we can see that blocking rules can be defined per site or globally to all websites giving great flexibility on what can be blocked. All filters are translated into what are called regular expressions internally within the ad-blocking software, even filters that have not been created as regular expressions. For example, the filter ad*banner.gif| will be translated into the regular expression /ad.*banner\.gif$/.

If a requested web page resource of a visitor with an ad-blocker installed matches one of the ad-blocking defined filters (e.g. URL contains the keyword adsense or ads), then the ad-blocker prevents it from loading by simply blocking the request before it is ever executed.

To help with this explanation of what is happening, below you can see the same presentation as before but this time showing what happens when an ad-blocker is in place.

Cosmetic ad-blocking

Cosmetic blocking, instead of or in addition to network blocking, blocks advertising after it has been delivered to the web page. See point 8 in slide deck above. This is not good news for advertisers here if they are without the help and validation of viewability software and as result of cosmetic blocking can end up paying for ads never seen.

Sometimes ads which were blocked by network filtering results in an empty space remaining on the web page where the ad was supposed to be. However, cosmetic ad-blocking can tidy this up and remove the empty space created by that network blocked advert. Because this method of ad-blocking has effect on how the originally served content looks, it is often referred to as element hiding or cosmetic filtering.

Using this method ensures that ads are completely removed from the rendered page and even content that is part of the web page itself for example, native ads, can be blocked.

Just like network filters, cosmetic filters rely on a set of rules that identify ads using patterns in the website’s HTML content. Elements can be identified in various ways, for example by their id, css class name or indeed any other attribute.

Here’s an example of how cosmetic blocking works on the page. Without an ad-blocker active, when I do a simple search for “buy furniture”, I get a google ad in the search results, in this case “Ad - Green Charity Shop”. This ad cannot be blocked by network ad-blocking as it is an integrated part of the page and included in the same resource as all the other results.

However, using for example Adblock Plus and refreshing the page makes the ad disappear. The ad did actually load, but using cosmetic filtering, the ad-blocker no longer displayed it to the visitor.

So there you have it, that is how ad-blocking works in general and in a subsequent article we will show you how to make an assessment of your own website to see exactly what is getting blocked for you.