Demonstrating the Google Analytics API & Google Maps API

Tracking user interactions with Google Analytics Event Tracking (beta)

The content on this page represents a typical rich Internet application (RIA) built on an AJAX framework. Once this page is loaded it, in theory, never needs to be refreshed. All requests for information are conducted dynamically and loaded on-the-fly.

This begs the question: how do I measure the effectiveness of this page? This page is tracked by Google Analytics. Will they show me how effective this page is? Google Analytics can certainly show me pageviews, visits, unique visits, and bounce rates. But does this tell me how effective this RIA is? When I say I want to track the "effectiveness" of this page, I mean I want to track:

Are visitors using the application?
Which elements of the application are the most popular? And the least popular?
What values (e.g. map co-ordinates) are associated with each user interaction?

Being able to answer these questions will allow me to understand whether my visitors are able to achieve their and my application's desired outcomes. Google Analytics has traditionally been a pageview-based tracking solution and would only be able to tell me how many people landed on this page and how long they spent on it. That's good, but not good enough - I want to know how they used my application. With Google Analytic's new Event Tracking (currently in beta) solution, I now have access to an interaction-based tracking solution.

The AJAX "application" below uses the Google Maps API and AJAX to allow users to interact with a map of Sydney. I am using the Event Tracking solution to track the following interactions:

Clicks on the map and the position of the click
Geocode request and the address searched for
Change of map type and where the change was initiated from (i.e. map buttons or the radio buttons)
Zoom requests and whether it was a zoom in or zoom out
Directions request and the content of the request

Use the application and continue reading below to see how tracking was implemented and view screenshots of the reports.

Position Data

Click on the map to view co-ordinates for that position

Geocoding Service

Enter address:
Select format:

Get HTTP URL | Go to Address | Clear

Toggle between map types

Normal Satellite Hybrid Physical

Zoom in & out

+ / -

Get driving directions

From: click here then click on map to set your start point
To: Get directions

This application has 5 event trackers associated with it.

var mapClickTracker = pageTracker._createEventTracker('MapClick');
var geocodeTracker = pageTracker._createEventTracker('Geocoder');
var mapTypeTracker = pageTracker._createEventTracker('MapType');
var zoomTracker = pageTracker._createEventTracker('Zoom');
var directionTracker = pageTracker._createEventTracker('Directions');

Each tracker has been created to track a specific "object" - in this example, each functional component of the AJAX application represents an object. Each object in turn tracks an "action" that is associated to it. For example, the mapTypeTracker can track 2 types of actions associated with changing map types: (1) a click on the map control or (2) a click on a radio button. Associate the "trackEvent" call with the appropriate onclick event to track the action.

mapTypeTracker.trackEvent('Map Click');
mapTypeTracker.trackEvent('Radio Click');

[This article is a work in progress ... more content coming as we speak ..]