Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.

By Josh | August 26, 2008 |

1. Download jQuery and install Goolge Analytics.

Go to jQuery.com and get the latest version. Then add the script include into the header of your site.

Now go to Google Analytics. Set up an account and follow the directions to get tracking running. Go ahead, do it now, I’ll wait. You should now have some script on your site that looks like:

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));

var pageTracker = _gat._getTracker("YOUR ACCOUNT NUMBER HERE"); pageTracker._trackPageview();

2. Add the jQuery to start tracking links.

In the head section of your page, you will need to add a few lines of JavaScript. You will need to setup the jQuery .ready function and add the code to that.

$(document).ready(function(){

});

Next use a jQuery selector to select all a tags on the page with a rel=”external”. To do this, pass jQuery the a tag element with the attribute selector option.

$("a[rel*='external']")

with this we add a click function to our jQuery object.

$("a[rel*='external']").click(function(){

});

With the last part we put in the function call to the Google Analytics code and we pass it the href that our a tag is pointing to.

pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));

This code makes the call to Google Analytics and passes a page path of “/outgoing/” and the url of where the click was headed. In your Google Analytics under content, you will see pages that start with “/outgoing/”. These are clicks that took people off your site. See below for how it looks in Google Analytics.

Posted in JavaScript and tagged Google Analytics

76 Comments

Jared on August 27, 2008 at 7:11 am

Great tip, I’m going to implement this on my site asap.
Tracking outgoing links with jQuery and Google Analytics, in webtoolkit4.me on August 28, 2008 at 1:58 am

[…] Such a simple think but Google Analytics doesn’t provide something like this. It’s very easy though. Have a look at this tutorial from think2loud.com about tracking outgoing links. […]
Websites You Shouldn´’t Have Missed in August on August 31, 2008 at 2:09 pm

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
S A N D E E P [ I N D I A N I C ] » Blog Archive » Websites You Shouldn’t Have Missed in August 2008 on August 31, 2008 at 8:56 pm

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
D. Carreira on September 1, 2008 at 1:32 am

Nice!

Clean code and nice solution!

Thanks, David Carreira
rss blog » Blog Archive » Websites You Shouldn’t Have Missed in August 2008 on September 2, 2008 at 8:47 am

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Websites You Shouldn’t Have Missed in August 2008 on September 4, 2008 at 12:46 pm

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Websites You Shouldn’t Have Missed in August 2008 | POLPDESIGN on September 9, 2008 at 7:27 pm

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Technology Story» Blog Archive » Website You Shouldn’t Have Missed on September 15, 2008 at 11:11 pm

[…] – Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Conference Coordinator on September 25, 2008 at 8:08 am

That sounds excellent!

Will go try it now.

How do we do similar thing with clicks on email links?

Thankyou

Sarah
Outgoing Links Track Feature Enhancement on Google Analytics with jQuery « Analytics, Google, jQuery, Content, Overview, Note, URLs, Panel « Sharebrain on September 26, 2008 at 5:05 am

[…] This tutorial will show you how to enhance outgoing links track feature, simply by using jQuery on Google Analytics. The idea is to add outbound link tracking to a new or existing site. You’ll need to set your links to other sites with “REL” attribute, therefore jQuery can track them very easily.Somehow, by implementing this tip, you’ll get the all these benefits: * Unnecessary JavaScript to every link for tracking. * Simply work by inserting a click function to jQuery object to call Google Analytics * This code will pass a page path of “/outgoing/” and the url of where the click was headed. * Clearly display the outgoing URLs, total numbers of page views and its percentage on Content Overview Panel of Google Analytics.Note up this simple tips and you can start to implement it if you think this would be useful for your website analytics. 09.26.08 | Share it: […]
» links for 2008-09-01 | Paul Cowles on November 1, 2008 at 2:07 pm

[…] n Think2Loud » Blog Archive » Use jQuery with Google Analytics to Track Clicks on Outgoing Links Fro… […]
Matthew Pennell on November 22, 2008 at 2:02 am

Doesn’t this technique screw up your pageviews figures, though? Any page ‘hit’ recorded with _trackPageview() will add 1 to your pageview figures, so someone arriving on a page and then clicking an external link will record 2 pageviews.

You could search for all outgoing links and deduct that from the total, but it’s still something that could trip some people up.
Josh on November 24, 2008 at 7:17 am

@Matthew

Thanks for pointing that out. You are right it may add to the hit count I will test this on my site and see what it does. But it is the way Google recommends tracking outgoing links. You can see more info here.

http://www.google.com/support/googleanalytics/bin/answer.py?answer=55527&topic=11006
Ryan Lange on December 5, 2008 at 1:34 pm

I’m somewhat of a jQuery newbie, but shouldn’t this…

> $(a[“rel*=’external'”])

…actually be this…

> $( ‘a[rel*=”external”]’ )

…? (note the placement of the single and double quotes)
Josh on December 5, 2008 at 2:31 pm

@Ryan

Thanks for catching the typo i updated the article to be correct. Thanks again.
dj bayern on December 12, 2008 at 6:45 am

Thanks for good ideas and inspiration !!
Go-Gulf on January 12, 2009 at 9:10 am

I’m working for the Red Cross and we basically hve to different kinds of outgoing links. “Real” outgoing links go to another domain but also a lot of links that go directly to PDF documents that are hosted on our servers but which cannot be tracked with GA. Unfortunately I’m not fluent in Javascript – but am I right to assume that your script would not be able to show us people who “exit” to PDFs?
Josh on January 15, 2009 at 9:34 am

@Go-Gulf
The script should show those that also exit to a PDF as long as the link was marked as external. If it is not you would have to modify the script to look for links that went to PDF’s.
Victoria Whitehead on January 19, 2009 at 8:10 am

Hi there,

I can’t seem to get this to work. Maybe I understood it incorrectly.

Is all I need to do insert the following into my header?

$(“a[rel*=’external’]”).click(function(){
pageTracker._trackPageview(‘/outgoing/’+ $(this).attr(‘href’));
});

Or am I missung something??

Thanks
Josh on January 21, 2009 at 6:47 am

Hi Victoria,

Did you include jQuery? The code needs to be placed inside of jQuery’s $(document).ready function. If you can send a link to the file I will take a look at it.
Victoria Whitehead on January 21, 2009 at 7:07 am

Hi Josh,

I emailed it to the gmail account advised on Joshlyford.com

Thank you in advance. Your help is much appreciated. :-)
andy matthews on February 5, 2009 at 9:12 am

You don’t need to add a rel attribute to the link tag just to get tracking like this. If all you’re wanting is to get all links going to external sites/sources, just use this code:

$(‘a[href^=”http”]’)

if your site is set up correctly you’re using relative or absolute pathing for your internal links. This leaves only true external links using http in the href attribute.

This way you, or your content editors, don’t have to remember to add the extra item to your outgoing links.
trendbender on February 8, 2009 at 3:41 am

thx, really helpfull
Recent Faves Tagged With "jquery" : MyNetFaves on February 18, 2009 at 6:21 am

[…] links >> jquery Scripting: jQuery ComboBox dropdown list First saved by cabreu | 9 days ago Use jQuery with Google Analytics to Track Clicks on Outgoing Links… First saved by rascalking | 11 days ago Focus – Improving Form usability using jQuery First […]
Ultimate Collection of 40+ jQuery Tutorials and Resources | The Theme Blog on February 18, 2009 at 12:25 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Booto’Design » Blog Archive » 40+ jQuery Tutorials and Resources on February 18, 2009 at 9:37 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
Usare jQuery e Google Analytics per Tracciare Clicks in uscita dal tuo sito web | sastgroup.com on February 26, 2009 at 6:14 am

[…] completo: http://think2loud.com/2008/08/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-fro… […]
Usare jquery e google analytics per tracciare clicks in uscita dal tuo sito web on February 26, 2009 at 4:11 pm

[…] Articolo completo: http://think2loud.com/2008/08/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-fro… […]
40+ Excellent jQuery Tutorials | instantShift on February 27, 2009 at 2:34 pm

[…] Tutorial Link: Click Here […]
Sean Neilan on March 1, 2009 at 12:05 pm

Jquery only works if your pages are HTML compliant.

If your pages are HTML incompliant, you have to do this manually with the DOM functions in javascript.
DJ München on March 4, 2009 at 10:39 pm

Very good solution…. and clean code…. thanks a lot
86 jQuery Resources To Spice Up Your Website | Hi, I'm Grace Smith on March 20, 2009 at 11:20 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links […]
Jan Ditgen, Zauberer on April 7, 2009 at 3:55 am

Hey, it is quite complicated, but it is really worth the hassle. I took me 2 hrs until I had it run. special Thanks to eddy matthews, whos remark helped me to find my mistake. I used absolute paths for my internal linking, but thar didn’t work.
Again: great tool, it is woth the time you spent with it
Zauberer Jan Ditgen
Germany
DJ on April 9, 2009 at 3:18 am

Thank you. A very helpful tool!
Victor on April 9, 2009 at 2:55 pm

has the issue of double counting pageviews being addressed in the current code?

could you post the full code from start to finish? ( some of us who dont know any code at all will find it hard to piece it all together.) thank for a great solution.
Steve Purcell on April 12, 2009 at 2:32 pm

You can use the following jQuery selector to find all offsite links on a page, e.g. to track clicks or add a CSS class:

$(‘a[href^=http]:not(“[href*=://’ + document.domain + ‘]”)’);
Cigars on May 28, 2009 at 9:32 am

I’m really not sure how helpful this is. It’s a neat trick, but as far as tracking the links people click on to leave your site… why?
Tim on May 28, 2009 at 9:29 pm

Thanks for that!
I use the following:
$(document).ready(function() {
$(‘a[href^=http]:not(“[href*=://’ + document.domain + ‘]”)’).click(function() {
pageTracker._trackPageview(‘/out/’+$(this).attr(“href”));
});
});

cheers
Florian, Zauberer on May 31, 2009 at 4:45 pm

I like the tool, it really helps heaps.

Thank you and greets

Florian
John on June 9, 2009 at 9:39 am

I use the following:
$(document).ready(function() {
$(’a[href^=http]:not(”[href*=://’ + document.domain + ‘]“)’).click(function() {
pageTracker._trackPageview(’/out/’+$(this).attr(”href”));
});
});

worked for me!!

Seiko Ananta
SD internet on June 12, 2009 at 4:23 am

_trackPageview does what it says – tracks a page view. For tracking external links _trackEvent would be a much better way to do things.

http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html
Oleg on June 21, 2009 at 6:22 am

Hi,

I am not a programmer and instructions are not clear to me. Point 1 seems to be clear, but point 2 is not. For examle, ‘Next use a jQuery selector’. What is jQuery selector? Where do I find it?

I am looking for simple solution to track my outbound links.

Please, help.

Regards,
Oleg
Josh on July 6, 2009 at 5:02 am

I’m using jquery.gatracker.js so I had to use:
$.pageTracker._trackPageview(‘/outgoing/’+ $(this).attr(‘href’));
KonstantinMiller on July 6, 2009 at 1:02 pm

How soon will you update your blog? I’m interested in reading some more information on this issue.
david on July 9, 2009 at 11:02 am

GOOD Code!

Thanks for sharing man.
50 Useful New jQuery Techniques | Developer's Toolbox | Smashing Magazine on August 24, 2009 at 3:24 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques on August 24, 2009 at 4:06 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]

Roderik van der Veer on August 24, 2009 at 4:31 am

We are currently using the event tracking function of GA to do this like mentioned in the comments above. We also track downloads and mailto’s. We use the following code:

	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));


	try {
					var pageTracker = _gat._getTracker("UA-code-hete");
			pageTracker._initData();
			pageTracker._trackPageview();

		$('a').click(function() {
		  var $a = $(this);
		  var href = $a.attr('href');

		  if ( (href.match(/^http/i)) && (! href.match(document.domain)) ) {
		    var category = 'outgoing';
		    var event = 'click';
		    var label = href;
		    pageTracker._trackEvent(category, event, href);
		  } else {
		  	if ( href.match(/\.(doc|pdf|xls|ppt|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)$/i) ) {
			    var category = 'download';
			    var event = 'click';
			    var label = href;
			    pageTracker._trackEvent(category, event, href);
		  	} else {
		  		if ( href.match(/^mailto:/i) ) {
			    	var category = 'mailto';
			    	var event = 'click';
			    	var label = href;
			    	pageTracker._trackEvent(category, event, href);
		  		}
		  	}
		  }
		});
	} catch(err) {}

mahalie on October 27, 2009 at 5:46 pm

Thanks @Roderik

@Josh, you could alter your tutorial/tip to use _trackEvent which would fix the issue with false pageview count.

50 Useful New jQuery Techniques and Tutorials « Tech7.Net on August 24, 2009 at 4:55 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials on August 24, 2009 at 5:53 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
Wordpress Blog Services - 50 Useful New jQuery Techniques and Tutorials on August 24, 2009 at 9:47 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
AMB Album » 50 Useful New jQuery Techniques and Tutorials on August 24, 2009 at 6:07 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials - Programming Blog on August 24, 2009 at 7:16 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
100 jQuery Samples | Resources on August 24, 2009 at 10:55 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
100 jQuery live samples | CSS Experiments on August 24, 2009 at 10:57 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials | huibit05.com on August 25, 2009 at 8:53 am

[…] Author : admin Mr.D is a webmaster showcasing more about Design Inspirations, Freebies, Tutorials and Resources on the web. For more updates, follow us on Twitter […]
50 Useful New jQuery Techniques and Tutorials « Kata learns to code on August 25, 2009 at 11:16 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials « William Rodriguez Portfolio on August 26, 2009 at 1:24 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
8 Tips for Tracking With Google on August 26, 2009 at 4:34 pm

[…] event in analytics. Thanks to these contributers listed- for this idea — rebeccamurphey , think2loud and […]
Balaji on August 26, 2009 at 5:13 pm

Great article! Thanks for taking the time to explain Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. I’ve been thinking about similar topics lately, and it’s good to see that I’m not alone. What do you think about Customizing HTML forms with jQuery?
50 Useful New jQuery Techniques and Tutorials | MisrIT Reader (Beta) on August 27, 2009 at 3:55 am

[…] Use jQuer&#121&#32&#119ith Google Analytics to Track Clicks on Outgoing L&#105&#110&#107s From Your …Add outbound link tracking to a n&#101&#119&#32or existing site. Provided that your links to othe&#114&#32&#115ites have the REL attribute set, you can track the&#109&#32&#118ery easily with some help from jQuery. […]
Twitter Trackbacks for Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. | Think2Loud [think2loud.com] on Topsy.com on August 28, 2009 at 12:23 am

[…] link is being shared on Twitter right now. @linksgoogle, an influential author, said Use jQuery with […]
Script jQuery h?u d?ng « “Ngoc Design” on August 28, 2009 at 2:37 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials « Why Limit Media on August 28, 2009 at 11:10 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful jQuery Techniques « Daily Apps|Useful Online Resources Collection on August 28, 2009 at 9:41 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site. Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
Markus, Zauberer on September 4, 2009 at 1:07 am

Thanks for this peace of code. It helps a lot.
Advertisers Blog » Blog Archive » 50 Useful New jQuery Techniques and Tutorials on September 4, 2009 at 4:48 am

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
50 Useful New jQuery Techniques and Tutorials | Search Engine Optimisation on September 9, 2009 at 12:12 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
25 Essential Google Analytics Resources on September 17, 2009 at 1:00 pm

[…] 23. Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
25 Essential Google Analytics Resources | TwitTrix on September 18, 2009 at 6:23 am

[…] 23. Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site […]
50 jQuery Techniques And Tutorials | oOrch Blog on September 24, 2009 at 1:28 pm

[…] Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery. […]
78 jQuery Scenarios to Fall in Love | ProgrammerFish - Everything that's programmed! on October 7, 2009 at 11:14 pm

[…] 72)Use jQuery with Google analytics to track clicks on outgoing links from your site […]
Dirk Baumbach on October 28, 2009 at 4:19 am

A verry helpfull tool. Thank you. This toll ist perfekt for my Photographs Webseite in Germany. Regards from Cologne,
dirk