Updated Script for Tracking Outbound links In Google Analytics with jQuery

Monday, December 08, 2008

Chris Coyier recently with a snippet of some code I use on a for work. The code snippet uses Google Analytics and jQuery to automatically track outbound links. At the time, that script looked at the existence of “http://” in the link URL to decide whether or not to attach the behavior. The new, updated script enhances behavior by comparing the link’s domain to the current page’s domain and if they are different, triggers the behavior. This is helpful for CMS or other tools that may generate full URLs including the http:// instead of just relative ones.

The New Code:

$('#content a:not(.popupwindow)').filter(function() {
	var theHref = this;
	if (theHref.hostname && theHref.hostname !== location.hostname) {
		$(theHref).not(".noAutoIcon").addClass("offSite");
		$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
			var code=event.charCode || event.keyCode;
			if (!code || (code && code == 13)) {
				if(pageTracker){
					var fixedLink = this.href;
					fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
					fixedLink = '/outgoing/' + fixedLink;
					pageTracker._trackPageview(fixedLink);
				};
			};
		});
	};
});

What’s Different

I’m not going to re-post the detailed description of what the script does. You can go view for that. I’ll just go over what’s different now:

1. First, you’ll notice I use a different “not” clause in the selector. This is because on the updated site, I have separate “turn off” classes for different functionality. In this scenario, we only want to turn this tracking off if we don’t want automatic popups. The automatic off-site link icon creation is separate and I wanted that managed separately.
2. Next, the code saves the href to a temporary variable and compares the current hostname to the link’s hostname.
3. You can see now where I look for “noAutoIcon” to conditionally exclude the application of an “offSite” class, which displays a special icon next to that link.
4. Finally, the exclusion class for “noAutoLink” is checked and the click/return event bindings are made. This is the same as the old script.

Enjoy! Let me know if you have any questions.

Category:

Web Design

Tagged With:

webdev webdesign javascript google analytics links popup analytics jquery

Posted By:

Ian Pitts

Posted:

12/08 at 12:19 PM

Views:

15939

Short URL:

Related Blog Posts:

• The New Safari 4 Beta and Javascript Speed
• Akismet for ExpressionEngine
• ExpressionEngine Plug-ins I Can’t Live Without
• What’s that site built with?