It took so much time for a library of analytics to be made for Flash, I thought there might be a chance that nobody did anything like this for mobiles. So we got all excited (like so many other time), we started thinking how we would build this. But today I searched on the web and found Flurry a company that has an analytics division that does exactly this. Well not exactly how I would do it but about 85% the same. So my bubbles is a bit busted.

Flurry does it mostly right but their interface is a bit complicated and they didn’t make their analytics that specific to mobiles. There are plenty of concepts that exist in the mobile world that are new: what people do in their first and last run of the application, the number of tap (click with fingers) by session, the accelerometer, etc. And they don’t track that, yet. Also they provide an  API for events, but not for navigation (pageViews in the GA world). I think navigation still has an important role in the analytics of an application than in the analytics of a website. You want to know what the users did in a certain section of your app (how many taps in the help section for example).

So all of that could be implemented and would give a better service than what Flurry is offering. The problem is that their platform is already built and even if there is not much competition (they seem to be the only ones doing this), it would still be hard to beat their momentum.

So what do you think? Should I invest time in this project knowing these risks, or should I let this go and wait for another idea?

Here are a couple of tips to help yourself on the test: first I hope you have played a bit with Google Analytics that will help a great deal! Secondly whatch all the videos in the conversion university. Not only do they help a great deal for the test, but they are very instructive and well done. Having knowledge of Adwords will also help a lot since a third of the questions will be on the topic of integration of Adwords and Google Analytics (some plainly on Adwords!!).

Go get certified now while I look for synonyms for the word “also”.

In this time of economic crisis, marketing budgets are shifting from traditional to digital because of the later’s ability to provide data about its effects. Flash has never been great at web analytics, but a new library, Google Analytics for Flash, is going to change this. This article will focus on how to install this library, how to use it and will explain some of its key concepts.

Installation

Well the first thing to do before getting started is to install the library. This might not be as obvious as it should be so I thought it would be good to explain it here. When you download the zip file from the Google Code page for Google Analytics for Flash, what you’ll get in it is two SWC files. Now SWC files are a common thing in the Flex world, but they are not so common in the Flash world. This is where the difficulty lies.

Flash CS4

There is a new feature in Flash CS4 that enables you to import SWC libraries a bit in the way that you would do it in Flex. All you have to do is open the publish profile and click on the Flash tab. Now click on the Actionscript 3 settings; on the window that will pop-up you will see a red envelope icon, clicking on this will enable you to import the SWC file.

Flash CS3

Now it ain’t that easy for Flash developers still using Flash CS3 (the majority of them I guess). I have found two ways of getting the same results.

First you could use a Subversion client like TurtleSVN to checkout(download) the source code of the library. This will give you access to the Actionscript files (.as) that were used to make the SWC library. Once you have those files just copy them in your project directory and you’re ready to go.

If you don’t want to bother with svn, you can copy the SWC files in the Component directory of your Flash installation. Now this is the intended use of the SWC files by the makers, but I found it is more complicated than it should have been. If you want to do it that way copy the SWC files in the following folder in windows:

C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components

And the following folder if you are using a Mac:

Macintosh HD:Applications:Adobe Flash CS3:Configuration:Components

The next time you will start Flash, in your component window, you should see the Google Analytics for Flash components. Drag the component in the library and you can go on to the next step.

On to tracking

Tracking is the easiest part of the process and is fairly intuitive. You have to do a bit more work than you would with an HTML website, but in the end you gain more control.

All you have to do is import the library and create the tracker this way:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
 
var _tracker:AnalyticsTracker = new GATracker( main, "UA-7777777-7", "AS3");

The first parameter in this case refers to a DisplayObject on the stage or the stage itself. The second parameter is the id for the Google Analytics profile you want the data to be sent to. The third parameter is the mode in which the tracker will function, in this case AS3 mode. An other mode that the tracker can be set to is the Bridge mode; I’ll discuss the difference between the two modes later on.

You are now ready to track. The tracker you just created will give you access to two method of tracking: tracking pages and tracking events.

For pages, you can clearly grasp the concept when you think of an HTML website. Each time the browser will refresh or change a page and that page is from your website, a pageview is sent to Google Analytics. Now you can translate the same concept to Flash and rich internet applications, but those tends to have less pages than HTML websites. When I try to define pages in my Flash website, I try to think in sections, example: the contact section, the home section, the help section etc.

Here is the code you would write to track a pageview:

_tracker.trackPageview(yourSectionName + "/");

Events are a metric that is more suited to Flash and RIA than pageViews. Event tracking is still in beta so it is not enabled on all profiles. You can ask Google to activate events on your account by filling the form found on this page:

http://code.google.com/p/gaforflash/wiki/EventTrackingRequest.

Events are best suited to track user’s interaction with your project: how many user fully saw your video, how many clicked on the mute sound button, etc.

This is what you would write to send and event:

_tracker.trackEvent("English", "Client Satisfaction", "Question 3", value);

The trackEvent funciton can take up to 4 parameters, the last two being optional. They are in order Category, Action, Label and Value and are all Strings except the last one that has to be a non-negative integer. Google Analytics suggest some use of these parameters, but in the end, it’s up to you to decide how you want to define them. More information about Events here:

http://code.google.com/apis/analytics/docs/eventTrackerGuide.html

Bridge vs AS3

I have only talked about the AS3 mode so far because it is the one I use more often. It is mostly used when you’re entire site is made in Flash or also when your content will be embedded somewhere you don’t have access to the HTML. This is the case for widget and games that are embedded on multiple sites.

As for Bridge mode there is two cases where I would use it. First if your Flash is just a part of a bigger website done in HTML that already uses Google Analytics, then using Bridge mode will use the tracker of the html page blending in the data of the Flash content with the rest. Secondly, not all of the Google Analytics API is available using AS3 mode so if you need advanced functions or ones that are not enabled than you have no choices but to use Bridge mode. The code is a bit different from AS3 mode so I’m going to provide a sample:

var _tracker:AnalyticsTracker = new GATracker( main, "window.PageTracker", "Bridge");

The first parameter in this case still refers to a DisplayObject on the stage. The second one has to be the name of your Javascript PageTracker Object preceded by “window.” and the last one is to tell the tracker to be in Bridge mode. Since, Flash will need to communicate with the javascript while in Bridge mode, you have to be sure that allowScriptAccess is set to always in the html page that embeds the Flash content.

Visual Debug

One cool thing about GA for Flash is the Visual Debug. All you have to do to enable it is add an extra parameter when you initialize the tracker.

var _tracker:AnalyticsTracker = new GATracker( main, "UA-7777777-7", "AS3", true);

Doing this will add a layer on top of your application where all the actions the tracker performs will be listed.

What is neat about this is that you can now see instantly what you are tracking. With the javascript API, it is hard to see exactly what you are sending because you have to note down what you did and go check 4-5 hours later to see if tracked correctly (Google Analytics shows data after a delay of a few hours). With the Visual Debug you can see if you are sending more events than you should or if one label is misspelled etc.

Even if Google Analytics for Flash is a great library, it has some drawbacks, the biggest one being that it will add 40k to the size of your Flash content. But even with that in mind, I think it is worth using in every Flash project. Go on, get tracking!

Ressources

Google Code:

http://code.google.com/p/gaforflash/

Developer group:

http://groups.google.com/group/ga-for-flash?pli=1

Adobe Max presentation on Google Analytics for Flash:

http://tv.adobe.com/#vi+f15385v1040

import org.httpclient.HttpClient;
import com.adobe.net.URI;
import org.httpclient.events.HttpResponseEvent;
import org.httpclient.events.HttpRequestEvent;
import org.httpclient.HttpRequest;
import org.httpclient.http.Get;
import org.httpclient.events.HttpDataEvent;
 
var _firstBuffer:String = "";
var _secondBuffer:String = "";
 
//this first connection will get the authorization token by sending the user name and password for Google Analytics
function submitForm(email:String, password:String):void {
  var client:HttpClient = new HttpClient();
  var uri:URI = new URI("https://www.google.com/accounts/ClientLogin");
  var variables:Array = [{name:"accountType", value:"GOOGLE"}, {name:"Email", value: email}, {name:"Passwd", value: password}, {name:"service", value: "analytics"}, {name:"source", value: "your-application-identifier"}];
  client.listener.onData = _onFirstData;
  client.listener.onComplete = _onLoaderComplete;
  client.postFormData(uri, variables);
}
 
function _onFirstData(event:HttpDataEvent):void {
  _firstBuffer += event.readUTFBytes();
}
 
//this second connection will request information to GData
//in this case account info for Google Analytics by
//putting the auth token in the header of the request
function _onLoaderComplete(event:HttpResponseEvent):void {
  var tempArray:Array = _firstBuffer.split("Auth=");
 var  _authToken:String = String(tempArray[1]);
 
  var client:HttpClient = new HttpClient();
  var uri:URI = new URI("https://www.google.com/analytics/feeds/accounts/default");
  var request:HttpRequest = new Get();
  request.addHeader("Authorization", "GoogleLogin auth=" + _authToken);
 
  client.listener.onData = function(event:HttpDataEvent):void {
    _secondBuffer += event.readUTFBytes();
  }
  client.listener.onComplete = _onSecondLoaderComplete;
  client.request(uri, request);
}
 
function _onSecondLoaderComplete(event:HttpResponseEvent):void {
  trace (_secondBuffer);
}

As you can see in order to circumvent the Authorization header restriction I am using the as3httpclientlib library which requires the as3corelib and as3crypto libraries to compile. Using the same principle you should be able to connect to Google APIs from your AIR application.

First off, the library only works for Actionscript 3, which is not a big concern to me because I hope I will only be doing Actionscript 3 projects from now on. Also, when you include the library (at least in AS3 mode, haven’t tested in bridge mode) it will add about 40k to your file size. This is not so bad, but not so good at the same time. Making this smaller could make it accessible for a broader range of projects. Also I tried to import both the SWC you find on the download from Google code, but none of them would work; Flash would complain about not being able to import them. I finally circumvented that problem by checking out the source code using SVN.

Once you’re set up, one off the coolest things you can do is set the tracker to debug mode; it gives you some insights about what is going on under the hood. But for those of you who don’t want to go through all that trouble I just posted it down here:

Here is the Actionscript 3 code I used to make my test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
 
var tracker:AnalyticsTracker;
 
tracker = new GATracker( this, "UA-639032-8", "AS3", true );
 
button1.buttonMode = true;
button2.buttonMode = true;
 
button1.addEventListener(MouseEvent.MOUSE_DOWN, _onBut1Down, false, 0, true);
button2.addEventListener(MouseEvent.MOUSE_DOWN, _onBut2Down, false, 0, true);
 
function _onBut1Down(event:MouseEvent):void{
	tracker.trackPageview("/test1");
}
 
function _onBut2Down(event:MouseEvent):void{
	tracker.trackEvent( "say", "hello world", "test", 123 );
}

In this code, the fourth parameter in the constructor of the GATracker object is the debug parameters, setting it to true will enable this view.

My main goal for making this was because I had read that in AS3 mode you could track events yet (check in the comments). So I created a new profile in my GA account for testing purpose and set all this up, but the major problem was that not all profile get event tracking activated.  Actually, I have written a post about event tracking being out, but my guess is that Google is extending the beta (Google sure does love betas) to more accounts and that mine was one of them. But even if your account has been activated for event tracking, newly created profiles won’t be activated.

So I had some test running but no way to check the results. That was true until I found this hidden gem (I am probably shooting myself in the foot right now and should keep this a secret but hey!) in the midst of the Google code website for Google Analytics for Flash : A request form to activate event tracking on certain profile of a Google Analytics account. I did so, and three days later I could see the results of my tests. Event tracking was working just fine in AS3 mode. The form says that they will accept 500 requests so you better get profiles activated if you plan on using it. But even if your account is not activated Google will still record the events; it’s just that you won’t be able to see the results until it is activated. We have some projects that fall in that category; mostly the Twist Image Holiday card : It’s a wonderful life (shameless plug). We hope event tracking gets out of beta really soon!

Well that’s about it, see you tomorrow as I try to complete this week of post every day.

On Google Analytics side, nothing changed; no specific stats just for Flash,  just the good old interface we all know.  On the Flash side, nothing changed much there either; instead of doing this:

1
2

 
ExternalInterface.call("pageTracker._trackPageview('/somepage');");

You now do this:

1
2

tracker = new GATracker( this, "window.PageTracker", "Bridge", false );
tracker.trackPageview( "/somepage");

From the look of it, it’s actually more code than before.

The cool thing about GA for Flash is the ActionScript 3 mode. In that mode, you can call the tracker even if the JavaScript code wasn’t imported in the HTML page the Flash file is embedded. Now that is a possibility that we didn’t have before. So in a context where you do not have control over the HTML you flash will be embedded, this will enable you to do analytics just the same. I have also seen in the road map for the project that they want to implement it for Adobe AIR also; this will be very useful.

What will you be using Google Analytics for Flash for?

Google released today a forum for their analytic counterpart and I had already a question waiting for them: Why with all the documentation being available about it since at least February haven’t you released the Event tracking? But before you ask a question like that, with that tone, you check what you are asking. So I go in my Google Analytics account and under the Content section there it was, just lying there, waiting for me to discover it : Event Tracking (don’t know if this has been released officially, but I have seen it on 2 different GA account so far).

What’s up with all this fuss? We could already somehow track events using pageTracker._trackPageview.

You are right, but being able to track events as a separate thing than a pageview is really important.  Not that much for a website completely made in Flash with only one HTML page, but for anything else, it sure is important. You see, when you use pageTracker._trackPageview to track events, the statistics you gather that way counts as pageviews while they are not really, so it kinda skews all your results. You can still draw conclusions from them, but it is not as precise.

With pageTracker._trackEvent, there is a distinction between event and pageview so it doesn’t skew your data. Plus the _trackEvent methodhas 4 parameters giving you more options about what you want to track.These parameters are the category, the action, the label and the value; more informations about them in Google’s documentation.

There are tons of stuff that would be appropriate to track with events like the answer of a quiz, which track in your MP3 player is most played etc. For Flash, any action you want to track and is not really a page can be tracked that way. You could have done that before using a database and server-side scripting, but it is much more convient to not have to bother with that and to have all your stats in one single place.

I am going tracking this minute. What are you going to track?

I really have to look into the SEO  example that was released along version 2.0. It is one of my goal for the next month along to getting to know PureMVC better.

Has some of you might know, Google Analytics has released a new tracker code (from urchin.js to ga.js). What more does it do for you right now? Not much, it’s supposed to be smaller in size and that’s about it. No event yet (there was a lot of buzz around events in Google Analytics and there is actually documentation on how to implement them but they are still in closed beta; we will have to wait on this one), no new functions. But if your launching a new website I would advise putting the new tracker code (ga.js) because it will save you maintenance time when you will want the new features.

So does SWFAddress works with the new code? Well the answer is yes, and it is pretty easy to make it work here is sample code showing you how to do it:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-xx");
pageTracker._initData();
</script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js?tracker=pageTracker._trackPageview"></script>

The most important part of the code is the last line where you tell SWFAddress which tracker to use. That’s it! I hope this saves you some time.