Using Google Analytics within Echo3 AJAX Applications

Use web logging statistics with any AJAX based application only records the user arrival to the initial download page. Even though the application may present the several pages and navigation paths to the user, these action are lost. Google Analytics has a mechanism known as 'Event Tracking' in which a JavaScript appliction can record any event which occurs in the application. At a high level, this can be a new page load or at the lowest level a mouseover event. See Google Analytics Event Tracking for more details.

Step 1: Obtain a Google Analytics Account

You will actually need two Google accounts, a Google account and a Google Analytics (GA) account. Both are free.

Once you have your Google Analytics account you need to configure it to track you web site. This is explained on the GA web site after logging in.

Step 2: Include the Google JavaScript code

Include link to download the GA JS code in your index.html file.

<head>
  <title>Echo3 Application Title</title>

  <script type='text/javascript' src='http://www.google-analytics.com/ga.js'></script>
                                .
                                .
                                .
</head>

Step 3: Create a class to encapsulte the Google Analytics tracker

Create a small class which encapsulates the GA 'PageTracker' object. Using your own class to do this allows you to not load the GA code during development but to see the results of you event tracking in you JavaScript console.

NB: Exception handling has been removed from the example code for clarity. It is strongly encouraged to wrap method invocations to Google Analytics in try/catch blocks so that your application runs normally if these methods fail.

/**
 *  If the Google Analytics JS code was not included don't define 'pageTracker' variable. This
 *     is desirable during development, i.e. tracking is written to console
 *  It is very important to invoke the '_trackPageview' method on the '__gat' object as
 *     part of the initialization.
 **/

Sampler.Analytics = Core.extend({
    
    pageTracker : null,
    
    $construct : function() {
	    
        // Is the Google Analytics script available? If so, use GA key to create
        //   pageTracker and initialize by invoking '_trackPageview' method
	    
        if(typeof _gat  !== 'undefined') {
            this.pageTracker = _gat._getTracker("UA-1234567-1");
            this.pageTracker._trackPageview();
        }
    },
    
    trackEvent : function(category, action, optional_label, optional_value) {
        
        if(this.pageTracker) {
            this.pageTracker._trackEvent(category, action, optional_label, optional_value);
        } else {
            console.log('traceEvent(' + category + ', ' + action +')');
        }   
    }
    
});

Step 4: Create the Google Analytics tracker at startup

In your application class create an instance of the Analytics class you defined in Step 3. This singleton object can be added to any namespace, the application namespace is convenient as it alreay exists.

When this object is instance it will set up the initial state for collection GA statistics in it's constructor.


Sampler = Core.extend(Echo.Application, {

	// Constuctor
	$construct : function() {
		
		// Invoke superClass constructor
		Echo.Application.call(this);
                                .
                                .
                                .
		
		// Create a singleton Analytics object; Add to application namespace
		Sampler.analytics = new Sampler.Analytics();
                                .
                                .
                                .
	}
});

Step 5: Track events within your application

Now the fun part -- collecting event statistics. This is exlained at length on the Google Analytics Event Tracking web site. In short, you can break down an event into three strings, Category, Action, Label and one integer. 

    Sampler.analytics.trackEvent('Sampler', page.title);

Because JavaScript allow variable parameters in it's arguments list you need only specify what you need. Some thought needs to be given as to how best to define the nesting of Category, Action and Label.

One more thing, Google Analytics are updated once per day. So be patient.