Why and how to set up Google Analytics event tracking

Google Analytics event tracking was introduced in mid 2009. It is a feature that allows you to track specific events or “actions” on your site. For example you can track when a video is played or paused, when a file is downloaded or when an Ajax response is received.

Tracking events is different from setting “goals” in Google Analytics. Goals are based on three specific types of events: destination URL visited, number of pages viewed and time spent on site. But what about events that do not fall within these categories or those in which the event is simpy of interest but not an ultimate goal for the website? For such events, event tracking can be used instead.

It is worth nothing that in some cases events that do not fall within the three event categories mentioned above might till be considered goals by the site owner. In such case, we might want to set up a virtual page view for such events and create a goals based on the virtual page views generated. For more details on virtual page views and goals, see my posts on virtual page views and event triggered goals.

The question remains, how do we set up event tracking on Google Analytics? If you are using the recent asynchronous Google analytics tracking code snippet your tracking code would look something like that shown below. If you haven’t got the new asynchronous code snippet installed I recommend you do so.

<script type="text/javascript">
// <![CDATA[
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
// ]]>
</script>

Using the new Google Analytics Asynchronous code allows you to execute Google Analytics API method calls simply by pushing an array specifying the API method name and parameters to be used on to the _gaq object for example:

_gaq.push(['_setAccount', 'UA-XXXXXX-X'])

Once loaded Google Analytics converts the _gaq array into an object and executes all the methods pushed on to the _gaq array. Subsequent calls to _gaq.push() executes the pushed method straight away.

So back to event tracking, using the _gaq object you can register an event by making a call to the API method _trackEvent with the following signature (label and value parameters as optional)

_trackEvent(category, action, label, value)

Example:

<button onclick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'I love big buts'])"/>

Note that if you implement the above code before including the Google Analytics code snippet you would have to declare _gaq as an array first. However, methods (arrays) pushed on to _gaq will still be executed by Google Analytics when it finally gets initialised. This means you don’t have to wait for Google Analytics to be initialised to start using it. Nice huh?

Once you have set up event tracking you can view the event tracking reports in Google Analytics under Content >> Event Tracking as shown below