Search

 

February 2009
S M T W T F S
« Jan   Mar »
1234567
891011121314
15161718192021
22232425262728

Tags

360Flex actionscript adobe adobe air air air 2 aironandroid android apple as3 blackberry books conference contest cookbook F3 v. F4 FileReference flash flash builder flash catalyst Flash Player flashplayer flashplayer10 flash player 10.1 Flex flex3 flex4 Flex 4.5 flexbuilder fotobooth google gumbo ios ipad iphone java load() max max 2009 merapi microsoft mobile pixel bender playbook save()

Archives


« | Main | »

Upgrade Flex Apps to RIATrax (Google Event Tracking) in minutes

By Rich Tretola | February 10, 2009
6,762 views

As I mentioned in a comment last week within Matthew McNeely’s InsideRIA article Google Analytics within Flex/Flash Applications, I was inspired to create a new Flex library that made this a little easier to integrate Google Event Tracking within a Flex application. Now that I have completed the beta version of the RIATrax library, I wanted to see how much work would be involved in updating an existing application. OK, you are thinking “yeah, you already know that it is a piece of cake because you wrote the components”, and you would be right, but please play along for now.

I have an application that I wrote years ago that is a small weather widget shown on the right. I would like to update this to a RIATrax application that automatically tracks a few events through Google Analytics Event tracking. So here is what I did, and it only took 5 minutes!

[kml_flashembed movie="http://labs.happytoad.com/RIATrax/samples/weather/WeatherFlex.swf" height="280" width="245" /]
ORIGINAL

  • First, I added the block below to my main application file. This will create an instance of the RIATrax class.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    import com.happytoad.libs.riatrax.Tracker;
    private var tracker:Tracker = Tracker.getInstance();
               
    private function initRIATrax():void{
        tracker.account="UA-xxxxxx-y";
        tracker.display=this;
        // visualDebug for demo purposes only
        tracker.visualDebug = true;
    }
  • Next, I simply added a new namespace to the file containing the components that I wished to replace and then replaced any of the component namespace declarations where I wanted to have event tracking enabled with the RIATrax namespace. In this case, I simply replaced a few of the <mx:Button> components with <rx:Button> components.

    So, I simply changed the folowing component declarations from:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <mx:Button x="4" y="216" label="Full Forecast"
        click="model.root.showFullForecast()"
        icon="@Embed('/assets/images/globe.png')" />
       
    <mx:Button label="Preferences"
        click="model.root.flipToEdit()"
        x="126" y="216"
        icon="@Embed('/assets/images/edit.gif')"/>
           
    <mx:Button click="model.root.getWeather()"
        x="209" y="17"
        icon="@Embed('/assets/images/refresh-icon.png')"
        toolTip="Refresh"
        width="27" cornerRadius="20"/>

    To:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <rx:Button x="4" y="216" label="Full Forecast"
        click="model.root.showFullForecast()"
        icon="@Embed('/assets/images/globe.png')" />
           
    <rx:Button label="Preferences"
        click="model.root.flipToEdit()"
        x="126" y="216"
        icon="@Embed('/assets/images/edit.gif')"/>

    <rx:Button click="model.root.getWeather()"
        x="209" y="17"
        icon="@Embed('/assets/images/refresh-icon.png')"
        toolTip="Refresh"
        width="27" cornerRadius="20"
        gaLabel="Refresh"/>

    Notice the only change other than the namespace declaration is to add a gaLabel property to the Refresh button. This was added because the Refresh button did not have a label property defined which is the default property tracked for Google’s label property.

    Tip: Don’t forget to add the namespace to the container file holding your components:

    1
    xmlns:rx="com.happytoad.libs.riatrax.*"

    In the Edit screen, I only made one change and that was from mx:Button to rx:Button. Here is the before:

    1
    2
    3
    <mx:Button id="getWeatherButton" label="Save"
        click="validate()"  x="85" y="181"
        icon="@Embed('/assets/images/save.png')"/>

    And the after:

    1
    2
    3
    4
    <rx:Button id="getWeatherButton" label="Save"
        click="validate()"  x="85" y="181"
        icon="@Embed('/assets/images/save.png')"
        gaAction="Change Zip" gaLabel="{zip.text}"/>

    Notice that I have added a gaAction property so that I can pass the more accurate data of “Change Zip” rather than the defult which would have simply been “Click” and the gaLabel was bound to the zip TextInput’s text property. The result is that the zipcdode entered in the text field will be passed along to Google.

    • [kml_flashembed movie="http://labs.happytoad.com/RIATrax/samples/weather/WeatherFlexRx.swf" height="450" width="245" /]
    RIATrax Enabled     		Thats it! Try the application on the left The application will now automatically track every time a user clicks the Preferences, Full Forecast, or Refresh buttons on the main screen or the Save button on the Preferences screen.

    Bonus: Since the RIATrax components also support custom properties as overrides to the automatically tracked properties, I made one last change to Save button on the Preferences screen. I added two additional properties. I set the gaAction property to “Change Zip” and bound the text property of the zip TextInput component to the gaLabel property. This will provide a more descriptive action being passed to Google and also actual data (the entered zip code).

    Try the RIATrax version of the application on the left and you will notice that the button clicks are now being tracked as Google events.

    Note: I extended the height of the application so that the Google debug information would be visible.

    For more information including full documentation, explorer application and SWC download of the RIATrax library please visit http://labs.happytoad.com/RIATrax. RIATrax is distributed freely by Rich Tretola and HappyToad IT Consulting.
    Email

    Topics: ActionScript 3, Flex | 6 Comments »

    6 Responses to “Upgrade Flex Apps to RIATrax (Google Event Tracking) in minutes”

    1. Dan Says:
      February 10th, 2009 at 7:13 pm

      looks awesome man, i’m going to try this out on our flex store locator app…

      Reply to this comment

      Rich Tretola Reply:
      February 10th, 2009 at 9:46 pm

      Let me know how it works for you.

      Reply to this comment

      Dan Reply:
      February 10th, 2009 at 10:24 pm

      Just installed it, anxiously awaiting the event reporting info!

      Reply to this comment

    2. Dewald Says:
      August 4th, 2009 at 11:08 am

      Thanks for the good work Rich! Busy implementing this on my mp3 player. I did a change all from mx to rx on my mxml and then changed everything back to mx that gave and error ;-) Waiting for the stats now.

      Reply to this comment

    3. Dewald Says:
      August 4th, 2009 at 11:09 am

      Thanks for the good work Rich! Busy implementing this on my mp3 player. I did a change all from mx to rx on my mxml and then changed everything back to mx that gave and error ;-) Waiting for the stats to come through now.

      Reply to this comment

    4. Silver Revolver – The Best Gun Simulator For The iPhone and iPod Touch | iPads, iPods, iPhones Says:
      May 15th, 2010 at 11:04 pm

      [...] Upgrade Flex Apps to RIATrax (Google Event Tracking) in minutes | EverythingFlex: Flex & AIR [...]

    Comments