Andrew P Watson

Web Developer

Track downloads with Google Analytics using jQuery

Sun, 07/11/2010 - 19:59

If you currently use Google Analytics for website statistics, but want to get even more details on what your visitors are doing on your site – you may want to implement custom event tracking. Using this method, you can track nearly every action a user takes on your site. External link clicks, email link clicks, file downloads and more can all be tracked and recorded. Any webmaster will tell you; the more details you can get about your visitors – the better you can cater to them and increase your return on investment.

I am constantly trying to better my understanding of my site’s visitors. Using custom tracking has allowed me to adjust my content ever-so-slightly, creating a significant increase in conversion rate. For example, one big item has been the ability to track what links people are clicking to leave my sites. I found that there were a few links that got clicked way more than the rest. Using this knowledge, I created content on my site that was similar to the link the users where clicking. After a bit of tweaking, I was able to retain that visitor and increase my conversion rate.

I’ve asked new clients before about their current site activity, and received confused “i have no clue” responses. After installing Google Analytics and generating some reports – the client is always amazed. They had no clue certain pages were the best traffic, or that certain pages rank for certain keywords.The bottom line is this; If you don’t have detailed reports on your web traffic, you’re missing the boat. The method below just adds a new layer of detail to what your site is (or can be) doing.

Ok, for the technical info.

Step one: Install jQuery and Google Analytics.

I’m not going to get into too much detailed here, assuming this post is going to be read primarily by developers. If you don’t understand the next few bits of technical gibberish, you probably want to hire a developer to do this for you.

  1. Download jquery to your website’s codebase, include it in your site’s header.
  2. Get the Google Analytics code (you may need to sign up) and add it to your site footer, just before the </body> tag.

At this point, your site is being tracked. Once you add the GA code, data is recorded.

Step Two: Add the custom tracking scripts

These scripts need to be used on all your pages. I usually make a “functions.js” file and include that in my page header, just after the jQuery script. Any global site functions can then be added to your functions file, without tinkering with the jQuery file or page markup.

So, how does it work?

Google Analytics allows developers to “custom track” a page view as anything they like. There is a function to do this:

	pageTracker._trackPageview('some custom page info to track');

For example, if your page is called “services.htm”, by default Google would track this page view as “services.htm,” as you may expect. But, by using the custom page tracker function, you can add this to the page:

	<script type="text/javascript">pageTracker._trackPageview('services-page.htm');</script>

.. then in your reports, the page view would be tracked as “services-page.htm.”

One may ask “why would I want to change the file name in my reports?” Well, a perfect example would be on form pages that post-back to themselves. When a form posts back to itself, there is no distinct “thank you” page url. That means, there is really no way of tracking successful form submissions. But, if you added custom tracking to the “confirmation” message on your form page, you can track the page view as something like “contact-success”.

Anyways, add this to your functions file after jQuery and Google Analytics are set up. If you know anything about jQuery, this will look pretty basic to you. If not, I tried to comment it for you.

// linkTracking - Tracking various link clicks through Google Analytics
// Requires jQuery, Google analytics

$(document).ready(function() {
	
	/*
		Track External Link Clicks
		
		Add the attribute rel="external" to any external link
		on your site, and this function will track the click.
		
		Click reported as: /custom-tracking/outgoing-link/{url of link clicked}
	*/
	
	$('a[rel="external"]').click(function(){
		customLink = '/custom-tracking/outgoing-link/' + $(this).attr('href');
		pageTracker._trackPageview(customLink);
	});
	
	/* =================================================================== */
	
	/*
		 Track Email Link Clicks
		
		This simply tracks the click on any link that uses
		the "mailto:email@domain.com" method.
		
		Click reported as: /custom-tracking/email-link/mailto:{email address clicked}
	*/
	
	$('a[href*=mailto]').click(function () {
		customLink = '/custom-tracking/email-link/' + $(this).attr('href');
		pageTracker._trackPageview(customLink);
	});
	
	/* =================================================================== */
	
	/*
		Track PDF File Downloads
		
		This adds the tracking code to any link with a .pdf extension, allowing
		you to track file downloads
		
		Click reported as: /custom-tracking/pdf-link/{url of pdf clicked}
	*/
	
	$('a[href*=.pdf]').click(function () {
		customLink = '/custom-tracking/pdf-link/' + $(this).attr('href');
		pageTracker._trackPageview(customLink);
	});
	
	/* =================================================================== */
	
	/*
		Track Custom Page Elements
		
		If you want to track anything specific, this will allow you
		to do so anywhere you want.
		
		To use this:
		- add a class of "customTracker" to your link.
		- add a title attribute to your link to be used in your reports
		
		For example: <a class="customTracker" title="Log in to your account" href="{some url">Click here to log in</a>
		Would report as /custom-tracking/page-element/Log in to your account
	*/
	
	$('a.customTracker').click(function(){
		customLink = '/custom-tracking/page-element/' + $(this).attr('title');
		pageTracker._trackPageview(customLink);
	});
	
	/* =================================================================== */

});

If all went well, and you don’t get any Javascript errors, you are now adding that additional level of detail to your reports. Google Analytics updates throughout the day, but you will probably need to wait until tomorrow to really see the results. When you go in and view your GA reports, you can now filter page views by the patterns set in the script above.

For example, to see all external links that were clicked you can filter: /custom-tracking/outgoing-link/

Take bit to tinker around with this. Hopefully the example above helps make the process clear. It’s pretty easy to add more options and track really, really specific events.

I hope this is useful to someone. Let me know if you have any questions.

-a

Comments

Hey Andrew, found your page really helpful and wanted to than you for sharing.

Add new comment

By submitting this form, you accept the Mollom privacy policy.
Google