SEO & SEM

Google Analytics in your Flex mobile apps

google-analytics-flex-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.

Comments
Share