|By Rich Tretola | February 10, 2009|
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" /]
So, I simply changed the folowing component declarations from:
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:
In the Edit screen, I only made one change and that was from mx:Button to rx:Button. Here is the before:
And the after:
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" /]
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.|