Saturday, June 09, 2007

Tracking Outgoing Links on Blogger with Google Analytics

I use Google Analytics to track usage statistics on Cogitorium. This free service provides all sorts of interesting information about how visitors get to the site (including what terms they used in a search engine), where they are (network-wise and geographically), and which pages they read. Since the Analytics' mechanism for tracking is some JavaScript code embedded in the footer of each page that is tracked, Analytics can't automatically track which external links visitors use to exit the site. Fortunately, the Google team thought of this, and provides the urchinTracker() function, which may be called using the onClick property of an external link to track these clicks manually.

The example code Google provides is great, but I didn't want to have to modify by hand the anchor tag for every link I put in a post. Inspired by a utility by Ben Nolan [updated link], I cooked up a simple JavaScript routine that will automatically insert a link-specific urchinTracker() call for external links in posts. The code tags links only in the post body and excludes links within the same domain.

<script type="text/javascript"><!--
localDomain = document.URL.substr(0,
document.URL.indexOf("/",
document.URL.indexOf("://")+3) );
divList = document.getElementsByTagName('div');
for (j=0; divEl=divList[j]; j++) {
if (divEl.className != 'post-body') continue;
list = divEl.getElementsByTagName('a');
for (i=0; element=list[i]; i++) {
if (element.className = 'post-body' &&
element.href &&
element.href.substr(0,localDomain.length)
!= localDomain) {
element.onclick = function(){
urchinTracker("/outgoing/" +
this.href.substr(this.href.indexOf("://")+3)
);
};
}
}
}
--></script>
The code should be placed just before the </body> tag, after the normal Analytics code.

In addition to the external links in posts, I was interested in how often users click on the headlines I display using Google Reader's clip function. Coercing the clip anchors to include the onclick code was a bit more complicated, especially since the script appears to be either purposefully obfuscated or unfortunately arcane. After analyzing the code for quite some time, I managed to piece together the following solution:
window.setTimeout(
function()
{
for (j=0; j<window["GRC_c"]; j++)
{
divEl = document.getElementById('readerpublishermodule'+j);
list = divEl.getElementsByTagName('a');
for (i=0; element=list[i]; i++) {
element.onclick = function() {
urchinTracker("/outgoing/headlines");
};
}
}
}, 0);
When placed in the footer, this code should add hooks for Analytics tracking to all of the Google Reader clips in the document. I chose to have all headline clicks dump into the same virtual page for tracking purposes, but one could just as easily track individual headlines.

1 comment:

Michael Culbertson said...

I discovered recently that the code no longer functions. Blogger apparently changed something in the template-interpretation code so that all the line breaks were removed from the script. As a result, Firefox (perhaps other browsers, too) ignored the script since it was all on the same line as the <!-- lexeme.

Taking a tip, I switched the <!-- and --> to //<![CDATA[ and //]]>, and now everything's back to normal, as far as I can tell.

I would mention that those who have switched to the new ga.js code should, of course, replace "urchinTracker" with "pageTracker._trackPageview".