W-Shadow.com

There’s been some controversy about the ethics of using Adblock. Webmasters want advertising income, users want a better browsing experience. Yadda yadda yadda. I can certainly sympathize with both sides of the debate – on the one hand, I hate intrusive ads as much as anyone. On the other hand, this site is mainly ad-supported.

But enough about that. If we lay aside the morality debate, do you know how big is the real impact of Adblock users on your site’s financial success? Perhaps you’re only “losing” 0.1% of your potential ad impressions. Or it might be over 50%. In any case, it wouldn’t hurt to have some actual numbers, right? I’ll show you how to get them.

Nuts And Bolts

We’ll need two things – a way to detect the Adblock extension, and a way to track the number of visitors that use it. For the first part, there’s a simple JavaScript solution posted in a StackOverflow thread that we can adapt for our needs. With a few minor changes, this script seems to work nicely with the latest version of FF and correctly detects Adblock Plus 1.0.1.

Tracking the Adblock users is a bit trickier. There are two choices here – either write a specialized web stats tool (a marvelous waste of time), or try to integrate the detection script with your existing analytics software (requires grokking the API). I decided to go the second route and use Google Analytics custom segments for this task. If you’re already using GA on your site, creating a custom segment is relatively painless (more on this later) and you get all the advanced reporting with no additional hassle.

Bringing It All Together – The Tracker

Place the below piece of code on every page where you want to track Adblock users. It doesn’t matter where exactly you put it, as long as there’s the GA tracker code on the same page, too.

Sidenote for WordPress users : The easiest way to install this script on your site is to put it in your theme’s footer. Go to Appearance -> Editor, click on Footer and paste the code just before the </body> tag.

<script type="text/javascript">
/* <![CDATA[ */

function checkAdblock() {
	if ( detectAdblock() ){
		trackAdblock('Adblock Detected');
	} else {
		trackAdblock('No Adblock');
	}
}

//Run checkAdblock when page is loaded
if(document.addEventListener)
	document.addEventListener("DOMContentLoaded", checkAdblock, false);

//adapted from http://stackoverflow.com/questions/2472/how-can-i-tell-if-a-web-client-is-blocking-ads
function detectAdblock(){
	//Create an invisible test image 
	var AbpImage = document.createElement("IMG");
	AbpImage.id = 'abp_detector';
	AbpImage.src = '/images/ad/banner.gif';
	AbpImage.style.width = '0px';
	AbpImage.style.height = '0px';
	AbpImage.style.top = '-1000px';
	AbpImage.style.left = '-1000px';
	document.body.appendChild(AbpImage);
	//Check if Adblock has tried to hide the image
	var AbpDetected = (ws_getComputedStyle(document.getElementById('abp_detector'),'display') == 'none');
	//Be nice - remove the image 
	document.body.removeChild(AbpImage);
	return AbpDetected;
}

//http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
function ws_getComputedStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
}

//Record Adblock state  
function trackAdblock(state){

	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}

	var current_cookie = readCookie('__utmv');
	if ( (current_cookie==null) || (current_cookie.indexOf(encodeURIComponent(state)) == -1) ){
		//Set the user-defined segmentation variable with the Google Analytics tracker
		if (typeof pageTracker != 'undefined'){
  			pageTracker._setVar(state);
	  	}
	}
}

/* ]]> */
</script>

Sorry for the lack of indentation – it looks like my syntax highlighter plugin has a few glitches.

Viewing The Results

Now that you’ve installed the tracker, you’ll probably want to verify that it’s working and see the promised statistics. To do this, you need to create a custom segment in your Google Analytics report. Okay, that’s an easy one.

1. Go to “Advanced Segments” and click on “Create a new customised segment”.

2. Expand the “Visitors” list and drag the “User-Defined Value” block to the empty box on the right. Select “Matches exactly” from the Condition dropdown, and enter “Adblock Detected” in the Value field. Finally, enter a suitable name in the Name segment : field and click on Create Segment. You can also click the Test Segment button to check the segment before saving, but this will only work if the tracker has already been running for a while and has recorded some hits.

3. Now, go back to the Dashboard and select the newly created segment from the “Advanced Segments” box.

The result :

Note that you’ll probably need to wait for a few hours – or even a full day – before the new stats show up in Google Analytics.

Final Mini-Rant

On a more personal note, it appears that only 5% of my visitors use Adblock. I believe this hardly merits more than a “meh” reaction 😛

And in case anyone cares about my stance on the ethics of ABP : at this point in time, there is no proper solution. Everybody wants free stuff. Everybody wants money. Consider the digital piracy debate – Adblock vs. Anti-Adblock is a more subtle manifestation of the same issues. And it doesn’t look like there’s a way out, not until we hit some kind of Utopia.