Home >
Inspired by the initial returns of this weeks poll, I have decided to open source a new Flex library for Google Event Tracking that I have been working on and host it at http://code.google.com/p/riatrax/.
What is RIATrax ?
RIATrax is an Adobe Flex component set which integrates automatic event tracking through Google Analytics. Event tracking is an evolutionary way to send data to Google Analytics as to not inflate pageview counts.
Why should I use RIATrax?
If you are creating a new Flex application or have an existing Flex application that you would like to be able to get analytics on specific user interactions, RIATrax is the fastest and easiest way to automatically start collecting tracking data. You also have full access to the underlying Google classes to do custom event tracking if you wish.
How can I see RIATrax in action?
You can visit the RIATrax Explorer, which is a live Flex demo application.
You can also look right here and see a live Flex application that is tracking the Preferences, Full Forecast, or Refresh buttons. This demo is part of a tutorial that can be viewed here.
How do I use RIATrax?
You can quickly add event tracking to a Flex application by simply creating a single instance of the RIATrax Tracker class and changing the name space of your existing components that are supported by RIATrax.
Basic Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()"
xmlns:rx="com.happytoad.libs.riatrax.*">
<mx:Script>
<![CDATA[
import com.happytoad.libs.riatrax.Tracker;
private var tracker:Tracker =
Tracker.getInstance();
private function init():void{
tracker.account="UA-xxxxx-yy";
tracker.display=this;
tracker.visualDebug = true;
}
]]>
</mx:Script>
<rx:Button label="Track Me"/>
</mx:Application>
What are the supported components?
The first release of this free component set includes the components shown in the table below.
| Component | Event Tracked | data tracked |
| Accordion | IndexChangedEvent.CHANGE | selected child’s label |
| Button | MouseEvent.CLICK | Button’s label |
| ButtonBar | ItemClickEvent.ITEM_CLICK | selected Button’s label |
| CheckBox | MouseEvent.CLICK | label |
| ColorPicker | ColorPickerEvent.CHANGE | selectedColor |
| ComboBox | ListEvent.CHANGE | selectedLabel |
| DateChooser | CalendarLayoutChangeEvent.CHANGE | selectedDate |
| Image | MouseEvent.CLICK | source |
| LinkBar | ItemClickEvent.ITEM_CLICK | selected Button’s label |
| LinkButton | MouseEvent.CLICK | label |
| Menu | MenuEvent.ITEM_CLICK | item’s labelField |
| MenuBar | MenuEvent.ITEM_CLICK | item’s labelField |
| PopUpButton | MouseEvent.CLICK | label |
| PopUpMenuButton | MenuEvent.ITEM_CLICK | item’s labelField |
| RadioButtonGroup | ItemClickEvent.ITEM_CLICK | selectedValue |
| TabBar | ItemClickEvent.ITEM_CLICK | selected Button’s label |
| TabNavigator | IndexChangedEvent.CHANGE | selected child’s label |
| ToggleButtonBar | ItemClickEvent.ITEM_CLICK | selected Button’s label |
| Tree | ListEvent.CHANGE | selected item’s labelField |
| ViewStack | IndexChangedEvent.CHANGE | selected child’s label |
Customizing Event Data
Component Properties
- gaCategory:String - passed to Google as the Category property.
see component documentation for default - gaAction:String - passed to Google as the Action property.
see component documentation for default - gaLabel:String - passed to Google as the Label property.
see component documentation for default
Additional properties that can be set per component:
- gaValue:Number - value to be aggregated with the event.
defaults to 0 - gaMode:String - ( unique | all | none ) tracking mode for component. If set to unique, only the first unique event for component - ( For example: A component with children like a TabNavigator will track each child only one time, while a simple component like a Button would only track the first click). If set to all, every instance of the event will be tracked even if they are duplicates. If set to none, the tracking is disabled.
defaults to unique
In addition to automatic tracking the Tracker class also exposes the trackEvent() method as a public method allowing you to manually track events as well, just as you would with the GATracker class from Google.
Tracker Properties & Methods
- display:DisplayObject - DisplayObject to hold a reference to the object. This property should be set within the application root and set to “this”.
this is a required property - account:String - This String is also known as the Google UA number of your tracking code and looks like UA-xxxxx-yy, where the x’s and y’s are replaced with the numbers that correspond to your account and profile information for the object you are tracking.
this is a required property - mode:String - ( Bridge | AS3 ) Use Bridge mode if you control both the HTML page and the Flash content. This mode is best if you have already implemented Google Analytics (ga.js) tracking on your website and you want to add tracking to embedded Flash content. The bridge mode simplifies Flash-to-JavaScript communication by providing a unified ActionScript 3 interface to the ga.js code. It provides the connection from the ActionScript 3 calls to the Analytics JavaScript in order to make the tracking work.
Use AS3 mode if you control the Adobe Flash ActionScript 3 code, but you do not control the hosting environment of your Adobe Flash application. For example, if you are developing Flash content for distribution across many sites, then you would use AS3 mode. AS3 mode is completely independent from the ga.js tracking code and contains all the Analytics tracking functionality. There is no need for a separate ga.js tracking installation with this mode. In addition, AS3 mode uses the Flash storage mechanism to track session information for the visitor.
defaults to AS3 - visualDebug:Boolean - ( true | false ) set to true to show visual debugging within your application. This can be used to test that all is working properly.
defaults to false - config:Configuration - the Configuration object of the tracker. see Google documentation for additional details.
defaults to null - debug:DebugConfiguration - the DebugConfiguration object of the tracker. see Google documentation for additional details.
defaults to null - trackerCount:int - the current total count of events tracked for user session.
- getInstance():Tracker - returns an instance of the Tracker
- trackEvent(category:String, action:String,label:String=null,value:Number=0):Boolean - method used for sending event data to Google
How do I get RIATrax?
Just visit the RIATrax Google Code page to download the binaries or grab the source through SVN at http://code.google.com/p/riatrax/source/checkout.
Resources
- AS3 Documentation
- RIATrax Explorer Demo Application
- Tutorial: Updating an existing application
- Discussion Group





Facebook Application Development
RIATrax seems to be very useful for tracking a specific action based on an event occurrence in Flex apps. This also sounds quite similar to what we are using in our Produle.com - online flash platform, Where google analytics tracking can be set when a particular event is dispatched, by mapping events using the Event controller.
http://www.produle.com/features/#track
in my opinion there are too many drawbacks extending a whole component set just to implement tracking functionality.
Since they are simply very small component extensions they are very light weight. You could simply manually create your tracking methods using the Google analytics.swc without RIATrax.