Subscribers
Learn how to track outgoing links using Google Analytics & jQuery.
By default Google Analytics will track the exit page, or last page a user views while on a website. What it won't track is what link that user clicked to leave the site. With a little jQuery this can become a reality.
I've seen it time and time again, developers using the pageTracker._trackPageview function to track things that aren't pages. While pageTracker._trackPageview will do the job it creates false page views and inflates reports.
I would argue that a user clicking a link to leave a website is really a page view on the external site, not the developer's site. Below is the old method to achieve this:
<a href="http://www.nealgrosskopf.com/" onclick="pageTracker._trackPageview('http://www.nealgrosskopf.com/');">Outgoing Link</a>
Google Analytics has a new method of tracking all things that aren't page views. This new technique uses the pageTracker._trackEvent method.
First import Google's hosted jQuery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Next, within the $(document).ready function which is triggered when a page is finished loading, use the following Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("a[href^='http://']").click(function(){
pageTracker._trackEvent("links", "external", $(this).attr("href"), 0);
});
});
</script>
This will target all link hrefs starting with "http" and add an onclick event handler to them.
The following is taken directly from Google's guide to pageTracker._trackEvent
And again, as it would appear in Javascript
pageTracker._trackEvent("Category", "Action", "Label"), Value);
While Google specifies what each of the variable placeholders should be they can certainly be named whatever you want. Action does not need to be a verb (as you can see in my original example). Feel free to use each of the placeholders however you see fit. One thing to note is the last variable (Value) must be an integer.
Below is how the report will look in Google Analytics once some data is collected. This data can be sliced and diced using Advanced Segments just like any other dimension in Google Analytics.
Excellent tip, we're trying this on our site now. One important note, if you're using the new async tracker, you want something like:
_gaq.push(['_trackEvent', 'links', 'external', $(this).attr("href"), 0])
where _gaq is the instance of your tracker.
It's worth bearing in mind that it's probably bad advice to include the jquery library just for this. However if you're already using jquery on your site it makes excellent sense
