<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bytearray - Programming, Computers and Technology &#187; analytics</title>
	<atom:link href="http://bytearray.brixtonjunkies.com/tag/analytics/feed/" rel="self" type="application/rss+xml" />
	<link>http://bytearray.brixtonjunkies.com</link>
	<description></description>
	<lastBuildDate>Tue, 03 Nov 2009 11:52:07 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.3</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex: Google Analytics Howto</title>
		<link>http://bytearray.brixtonjunkies.com/2009/08/20/flex-google-analytics-howto/</link>
		<comments>http://bytearray.brixtonjunkies.com/2009/08/20/flex-google-analytics-howto/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 17:51:20 +0000</pubDate>
		<dc:creator>alchemist</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[analytics]]></category>
		<category><![CDATA[google analytics]]></category>

		<guid isPermaLink="false">http://bytearray.brixtonjunkies.com/?p=54</guid>
		<description><![CDATA[How do you track events in Google Analytics (GA)? Well it&#8217;s easy enough when your&#8217;re dealing with regular html markup web pages (I&#8217;m assuming your&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>How do you track events in Google Analytics (GA)? Well it&#8217;s easy enough when your&#8217;re dealing with regular html markup web pages <em>(I&#8217;m assuming your&#8217;ve done a basic implementation of Google Analytics before)</em>, but what about flex. Once the webpage that your main flex application sits in is loaded nothing else will be tracked by GA.</p>
<p>The easiest way to track any action in a Flex application using GA is to use the Flex-Javascript bridge in <strong>flash.external.ExternalInterface</strong></p>
<p>Also you don&#8217;t want any possibility that Flex is going to hang around for the Javascript call to complete, and if there&#8217;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.</p>
<p>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&#8217;s running integrated on your website <em>(it&#8217;s most likely due to Javascript environment variables or the lake of)</em></p>
<p><strong>Tip:</strong><br />
You need a tool to monitor HTTP traffic from your browser, Firefox has plug-in call: Tamper Data which works well enough. </p>
<p><em><strong>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. </strong></em></p>
<pre class="brush: as3;">
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);
	    		}
	    	}
		}

	}
}
</pre>
<p><em><br />
<strong>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.</strong></em></p>
<pre class="brush: as3;">
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;
		}
	}
}
</pre>
<p><em><br />
<strong>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.  </strong></em></p>
<pre class="brush: as3;">
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 = &quot;function googleTracker(){&quot; +
								&quot;var pageTracker = _gat._getTracker('&quot; + trackerId + &quot;');&quot;+
								&quot;pageTracker._trackPageview('&quot; + action + &quot;');}&quot;;
				ExternalInterface.call(js);
			}
		}
	}
}
</pre>
<p><em><br />
<strong>This is how you use the above code</strong></em></p>
<pre class="brush: as3;">

/**
 * 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);
</pre>
]]></content:encoded>
			<wfw:commentRss>http://bytearray.brixtonjunkies.com/2009/08/20/flex-google-analytics-howto/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
