Saturday, March 30, 2013

How to Detect Ad Blocking using Javascript and Google Analytics Event Tracking

For website publishers that depend on ad revenue, an increasingly pressing question is what is the percentage Internet users are actively using the ad blocking plugin AdBlock Plus or similar adblocking plugins, such as NoScript and Ghostery? Research by ClarityRay, in an answer on Quora, has produced statistics stating that on average about 9% of ad impressions may be blocked, that ad blocking is higher in the US and Europe, and that users of Firefox and Linux have an ad blocking rate of about 18% and 29%, respectively. In the case of Firefox, AdBlock Plus has over 15 million daily active users and the ad blocking rate for Android users is gaining to the point that Google has recently taken the step of removing Adblock Plus and similar ad blocking apps from its Android store Google Play, probably in an effort to defend Adsense.

Probably more important for Google Adsense publishers interested in adblocking rates is not how many total active users are employing adblocking, but how many users are blocking their ads. This tutorial shows a simple example on how to to use Google Analytics Custom Event Tracking to detect blocked ads using Javascript; more information on Event Tracking can be here. NOTE: This will only work in the cases where Javascript is enabled and where Google Analytics is not blocked. Plugins, like NoScript, can block Javascript and plugins, like Ghostery, can block web tracking from Google Analytics and other services. This example has been tested using Google Adsense ads, but should work for other ad sources.

First, the page should be tracked by Google Analytics using code similar to the following:
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '...']);

  (function() {
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
Next, tracking blocked ads happens on an ad that is wrapped in a div tag. Here is the Google Adsense ad code wrapped in a div with the identifier "leaderboard":
<div align="center" id="leaderboard">
<script type="text/javascript"><!--
google_ad_client = "...";
google_ad_host = "...";
/* ad_unit_leaderboard */
google_ad_slot = "...";
google_ad_width = 728;
google_ad_height = 90;
<script src="" type="text/javascript"/>
Finally, we need a simple Javscript function that will track the blocked ads. The trackAdBlocking() function checks the size (using offsetHeight) of the ad
div, and if it is hidden, it sends a custom event message to Google Analytics. The  tracked event has three parameters: a category, an action, and an optional label. In the case below, it sends the action message "Hidden" if the ad is blocked and "Visible" otherwise.
<script type="text/javascript">
function trackAdBlocking() {
        var height = document.getElementById('leaderboard').offsetHeight; 
        if(height < 30) {
          _gaq.push(['_trackEvent', 'Advertisements', 'Hidden','Leaderboard']);
 } else {
          _gaq.push(['_trackEvent', 'Advertisements', 'Visible','Leaderboard']);
Google Analytics Custom Events will not appear for a day, but testing custom events is simple using either Chrome Developer Tools or Firefox with the FireBug plugin. With the page loaded in Chrome and the Developer Tools turned on, go to the Network tab and select the Path that starts with "__utm.gif?". In Headers on the right side, look under "Query String Parameters" for "utme". NOTE: There may be multiple entries for "__utm.gif?" in either Chrome or Firefox, the one with the largest value for "utms" should have the "utme" entry. There should be a message, like (Advertisements*Visible*Leaderboard) where Advertisements is the Event Category and Visible and Leaderboard are the Action and Label for the event, respectively. The events are tracked in Google Analytics under "Content" as shown below:

The process is very similar in Firebug. With the website loaded and Firebug turned on, enable the Firebug Net panel. Then expand the "__utm.gif?" option using the "+" button and under Params look for "utme".


Anonymous said...

Hopefully, ad blocking software will improve to the point that it starts to hurt sites that rely on advertising for their revenue. Sites with excellent content do not need advertising.

Gene Turnbow said...

That's pretty fatuous, frankly. Of course they need ads, the servers and all that aren't free. Somebody has to pay for them, and content sites can't actually charge you for the content. That's been proven not to work. All that's left is the ads, so this is a real problem.