JavaScript - - By Craig Buckler

How to Track JavaScript and Ajax Events with Google Analytics

Hands up if you use Google Analytics. Actually, it’s probably easier to ask who doesn’t use Analytics. Whatever your opinion of Google and its plans for world domination, Analytics is an amazing tool that has revolutionized web statistics.

For most tasks, the standard page-tracking code is adequate:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); // your ID/profile
(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

That’s great, but what about JavaScript-heavy web applications? The most extreme examples will use a single HTML page, yet provide a range of client-side functionality, event handlers, and Ajaxy loveliness. Alternatively, you may simply want to track document downloads or other activities which do not involve a normal page load.

Identify Your Requirements

Let’s assume we’re creating a JavaScript-powered application that allows the user to search for and download free MP3s.

Note: Ecommerce Transactions

Google Analytics also provides comprehensive ecommerce tracking systems. This is more appropriate for when you’re selling items, so keep reading for a tutorial coming soon.

The Category
The first data item to consider is the category—a single name for all events of a particular type. In this case, we could use “mp3system.” You could use the same category name for every event on your web page, or different categories, depending on the widget being used.

An action is a task completed by the user or, on a technical level, an activity that results in a JavaScript event being fired. For our system, we could monitor:

  • search (searching for a song using a key phrase)
  • view (viewing information about an MP3)
  • download (starting an MP3 download)

Labels (optional)
A label is an optional description of the action that occurred. In the case of searching, we could use the search phrase as our label. For viewing or downloading, we could apply the song ID and/or title for our label.

Values (optional)
The optional value provides a numeric quantity for the event. For MP3s, we might provide the file size or track length, so that we can report total and average download statistics. In other situations, you could record a monetary amount, or the time taken to complete an action.

The Code

That’s enough planning; let’s look at the JavaScript tracking code:

if (_gaq) _gaq.push(['_trackEvent', category, action, label, value]);

Simple. The condition first checks that we have included the Analytics JavaScript, then sends the details of the event itself. Typical events from our MP3 system might be:

_gaq.push(['_trackEvent', 'mp3system', 'search', 'good songs']);
_gaq.push(['_trackEvent', 'mp3system', 'view', 'song 1', 3456]);
_gaq.push(['_trackEvent', 'mp3system', 'download', 'song 1', 3456]);

For a file download, the simplest HTML would be:

<a href="file.mp3" onclick="_gaq.push(['_trackEvent', 'mp3system', 'download', 'file.mp3']);return true;">download</a>

Google Analytics event trackingYour custom event statistics should be available on Google Analytics within 24 hours. From your profile, select Content followed by Event Tracking.

Google Analytics event tracking can help you monitor user activity at a deeper level than standard page views. Are you using it for any interesting applications? Will you implement the code in your next project?

note:Want more?

If you want to read more from Craig, subscribe to our weekly tech geek newsletter, Tech Times.

Login or Create Account to Comment
Login Create Account