About a year ago, I wrote a guest blog post over on Robbin Steif’s blog about using Google Analytics for tracking Javascript and Flash events.  This weekend Jeremy Geelan, SVP over at Sys-Con Media, asked if he could republish the work.  Of course I said “yes.”  Then I noticed that a lot has happened to GA in a year (and more to come, ahem, API’s!).  What I had wrote was now incomplete, so what you’ll find below is my attempt to sum up “event tracking” using ga.js and the Great Google’s Event Tracking Data Model.  Let me know how I did covering it, and if you think I should clarify of expand on anything.

Since we all know about page tags, let’s get down to business with “the Google” and how it tracks “the Rich Media.”  Google Analytics currently has two different javascript page tags:

• urchin.js.  The legacy version of the Google Analytics page tag.
• ga.js.  The current, rebranded version of the Google Analytics page tag.

How you track rich media depends on which page tag you are using.  I’ll discuss using urchin.js first, then ga.js.  I’ll also provide some information about Google’s Event Tracking function for capturing specific “events” within their event architecture.

Tracking Rich Media using Urchin.js

In the legacy version of Google Analytics, the smarties at Google created a little JavaScript function called urchinTracker() that enables event tracking.  Use the JavaScript function with an argument specifying a name for the event. For example, the function:

javascript:urchinTracker(’/mysite/flashrichmedia/playbutton’); 

logs each occurrence of that Flash event as a page view of:

/mysite/flashrichmedia/playbutton

Some caveats:

1. Always use a forward slash to begin the argument.
2. Actual pages with these filenames do not need to exist.
3. You can organize your events into any structure or hierarchy you want.

Important: Google says to place your tracking code “between the opening tag and the JavaScript call” if your pages include a call to urchinTracker(), utmLinker(), utmSetTrans(), or utmLinkPost(). For example, if the page view is the major event and the “play” event a minor event; then, your hierarchy would be Page View > Event, where the page contains an event, such that:

/mysite/ria_bittons/playbutton
/mysite/ria_bittons/pausebutton
/mysite/ria_bittons/playbutton
/mysite/ria_clips/clip

Some examples of the code (from Google Help):

on (release) {
// Track with no action
getURL(”javascript:urchinTracker(’/folder/file’);”);
}

This one above tracks when you click and release (although technically, it just notices the release) of a flash button (and records the file you specify as a page view).

on (release) {
//Track with action
getURL(”javascript:urchinTracker(’/folder/file’);”);
_root.gotoAndPlay(3);
myVar = “Flash Track Test”
}

The second one is the same, but by using a function, passing it a parameter, and identifying the instance you want to track, you can measure when your file was used in a specific scene in a little flash movie. So it is a more specific method for handling event tracking in Flash.

onClipEvent (enterFrame) {
getURL(”javascript:urchinTracker(’/folder/file’);”);
}

And the third one repeats the action throughout the movie so that each time the file is loaded, it gets tracked as an event. If you were to pass a unique file at the end of the movie, you could recognize it using this method (or the other methods) to know that the whole movie was watched (as long as your session doesn’t time out). Next, wait until Google updates your analytics, then check the Top Content report to see if it all worked. Now let’s discuss how to the exact same thing using the new trackPageview function released with ga.js.

Tracking Rich Media using ga.js

In the current version of Google Analytics, the brainiacs at Google created a little JavaScript function called trackPageview() that enables event tracking.  Use the JavaScript function with an argument specifying a name for the event.For example, the function:  

javascript:pageTracker._trackPageview (“/mysite/flashrichmedia/playbutton”);

logs each occurrence of that Flash event as a page view of:

/mysite/flashrichmedia/playbutton

Some caveats:

1. Always use a forward slash to begin the argument and use quotes around the argument.
2.  Actual pages with these filenames do not need to exist.
3. You can organize your events into any structure or hierarchy

You must put calls to _get._getTracker and _initData above the call to _trackPageView.  For example, you would insert the following code:

<script type=”text/javascript”>
var pageTracker = _gat._getTracker(”UA-xxxxxx-x”);
pageTracker._initData();
pageTracker._trackPageview();
</script>

Here are some examples of the ga.js code (from Google Help) that replicate what I described above using the most recent code:

on (release) {
// Track with no action
getURL(”javascript:pageTracker._trackPageview(’/folder/file.html’);”);
}

This one above tracks when you click and release (although technically, it just notices the release) of a flash button (and records the file you specify as a page view).

on (release) {
//Track with action
getURL(”javascript:pageTracker._trackPageview(’/folder/file.html’);”);
_root.gotoAndPlay(3);
myVar = “Flash Track Test”;
}

The second one is the same, but by using a function, passing it a parameter, and identifying the instance you want to track, you can measure when your file was used in a specific scene in a little flash movie. So it is a more specific method for handling event tracking in Flash.

onClipEvent (enterFrame) {
getURL(”javascript:pageTracker._trackPageview(’/folder/file.html’);”);
}

And the third one repeats the action throughout the movie so that each time the file is loaded, it gets tracked as an event. If you were to pass a unique file at the end of the movie, you could recognize it using this method (or the other methods) to know that the whole movie was watched (as long as your session doesn’t time out).

Tracking Rich Media using Google Analytics Event Tracking

When Google released ga.js in fourth quarter 2007, Google also released a data model for tracking events.  It provides more flexibility and ease of customization than the methods I described above.   The data model makes use of:

• Objects. These are named instances of the eventTracker class and appear within the reporting interface.

var videoTracker = pageTracker._createEventTracker(”Movies”);

• Actions. A string you pass to an event tracker class instance as a parameter.

videoTracker._trackEvent(”Stop”);

• Labels. An optional parameter you can supply for a named object.

downloadTracker._trackEvent(”Movies”, “/mymovies/movie1.mpg”);

• Values. A numerical value assigned to a tracked object.

To set up event tracking you should:

1. Identify the events you want to track.
2. Create an event tracker instance for each set of events.
3. Call the _trackEvent() method on your page.
4. Enable “event tracking” in your profile.

To instantiate an event tracker object, you might do something like this:

var myEventObject = pageTracker._createEventTracker(”Object Name”);
myEventObject._trackEvent(”Required Action Name”, “Optional Label”, optionalValue);

createEventTracker() is order dependent and must be called after the main tracking code (ga.js) has been loaded.Next you would call the _trackEvent() method in your source code either on every page that contains the event or as part of the tracking code for every page:

_trackEvent(action, optional_label, optional_value)

If you wanted to track interaction with the Flash UI, such as the button on a Flash Video Player, you would create a videoTracker object with name “Video”:

var videoTracker = pageTracker._createEventTracker(’Video’);

Then, in your Flash code for the video player, you would call the videoTracker object and pass a value for the action and label for the event:

onRelease (button) { 
   ExternalInterface (”javascript:videoTracker._trackEvent(’Play’, ‘MyVideo’);”)
}

You could also use the ExternalInterface ActionScript function as an eval() function to parse FlashVars and attach them to every Flash UI element that needs a tracking action.  For example, the code below associates a Stop action for the Video object and retrieves the provided label and value from the FlashVars:

onRelease (button) { 
   ExternalInterface (”javascript:videoTracker._trackEvent(’Stop’” + label + “,” + value + “);”)
}

Adding event tracking code would generate event reports in the Content section of the Google Analytics Interface.  Pretty cool stuff, Google!

Add to the Conversation

Name:

Email:

Your email (required) will not be published.

Website:

Your Thoughts:

Please note that contributions are moderated and may take a little while to appear.