View source for Filling Blocked Ads with Ad Reinsertion - Ad Blocking

<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Measuring Revenue Lost to Ad Blocking|Previous]]<td align="center">[[Ad Blocking Survival|Table of Contents]]<td width="20%" align="right">[[JavaScript Obfuscation and Ad Blocking Detection|Next]]</td>
<tr>
<td width="20%">Measuring Revenue Lost to Ad Blocking<td align="center"><td width="20%" align="right">JavaScript Obfuscation and Ad Blocking Detection</td>
</table>
<hr>


<htmlet>ab_survival</htmlet>


At this point in the book we know how to detect and measure the presence of ad blockers when visitors load web pages from a website. This raises the question of what to do about the blocked ads. When an ad blocker is used by site visitors, spaces that once contained revenue generating advertising will either be empty, or will have been filled in by the surrounding content of the web page.

The next step, and the topic of this chapter, is to explore some ways to display alternative content in place of the blocked ads.
<htmlet>ab_survival</htmlet>
== How Ad Reinsertion Works ==

Ad reinsertion refers to the process of backfilling blocked advertising space on a web page with alternate content. As previously discussed, ad blockers prevent ads from appearing either by blocking communication with ad servers, or by hiding web page elements containing identification patterns that match entries in the ad blocking list (if, for example, a div element has a class name of “banner_ad” the ad blocker will hide this element from view).

If an ad has been prevented from appearing by blocking communication with the ad server, and the ad is not embedded in a div element that matches any ad blocker list entries, then the now empty element is essentially still displayed on the web page. Not only is this element still visible, it is also accessible to you via JavaScript code. If an element is both visible and accessible, you can write new content to it.

In the chapter entitled [http://www.ebookfrenzy.com/AdBlocking/index.html Ad Blocker Detection Techniques] we learned how to detected the presence of an ad blocker. In the JavaScript examples provided, the detection code simply outputs a message to the JavaScript console to report the detection of an ad blocker. The concept of reinsertion uses the same technique to detect an ad blocker, but goes one step further by writing new content to the blocked web page elements.

== Limitations of Ad Reinsertion ==

Before looking at some practical reinsertion implementations, it is important to be aware of the limitations of this strategy:

* An ad space cannot be backfilled with another advertising tag or any content that is delivered by a recognized ad server such as DoubleClick. This code will be blocked when it attempts to connect to the server providing the ad content. Use the space instead to encourage users to turn off ad blocking, or to run house ads to promote other products or services related to the content of your site.
* The original ad must not be contained within an element that will be identified as containing an ad. If it does it will be hidden by the ad blocker, along with any new content written to it. When giving the element that contains the ad an identifier, be sure to use a name that is not contained within any ad blocker lists. 
* It will be necessary to change the identifier of the element containing the ad should the current name be added to ad blocker lists in the future.
* Many ad blockers provide users the ability to block individual elements within a web page and there is nothing to stop visitors doing this on reinserted elements. On the positive side, however, the user will not only see your reinserted ad when it first appears, but will also have to right-click on it to access the ad blocker menu option to hide the element. If the ad is compelling and relevant, the visitor may actually click on it instead and make a purchase. Alternatively, include some of the main content from the web page within the same element as the reinserted ad. The visitor will then be unable to hide the ad element without also hiding the content they actually want to see.
<htmlet>ab_survival</htmlet>
== Implementing Ad Reinsertion ==

For the purposes of an example, consider a simple web page containing a 336x280 Google AdSense ad embedded within a <div> element. The HTML for such an element might read as follows:

<pre>
<div id="mydiv">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- Large 336x280 Rectangle Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-7393409012121212"
     data-ad-slot="6792121212"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</pre>
<htmlet>ab_survival</htmlet>
When a page containing the above element is loaded into a browser in which an ad blocker is enabled, the Google ad tag will be blocked and no ad will appear. Since the id name assigned to the <div> tag is not contained in any ad blocker blacklists, the element will not be hidden by the ad blocker, thereby leaving it open for alternate content to be displayed.

Using the example ad block detection code outlined in the chapter entitled [http://www.ebookfrenzy.com/AdBlocking/index.html Ad Blocker Detection Techniques], code can be implemented to display a house advertisement promoting some other form of revenue generating product or service, or even a donation request. The following code, for example, shows a fragment of the ad blocker detection code from the [http://www.ebookfrenzy.com/AdBlocking/index.html Ad Blocker Detection Techniques] chapter, this time implemented to reinsert an ad in the mydiv element with an image promoting a T-Shirt hyperlinked directly to a page where a purchase can be made:

<pre>
<script>
.
.
.
if(!ad || ad.innerHTML.length == 0
           || ad.clientHeight === 0) {
     console.log('Ad Blocker Detected');

     $("#mydiv").html('<a href= \
        "https://teespring.com/ios-swift-shirt"> \
           <img src="/images/shirt_image.png"></a>');

     } else {
       console.log('No Ad Blocker');
     }

   }, 2000);
}
.
.
.
</script>
</pre>

When a visitor loads the webpage containing the above code, the blocked ad will appear as illustrated in Figure 6-1:
 

[[Image:backfilled_t-shirt_ad.png|An example of ad reinsertion to fill blocked ad space]]

Figure 6-1


Ad reinsertion can be used to perform any form of promotional advertising as long as it does not insert content that would be viewed as advertising by an ad blocker. As classic mistake when using reinsertion is to use a blacklisted naming pattern when referencing images or scripts. Consider, for example, the following adaptation of the above example:

<pre>
$("#mydiv").html('<a href= \
   "https://teespring.com/ios-swift-shirt"> \
      <img src="/AdFiles/shirt_image.png"></a>');
</pre>

When the above content is written to the mydiv element it will be blocked because the image pathname contains “AdFile” which the ad blocker will detect as being ad related.

The reinserted content may contain any combination of images and text. Some web publishers simply display a text message within the blocked ad space appealing to visitors to disable ad blocking:

<pre>
$("#mydiv").html('<div style="display: table-cell; \
vertical-align: middle; background-color: orange;"> \
   <div style="text-align:center;  font-size: 250%;"> \
         Keep our content free. Please turn off your ad blocker. \
   </div> \
</div>');
</pre>

Figure 6-2 shows how the above HTML will be rendered when used to backfill a blocked ad:
 

[[Image:backfilled_turn_off_msg.png|An example of using ad reinsertion to fill ads removed by an ad blocker]]

Figure 6-2
<htmlet>ab_survival</htmlet>
== Choosing The Right Content ==

Clearly just about any content can be used to fill a blocked ad space as long as it does not take the form of an ad tag or any content delivered by an ad server. Wherever possible, however, try to promote products or services that are likely to appeal to your visitor demographic. In the above example, a T-Shirt designed for app developers was posted on a website that provides app development tutorials. This particular ad reinsertion campaign was successful because it promoted a product targeted specifically towards the interests of the site’s visitors. Other options for generating revenue from ad reinsertion can be found in the chapter entitled [http://www.ebookfrenzy.com/AdBlocking/index.html Seeking Revenue Beyond Advertising].

== Monitoring the Reinserted Content ==

From time to time a visitor to your site will object to the fact you are backfilling the ad space, no matter the relevance of the content. If the reinserted ad space becomes empty once again when using an ad blocker it is most likely that the <div> tag has been added to the ad blocker’s blacklist. The most widely used list is EasyList which can be reviewed at the following URL:

[https://easylist-downloads.adblockplus.org/easylist.txt https://easylist-downloads.adblockplus.org/easylist.txt]

Assuming that the tag you are using is named “mybackfill” and that your website domain name is mycompany.com, the entry into the EasyList blacklist will read as follows:

<pre>
mycompany.com###mybackfill 
</pre>

If you find an entry in a blacklist, simply modify the <div> tag name within your web pages and the reinserted content will once again appear when an ad blocker is detected.

== Summary ==

Just because an ad blocker has denied access to an ad server does not mean that the space once occupied by the blocked ad is no longer available to display other content. Ad reinsertion is a technique that allows alternate content to be displayed in place of blocked ads in the form of a request to turn off advertising, a house ad for a relevant product, service or sponsor, or even a donation request.