Detection Improvement: User-Defined Wrapper CSS Selectors

With no configuration, Ad Blocking Detector detects most browser ad blocker extensions and add-ons such as AdBlock, AdBlock Plus, and AdGuard. It detects these ad blockers by inserting bait content on your website, then checking whether that bait exists. Most ad blockers see this bait content and remove some of it, thus getting flagged as an ad blocker.

However, this methodology only works on ad blockers that actively search your page for items that resemble advertisements. Most ad blockers do this, but some extensions/add-ons, such as Ghostery, only prevent loading of content from known ad servers. Ghostery does not search for the bait content and block it. As such, a vanilla installation of Ad Blocking Detector can not find Ghostery.

 

For certain types of advertisements, however, you can give Ad Blocking Detector a little information that will facilitate detection of Ghostery-like extensions/add-ons. As an added bonus, it can also facilitate some performance-enhancing tweaks that I’ll talk about in another post.

 

The needed information is the wrapping element around your advertisement that does not disappear when ad blockers are enabled. This is the HTML element on your page that is empty when an ad blocker is active, and filled with your ad content when it is not active. You are going to find this element, then provide Ad Blocking Detector its CSS selector.

 

Don’t worry, I will explain how to do all this momentarily. But, before I do, I need to point out that this does not work with all advertisement providers. The provider must serve their ads in a way where a single HTML element is emptied by ad blockers, and that element cannot be an drawing content from a different URL, due to cross-domain security restrictions. Notably, advertisement providers that use a single element, like Amazon Associates banner ads will not work for this.

 

How To Find and Provide the Wrapping Element

If your advertisement provider serves their content in a suitable manner, this will easily be found using a web browser with the Ghostery add-on/extension installed. I recommend a recent version of Chrome, Firefox, Opera, or Internet Explorer for this procedure, as they all operate similarly; however, most any modern web browser will work.

As it is currently the most popular browser, I will be using Google Chrome in the screenshots and explanation below. I will show the process for a Google AdSense advertisement and a Chitika advertisement. Using the process described, you will likely be able to adapt the process to most other providers.

 

Before we begin, make sure you have a WordPress website with Ad Blocking Detector installed, a shortcode with your desired advertisement in the No Ad Blocker Detected field, that shortcode displayed somewhere on your site, and all your ad blockers temporarily disabled. The shortcode described in the How To Display a Simple Ad Using Alternative Content Shortcodes post on this website is a very easy shortcode to complete the following sequence on. Simply replace the advertisement code used in the example with yours, place the shortcode in a draft post, and preview that draft post.

 

Google AdSense Example

Here’s my starting point:

Step 1: Get an idea of what to look for

Let’s begin by looking at the advertisement code given by your provider. We are going to look for landmarks we can use in later steps, and give ourselves an idea of where to look later on. Here’s the advertisement code used for that Google AdSense ad:

We want to search that advertisement code for likely candidates for our wrapping element. Our first guess may not be correct; however, it’s a starting point.

First, there are two instances of

1 Comment


  1. Hello, nice plug-in. I have not implemented this detection improvement yet, but reading through this article I am wondering if it would work to put an ad inside a div with a special selector, and then feed that selector to ad blocking detector?

    Reply

Leave a Reply