fastflip.googlelabs.com

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);

A simple effective work around is a header redirect (permalink friendly) on the main site index which can be prefixed to the wordpress index.php in your wordpress top level directory.

<?php

// set $redirectHome = false to disable the redirect

$redirectHome = true;
if ($redirectHome){
        // Redirects index page
        $uriStr = $_SERVER['REQUEST_URI'];
        if (($uriStr == '/') || ($uriStr == '')){
                header('Location: /?index',true,301);
                die();
        }
        // Makes sure pages off the main index are not renamed
        $matchAry = array();
        if (preg_match('/(\/page\/\d+\/)\?index/',$uriStr,$matchAry)){
                header('Location: ' . $matchAry[1],true,301);
                die();
        }
}

/**
 * Original Wordpress index.php goes here
 */

This works because Google thinks “/?index” is a new page (it’s not though, it’s the main index with a query string attached) and the media bot crawls it and targets it accordingly as a new page. And as long as you’ve made your amendments to your previously incorrect content, in my case the “tagline” then this time around your ads should be accurately targeted…hopefully

The curious thing is, it seems no matter what only my original main index is targeted incorrectly still months later. I’ve seen other posts relating to incorrect ad targeting on the main index only. It seems like Google’s media crawler doesn’t like something about Wordpress, I would like to hear from others that have experienced this.