Tutorials

Analytics in your Flex mobile apps

17 Comments 20 October 2011

Analytics in your Flex mobile apps

Analytics is a natural asset of an efficient website. If you don’t collect, measure and analyze your internet data, you cannot maintain and optimize your web applications. Surprisingly, analytics are rarely used for Enterprise applications, and that’s shocking. IT services deliver complex applications, with a lot of screens, tabs and advanced navigation components and they just never analyze how their RIAs are used. Internal apps would benefit so much from analytics solutions. I feel that we are reproducing the same mistake with mobile applications. As we are living the early-ages of mobile apps, it’s time so standardize analytics in Flex mobile apps. Adobe Omniture is the most professional analytics solution of the market. As you can guess, it’s very easy to add analytics tags in a Flex application. We even developed an Omniture extension for Flash Builder. Check this article is you are Omniture customers: http://www.adobe.com/devnet/flex/articles/sitecatalyst_extension_flashbuilder.html I know that you are not all Omniture customers, and for simple needs you may choose a free solution such as Google Analytics that would answer your basic needs.

Google Analytics is also trying to ease the addition of tracking events inside Flex applications. Unfortunately, the current version of the Google Analytics Tracker library doesn’t support Flex mobile projects. As I really needed this feature for a mobile app (that I will unveil next week), I modified the source code of the GATracker library and now it works like a charm. You can track everything, I mean everything:

- If you have HTTPService requests, you can track how many successful results your users get and  compared this number with the number HTTP fault events.

- If you have 5 tabs in your mobile apps, measure what is the most used tab, check if they are all used. You can also imagine to track the most common path for your app and track scenarios such as “the user hits tab 1, then tab 3 and then tab 2, is the main use case”.

Your mission is to defined what makes sense in your application, and which information will help optimizing it. Here are the steps I used to add Google Analytics tracking information in my mobile application:

1. Download the source (not the SWC) of the Google Analytics for Flash library:  http://code.google.com/p/gaforflash/

2. Open your Flex mobile project and add the code inside your project. It will create a com.google.analytics package with a lot of AS3 classes.

In your Google Analytics console, you need to measure an existing website (in my case riagora.com) and add the classic Google Analytics JavaScript library. Then your website will be validated and you’ll be given an ID for your website by Google. We’ll surcharge the tracking information of your website with mobile tracking information. The ID of your website should look like this chain of characters: UA-2999999-2.

3. On the application level (your root MXML file), create an AnalyticsTracker variable and instantiate a GATracker. The tracking variable is public. Add this code for instance:

public var tracker:AnalyticsTracker;
protected function viewnavigatorapplication1_creationCompleteHandler(event:FlexEvent):void
{
	// TODO Auto-generated method stub
	tracker = new GATracker(this,"YOUR_GOOGLE_ANALYTICS_WEBSITE_ID","AS3",false);
}

4. If you want to track something, just call the trackPageview method. It’s waiting for the name of the HTML page as a parameter. Create custom names such as “/mobileApp-Success”, or “/mobileApp-tab1″.

protected function button1_clickHandler(event:MouseEvent):void
{
	// TODO Auto-generated method stub
					FlexGlobals.topLevelApplication.tracker.trackPageview('/mobileApp-tab1');
}

5. Now if you compile your project, you’ll get error messages such as the famous TypeError #1009, also known as “the error that doesn’t help”. Let’s start modifying the Google Analytics code.

6. Open the class components/FlexTracker.as

7. Search and replace this code:

var appclass:Object = getDefinitionByName( "mx.core::Application" );
 _app = appclass.application;

by code that doesn’t refer to MX Application. In Flex 4.5, we don’t use MX applications anymore, but we can use the FlexGlobals class ;)

appclass = getDefinitionByName( "mx.core::FlexGlobals" );
 
_app = appclass.topLevelApplication;

8. Then we need to add the root URL of our virtual website (in my case riagora.com). By default, the library tries to get the URL from browser information… well this cannot work with a mobile app running in AIR, so we’ll hard-code the URL Open the GATracker.as class. Comment the _env.url line and add your own root URL.

//_env.url = _display.stage.loaderInfo.url;
_env.url = "http://www.riagora.com/";

9. We still have to deal with small ‘stage’ issues. Open the core/IdleTimer.as class and comment two lines of code that deal with the Stage:

_debug      = debug;
         //   _stage      = display.stage;
            _buffer     = buffer;
            _lastMove   = getTimer();
            _inactivity = inactivity * 1000; //milliseconds
 
            _loop.addEventListener( TimerEvent.TIMER, checkForIdle );
            _session.addEventListener( TimerEvent.TIMER_COMPLETE, endSession );
          //  _stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseMove );

10. And that’s it!!! Within the Google Analytics console, you can now create custom dashboards, filtering the visited pages that starts with “/mobileApp”.

11. You can download this sample Flex 4.5.1 project that contains my updated Google Analytics library. Here is the link to this Flash Builder project: http://riagora.com/pvt_content/android/GoogleAnalytics.fxp

WARNING: Google Analytics doesn’t display the results in real-time ! You have to wait for 24 hours before seeing some tracking results.

 

 

 

Post to Twitter

Your Comments

17 Comments so far

  1. Hugo says:

    As always, good job :)

    I have same questions:
    1. This dont slow down a little the application ?
    2. This is prepared for off-line use, I mean dont give an error or slow down because of that ?

  2. admin says:

    Good point. You’ll have to code your own sync framework for offline/online use cases.

  3. Hugo says:

    About the offline and sync its understandable but my main concern its about performance.

    Currently I love (and a lot of developers :D), the possibility to code Flex for multiple mobile plataforms (the Flex mobile is becaming the new Java for mobile devices :)) but like the Java at the beginning its very very slow, even with all the techniques for code optimization.

    I hope that in fact the Flex 4.6 improve a lot this inicial problem as promised in the specs.

  4. @hugo I can tell you that I’ve used this for a year and it hasn’t been an issue. My app is Queue Manager and I have analytics since last december using this tool.

    I do agree that there is no “offline” support, but for me and the quantity of users that I have the amount of lost data is very minimal.

    If you watch the data that is actually sent via service capture the payloads are very small.

    I’ve been trying to see about getting some sort of trial Omniture account but no one has responded to me. So far this is the best bet that I’ve found.

  5. admin says:

    @Hugo You can build very performant apps with Flex. I’ll unveil few apps I’ve developed lately for iOS on this blog. The apps are public, and you’ll see that they perform pretty well ;)

  6. Hugo says:

    Michael.

    About iOS I don’t know and no user complain about the performance. I’m talking about Android and starting in the slow booting and ending in the slow transition between views.

    In this case are you refering to Flex 4.6+Air 3 or Flex 4.5.1 ?

    In my case I’m talking about Flex 4.5.1+Air 2.7 and with the update from the Android AIR 2.7 to 3.0 it becames worst (seems because the default densite changed)

  7. Jason says:

    Thanks, that is exactly what I needed.

  8. The GA code base is very poorly written… aack. Even worse, the GA instance should not have to be in the displayList; but needs to be in the displayList for debugging.

    Unfortunately, your fixes have some issues:

    1) In IdleTimer, you disable the mouseMove feature to maintain the GA session. Instead use
    `
    if (_stage != null)
    _stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseMove );
    `

    2) Manually specifying the URL (in your solution) locks the code base to ONLY one deployment option. Not good.

    _env.ga_internal::url = “http://www.riagora.com/”;

    Another solution is needed for that one.

    Thanks for your article. I has inspired me to create a Swiz [GATracker] metadata tag/processor.

  9. Corrections to earlier post:

    1) In your IdleTimer modifications, you disabled the `MouseEvent.MOUSE_MOVE` listener that was used to preserve the session from timeouts.

  10. Ecevit says:

    Super article. Bien pratique.
    Merci Michael!

    PS : c’était sympa de te revoir après tant d’année!

  11. Julien says:

    Exactly what i need, thanks.

  12. Andrew Wells says:

    Thanks for this article, it has been a great help. I set up google analytics and everything is working great; however, it almost doubled the size of my application from ~8 mb to ~ 15 mb. Is that normal?

  13. I was searching for analytics in Flex mobile app and bam! just found the perfect solution.
    Thanks Michaël.

  14. Vicker says:

    Cool one. Struggling for quite some time with the one on Google Code but no luck. Thanks, Michael.

  15. Vicker says:

    Hi Michael,

    Somehow I found that Google Analytics is unable to recognize iOS devices in the report. They are all marked as “no set”. Any ideas?

    Cheers
    Vicker


Trackbacks/Pingbacks

  1. Cool Stuff with the Flash Platform - 10/24/2011 | Remote Synthesis - October 24, 2011

    [...] adding analytics into your mobile application, Adobe evangelist Michael Chaize shows you how to add free Google Analytics into your Flex mobile apps using a modified version of Google Analytics Tracker library that he [...]

  2. Analytics in your Flex mobile apps | RIAgora « marcusjpotter - November 30, 2011

    [...] Analytics in your Flex mobile apps | RIAgora. [...]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes