Home  >  

RIATrax Flex Event Tracking (Now Open Source)

Author photo
AddThis Social Bookmark Button
rt_ga.jpg

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



Read more from Rich Tretola. Rich Tretola's Atom feed richtretola on Twitter

Comments

3 Comments

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


jo said:

in my opinion there are too many drawbacks extending a whole component set just to implement tracking functionality.

Rich Tretola said:

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.

Leave a comment


Tag Cloud

Question of the Week: Dream App

If you had an unlimited budget and unlimited resources what application would you build and why would you build it?

Answer

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.