Home > Flex, Google > Flex: Google Analytics Howto

Flex: Google Analytics Howto

How do you track events in Google Analytics (GA)? Well it’s easy enough when your’re dealing with regular html markup web pages (I’m assuming your’ve done a basic implementation of Google Analytics before), but what about flex. Once the webpage that your main flex application sits in is loaded nothing else will be tracked by GA.

The easiest way to track any action in a Flex application using GA is to use the Flex-Javascript bridge in flash.external.ExternalInterface

Also you don’t want any possibility that Flex is going to hang around for the Javascript call to complete, and if there’s a communication issue then GA could slow down your program. So in a nunshell what is needed is an asynchronous event driven framework for GA which is implemented around Flex ExternalInterface calls to Javascript.

In order to make the below example work you will need a Google account with Analytics setup on a domain. You will need to check your supplied GA Javascript code and find your unique tracking ID, which will look something like: UA-xxxxxxx-x. You can setup and test the below code to a point in FlexBuilder but ultimately you will need to integrate your code onto your website URL which is registered with GA. The GA Javascript code will not execute unless it’s running integrated on your website (it’s most likely due to Javascript environment variables or the lake of)

Tip:
You need a tool to monitor HTTP traffic from your browser, Firefox has plug-in call: Tamper Data which works well enough.

This is the core Google Analytics code which should always be listening for Flex tracking events and ultimately makes the Javascript call to track your custom event.

package Framework.Utilities.GoogleAnalytics{
	
	import Framework.Utilities.GoogleAnalytics.Events.TrackingEvent;
	import Framework.Utilities.JavascriptAPI;
	
	import flash.events.EventDispatcher;
	
	public class GoogleAnalytics{
		
		private var globalEventDispatcher:EventDispatcher = null;
		
		private var trackingId:String = '';
		
		private var javascriptApi:JavascriptAPI = null;
		
		public static const GANALYTICS_URI_SOAP_PREFIX:String = '/SOAP/';
		
		public static const GANALYTICS_URI_UI_PREFIX:String = '/UI/';
		
		public function GoogleAnalytics(globalEventDispatcher:EventDispatcher,trackingId:String = ''){
			this.trackingId = trackingId;
			this.globalEventDispatcher = globalEventDispatcher;
			javascriptApi = new JavascriptAPI();
			initListeners();
		}
		
		public function setTrackingId(trackingId:String):void{
			this.trackingId = trackingId;
		}
		
		public function getTrackingId():String{
			return trackingId;
		}
		
		private function initListeners():void{
			this.globalEventDispatcher.addEventListener(TrackingEvent.GOOGLE_TRACKING_EVENT,trackingHandler);
		}
		
		private function trackingHandler(te:TrackingEvent):void{
	    	var currentTrackingId:String = trackingId;
	    	if (te.getTrackingId() != null){
	    		if (te.getTrackingId() != ''){
	    			currentTrackingId = te.getTrackingId();
	    		}
	    	}
	    	
	    	if (currentTrackingId != null){
	    		if (currentTrackingId != ''){
	    			// Make the google analytics call via javascript
	    			javascriptApi.googleTracker(currentTrackingId,te.urlOrUrl);
	    		}
	    	}
		}

	}
}


This is the tracking event which will hold your custom Google Analytics call which will be fired every time you want to track something in Flex.

package Framework.Utilities.GoogleAnalytics.Events{

	import flash.events.Event;
	
	public class TrackingEvent extends Event{

	    public static const GOOGLE_TRACKING_EVENT:String = 'GOOGLE_TRACKING_EVENT';
	    
	    public var urlOrUrl:String = '';
	    
	    private var trackingId:String = '';
	    
	    public function TrackingEvent(urlOrUrl:String,type:String = GOOGLE_TRACKING_EVENT):void{
	    	this.urlOrUrl = urlOrUrl;
	    	super(type);
	    }
	    
	    public function setTrackingId(trackingId:String):void{
	    	this.trackingId = trackingId;
	    }
	    
	    public function getTrackingId():String{
	    	return trackingId;
	    }
	   
		public override function clone():Event{
			var trackingEvent:TrackingEvent = new TrackingEvent(urlOrUrl,type);
			trackingEvent.setTrackingId(trackingId);
			
	    	return trackingEvent;
		}
	}
}


This is a small class which uses the Flex ExternalInterface call to execute Google Analytics Javascript, which in turn makes an HTTP call to the GA server.

package Framework.Utilities{
	
	import flash.external.ExternalInterface;
	
	public class JavascriptAPI{
		
		public static const PLUGIN_MODE:int = 0;
		
		public static const AIR_MODE:int = 1;
		
		public static const GANALYTICS_URI_SOAP_PREFIX:String = '/SOAP/';
		
		private var mode:int = 0;
		
		public function JavascriptAPI(mode:int = 0){
			this.mode = mode;
		}
		
		public function googleTracker(trackerId:String,action:String):void{
			if (mode == PLUGIN_MODE){
				var js:String = "function googleTracker(){" + 
								"var pageTracker = _gat._getTracker('" + trackerId + "');"+
								"pageTracker._trackPageview('" + action + "');}";
				ExternalInterface.call(js);
			}
		}
	}
}


This is how you use the above code


/**
 * Where myEventDispatcher extends an EventDispatcher
 */

var googleAnalytics:GoogleAnalytics = new GoogleAnalytics(myEventDispatcher);
googleAnalytics.setTrackingId(myGoogleAnalyticsId);

/**
 * Then somewhere else in your application do this
 * to track your something in Google Analytics 
 */

var googleTrackingEvent:TrackingEvent = new TrackingEvent('myTrackingStringOrUrl');
myEventDispatcher.dispatchEvent(googleTrackingEvent);

  1. No comments yet.
  1. No trackbacks yet.
*