RIATest

Want to see web analytics for your Flex application? Explore TargetStat Beta for free.

What is it?

Recently released Google Analytics Tracking for Adobe Flash and Flex brings tracking capabilities to Flex. However making it work for real Flex applications requires significant hand-coding of ‘pageviews’ or ‘events’ that you would like to track. TargetStat saves many hours of your time by fully automating this process. With TargetStat there is no need to write Tracker calls, TargetStat will do it for you.

How it works?

We borrowed user activity recording code from RIATest and adopted it to perform tracking requests whenever the user interacts with your application. Using Flex automation allows issuing of meaningful and descriptive ‘pageview’ tracking requests automatically. These requests are collected in your Google Analytics web analytics service account just like any other tracking request coming from your web site. You can then see your Flex application interaction statistics in Content Drilldown report.

How do I use it?

1. Download and setup Google Analytics Tracking for Adobe Flex. Follow the instructions and add a FlexTracker or GATracker object to your application (we recommend setting visualDebug="true" initially to make sure tracking works; set it to false for production software). Do not add calls to trackPageView(), TargetStat will perform these calls automatically.
2. Download TargetStatFlex.zip and extract TargetStatFlex.swc.
3. Link TargetStat.swc and Flex automation libraries to your Flex project:
   • Open your application project in Flex Builder 3.
   • Select Project, Properties, Flex Compiler.
   • In Additional compiler arguments add:
     

     -include-libraries "C:\TargetStatFlex.swc" "C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\automation.swc" "C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\automation_agent.swc" "C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\automation_dmv.swc"

     In the above, if required, replace "C:\Program Files\Adobe\Flex Builder 3" with the correct location for Flex Builder 3 and replace "C:\TargetStatFlex.swc" with the correct location for TargetStatFlex.swc.

4. In your Application creationComplete() event add the following call:

   // tracker is the FlexTracker object instance that you added according to instructions in step 1 above.
   com.riatest.TargetStat.setGATracker(tracker); 
   

5. Compile your application.

That’s it! Your application is now ready for web analytics. Deploy it to your web server and let the users interact with it. Allow up to 24 hours for the new data to appear in Google Analytics web service. Check Content, Content Drilldown report for entry matching your application name. Click it to explore more details. You can drill down through the hierarchy of Flex objects, then reach the actions performed on those objects and then drill down to the action arguments.

Sample Flex Application mxml code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:ns1="*" height="100%" width="100%"
    backgroundColor="#ffffff" creationComplete="onCreated()">
    
    <analytics:FlexTracker
        xmlns:analytics="com.google.analytics.components.*"
        id="tracker"
        account="UA-NNNNNNN-N"
        mode="AS3"
        visualDebug="true"
    />
    
    <mx:Script>
      <![CDATA[
        import com.riatest.TargetStat;
        
        private function onCreated():void
        {
          com.riatest.TargetStat.setGATracker(tracker);
        }
      ]]>
    </mx:Script>
    
    <mx:ApplicationControlBar width="100%">
      <mx:Button label="New"/>
      <mx:Button label="Reply"/>
      <mx:Button label="Forward"/>
      <mx:Button label="Delete"/>
      
    </mx:ApplicationControlBar>    
    
    <mx:HDividedBox x="0" y="41" height="100%" width="100%" showInAutomationHierarchy="false">
      <mx:VBox height="100%" width="30%">

        <ns1:FolderView width="100%" height="100%" id="folderTree" labelField="@label">
          <ns1:dataProvider>
            <mx:XML xmlns="">
              <folder label="All Mail" expanded="true">
                <folder label="Inbox"/>
                <folder label="Outbox"/>
                <folder label="Sent"/>
              </folder>
            </mx:XML>
          </ns1:dataProvider>
        </ns1:FolderView>
        <mx:HBox width="100%">
          <mx:Button label="New Folder"/>
          <mx:Button label="Remove Folder"/>
        </mx:HBox>
      </mx:VBox>
        <mx:VDividedBox width="100%" height="100%" showInAutomationHierarchy="false">
            <ns1:MessageListView id="messageList" width="100%" height="30%"/>
            <ns1:MessageView id="messageView" width="100%" height="70%"/>
        </mx:VDividedBox>
    </mx:HDividedBox>
    
</mx:Application>

Tips

1. You can use automationName property to set a descriptive name that will appear in Google Analytics web service.
2. You can use showAutomationHierarchy to hide or show a specific container component.
Note that if you are using RIATest then automationName and showAutomationHierarchy will also affect test scripts.

Have questions or suggestions?

Please contact us at . We would love to hear what you have to say about TargetStat.