View source for Truncating Web Page Content for Ad Blockers

<table border="0" cellspacing="0" width="100%"><tr>
<td width="20%">[[Tracking Response Rate to Ad Blocker Removal Requests|Previous]]<td align="center">[[Ad Blocking Survival|Table of Contents]]<td width="20%" align="right">[[Participating_in_the_Acceptable_Ads_Initiative_-_Ad_Blocking|Next]]</td>
<tr>
<td width="20%">Tracking Response Rate to Ad Blocker Removal Requests<td align="center"><td width="20%" align="right">Participating in the Acceptable Ads Initiative</td>
</table>
<hr>


<htmlet>ab_survival</htmlet>


A variation on the theme of denying access in the presence of an ad blocker involves displaying an abridged version of the content together with a message instructing the visitor to disable ad blocking in order to access the full page.

In this chapter the steps to truncate the content of a web page when an active ad blocker is enabled will be covered.

== Truncated Content ==

Rather than deny access through the presentation of a modal dialog, the concept of truncated content involves displaying just enough of the content for the visitor to fully appreciate the value of the website and to become sufficiently engaged to willingly disable ad blocking to access the remainder of the page.

Figure 13-1 shows an example rendering of this strategy in action:   


[[Image:truncated_example.png|An example of truncating content when an ad blocker is detected]]
 
Figure 13-1


In the above example, only the first few paragraphs of the page are displayed entirely, with the content gradually fading out in the third paragraph. The visitor is then encouraged to disable ad blocking in order to view the remainder of the page.
The amount of content to display while ad blocking remains active will vary depending on the content of the site. To avoid the visitor feeling misled, however, it is recommended that the cutoff point appear above or immediately below the fold (the “area above the fold” being the part of the web page that is visible without the necessity to scroll). Allowing the visitor to read 90% of the page before finding out that access is denied to the remaining 10% may, after all, leave the visitor with an unnecessarily adverse opinion of your website.

== Truncating the Content ==

This chapter makes the assumption that the main content of the web page is contained within a <div> element with an id of “container”, for example:

<pre>
<div id=”container”>
         Main Content Here
</div>
It is also assumed that the container has been configured with relative positioning:
<style>
#container {
    position:relative;
    padding:0px;
    margin:0px;
}
</style>
</pre>

The first step in this example is to implement some JavaScript code so that the content of a web page is truncated to a specified number of characters on the detection of an ad blocker. For this purpose, the standard ad blocker detection code will first be used as originally introduced in the chapter entitled [http://www.ebookfrenzy.com/AdBlocking/index.html Ad Blocker Detection Techniques]:
<htmlet>ab_survival</htmlet>
<pre>
<div class="banner_ad">&nbsp;</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
(function() {

        var detector = function() {
            setTimeout(function() {

                if(!document.getElementsByClassName) return;
                var ads =
                        document.getElementsByClassName('banner_ad'),
                    ad  = ads[ads.length - 1];

                if(!ad || ad.innerHTML.length == 0
                                || ad.clientHeight === 0) {
                    
                }

            }, 2000);
        }

        /* Add a page load listener */
        if(window.addEventListener) {
            window.addEventListener('load', detector, false);
        }
})();
</script>
</pre>

The code to truncate the content needs to be added to the body of the if statement so that it is executed on the detection of an ad blocker:

<pre>
.
.
.
if(!ad || ad.innerHTML.length == 0
                       || ad.clientHeight === 0) {
                    
                if(!ad || ad.innerHTML.length == 0
                                || ad.clientHeight === 0) {
    $('.container').each(function(){
        var length = 1600;
        var details = $(this);
        var original_html = details.html();
        var truncated_html = $.trim(original_html).substring(0,
            length).split(" ").slice(0, -1).join(" ") + " ";
        details.html(truncated_html);
    });

}
.
.
.
</pre>

The above code works through every element in the page with an id of “container”. For each matching element the HTML content is extracted, truncated to a length of 1600 characters and then placed back into the element so that it appears in abbreviated form within the browser window.
<htmlet>ab_survival</htmlet>
== Adding the Ad Blocker Whitelist Request ==

Now that the content is being truncated for ad blocking visitors, the next step is to insert a message immediately after the truncated content element informing the visitor that ad blocking must be turned off in order to continue reading the content. For the purposes of this example, the message is centered, displayed in green using a larger font which, in turn, requires an additional CSS style entry:

<pre>
<style>
#container {
    position:relative;
    padding:0px;
    margin:0px;
}

.ab_message {
    font-size: x-large;
    text-align: center;
    color: green;
}
</style>
</pre>

Next, extend the truncation code to insert the message after the container element as follows:

<pre>
.
.
.
$('.container').each(function(){
    var length = 1600;
    var details = $(this);
    var original_html = details.html();
    var truncated_html = $.trim(original_html).substring(0, length).split(" ").slice(0, -1).join(" ") + " ";
    details.html(truncated_html);
    $('<p class="ab_message">Please whitelist this site in your ad blocker and reload to continue</p>').insertAfter('.container');
  });
.
.
.
</pre>

At this point in the example, a page containing more than 1600 characters of content will resemble that shown in Figure 13 2 below when loaded into a browser with an ad blocker installed and enabled:


[[Image:truncated_example_no_fadeout.png|An example of truncated content displayed to ad blocking visitor]]
 
Figure 13-2

Whitelisting the site or disabling the ad blocker and then reloading the page will cause the entire page content to appear.
<htmlet>ab_survival</htmlet>
== Implementing the Fading Effect ==

The fading effect presents a less abrupt termination to the content and provides an intuitive visual indication that more content is available. The final step in this chapter is to implement this effect by overlaying a linear gradient on top of the container element.

Begin by declaring the style for the linear gradient (a different entry is needed for each of the major web browsers). This declaration can be added within the previously implemented <style> section as follows:

<pre>
<style>
#container {
    position:relative;
    padding:0px;
    margin:0px;
}

.ab_message {
    font-size: x-large;
    text-align: center;
    color: green;
}

#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:20; left:0;
    height:30%;

    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
</style>
</pre>
<htmlet>ab_survival</htmlet>
Next, a div element using the gradient id now needs to be appended to the end of the truncated content as follows:

<pre>
.
.
.
$('.container').each(function(){
    var length = 1600;
    var details = $(this);
    var original_html = details.html();
    var truncated_html = $.trim(original_html).substring(0, 
         length).split(" ").slice(0, -1).join(" ") + " ";
    details.html(truncated_html);
    details.append('<div id="gradient"></div>');
    $( '<p class="ab_message">Please whitelist this site in your ad blocker and reload to continue</p>' ).insertAfter('.container');
  });
.
.
.
</pre>

With the truncation code now fully implemented the truncated content will fade out before the request message appears:
 

[[Image:truncated_example_with_fadeout.png|An example of truncated content with fadeout displayed to ad blocking visitor]]

Figure 13-3

'''See it in Action'''

http://www.techotopia.com/survival/truncate.html

== Summary ==

An alternative to denying access to the content of a web page in the presence of an ad blocker is to display part of the content followed by a request to turn off ad blocking in order to gain access to the remainder of the page. This approach has the advantage of conveying the value of the content to the site visitor before imposing any access restriction. This technique can be achieved by truncating the content within specific elements of the page and placing a message immediately after the point of truncation. A gradient effect may also be added to make the termination of content less abrupt and to visually suggest the availability of more content.


<htmlet>ab_survival</htmlet>


<hr>
<table border="0" cellspacing="0" width="100%"><tr>
<td width="20%">[[Tracking Response Rate to Ad Blocker Removal Requests|Previous]]<td align="center">[[Ad Blocking Survival|Table of Contents]]<td width="20%" align="right">[[Participating_in_the_Acceptable_Ads_Initiative_-_Ad_Blocking|Next]]</td>
<tr>
<td width="20%">Tracking Response Rate to Ad Blocker Removal Requests<td align="center"><td width="20%" align="right">Participating in the Acceptable Ads Initiative</td>
</table>