Home >
Introduction
If you have used Google Analytics to monitor and analyze traffic on a website, you were most likely impressed with the ability it gave you to understand the nature of visits to and exits from the site, learn how visitors found it, discover how much time people spent there, et cetera. Recently, the Google Analytics team announced1 the availability of an open source, native AS3 API that enables you to utilize Google Analytics (GA) tracking from within your RIA.
This article introduces the newly available Google Analytics Tracking for Flash API (gaforflash). I'll cover where to obtain and install the necessary software, introduce basic concepts and terminology, show you how to use it in both component form and native code form, cover the primary methods for reporting activity inside a Flex-based RIA, and talk a bit about limitations and best practices.
The examples that accompany this article were compiled and tested against gaforflash version 1.0.1.319. There are 2 examples with full source code included. They can be viewed here: example 1 (source), example 2 (source). Also note that this article covers using gaforflash within the Adobe Flex environment (I used Flex Builder 3, build 3.0.2 to construct the examples). See the gaforflash project2 website for information regarding its use in the Flash authoring tool.
Downloading Google Analytics Tracking for Flash
Google Analytics Tracking for Flash is an open source project. After making event tracking available via the new GA Javascript library (ga.js), Google realized the need for a native AS3 implementation. Google Analytics Specialist Nick Mihailovski described the project's genesis: “We first got a group of 3rd party developers together to help us understand the difficulties they faced with tracking Flash. At the same time, we worked with a team of Adobe engineers to build the foundation of the GA tracking capabilities. Once at an alpha stage Zwetan Kjukov approached us to further develop the code. He brought Marc Alcaraz onboard and together, took the code to new heights. A huge amount of work was put in to re architecting the system to work in local/remote, embedded/disributed, Flash/Flex environments. The entire code base got new unit tests and an amazing ANT build was put together to simplify pushing new builds. Nov 17th [2008] we launched at MAX as an open source project.”
The website is located at http://code.google.com/p/gaforflash. From there, you can access the source code, read tutorials and ongoing discussions in the developer group, and download compiled SWCs.
The SWCs are ZIP archived and can be found under the downloads section of the site. The easiest way to include them in your project is to copy the analytics.swc file (contained in the archive's lib folder) to your project's lib folder.
Figure 1 (right): The GA analytics.swc placed in a Flex project's lib folder
Page Views vs. Events
The gaforflash API supports the transmission of two types of tracking information: pageviews and events (support for a third type—e-commerce transactions—is on the roadmap). While you may be tempted to just send events inside your event-driven RIA, there are in fact good reasons to use both.
You'll likely want to use pageview tracking in your RIA when you want to understand how a person navigates through your application. On the Google Analytics Dashboard, you'll be able to then learn which views inside your RIA result in the most exits and take advantage of the multitude of analysis tools that are only available with pageview tracking. The next section demonstrates tracking pageviews inside a Flex Accordion control.
Events should be used when you want to track information not relating to the user flow within your application. Event tracking allows four arguments to be recorded. The section below entitled “Event Tracking” demonstrates using Event tracking to record events involving the loading and playing of a video.
Tracking Page Views
Granted, the term “page view” is a bit of a misnomer inside a Rich Internet Application. But in the world of Google Analytics (which is most often used for HTML page tracking), the pageview is the primary metric around which most of the analysis tools are based. It makes sense to accept the term's inaccuracy and use them to your advantage.
The following example illustrates using the gaforflash code in component form, sending pageview tracking from inside a Flex Accordion component and examining the pageviews on the Google Analytics Dashboard.
1 <?xml version="1.0" encoding="utf-8"?>
2 <!--
3 Example 1. Embed the gaforflash component,
4 demonstrate pageview tracking.
5 Tested against gaforflash-1.0.1.319
6 -->
7 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
8 layout="absolute"
9 xmlns:ga4flash="com.google.analytics.components.*"
10 addedToStage="trackInitialView()">
11
12 <ga4flash:FlexTracker
13 id="tracker"
14 account="UA-111-222"
15 visualDebug="true"
16 mode="AS3"
17 />
18
19 <mx:Script>
20 <![CDATA[
21 public function trackInitialView():void
22 {
23 tracker.debug.minimizedOnStart = true;
24 tracker.trackPageview("/pane1");
25 }
26 ]]>
27 </mx:Script>
28
29 <mx:Accordion x="31" y="43" width="380" height="423"
30 change="tracker.trackPageview('/pane' + String(event.newIndex+1));">
31 <mx:Canvas label="Pane 1" width="100%" height="100%">
32 <mx:Text text="Welcome to Pane 1."/>
33 </mx:Canvas>
34 <mx:Canvas label="Pane 2" width="100%" height="100%">
35 <mx:Text text="Benvenuti a Pane 2."/>
36 </mx:Canvas>
37 <mx:Canvas label="Pane 3" width="100%" height="100%">
38 <mx:Text text="Bienvenue à Pane 3!"/>
39 </mx:Canvas>
40 </mx:Accordion>
41
42 </mx:Application>
Check out line 12. It shows the FlexTracker component added to a Flex Application in declarative form. Here's a breakdown of the properties:
- id: this property allows the FlexTracker to be referenced elsewhere (line 24 for example).
- account: this property holds the Google Analytics profile that the tracking is being sent for. This will be a profile that you (or your clients) control.
- visualDebug: this property puts the gaforflash API in debug mode. No events are sent to the GA servers, instead they are logged in a debugging window that's a child of the stage.
- mode: this value must be either AS3 or Bridge. Bridge mode should be used when your RIA is embedded within web pages that have GA Tracking enabled. This mode allows your RIA to adapt when, for instance, the GA profile for a site is changed. Bridge mode is accomplished through the use of ExternalInterface, so it's important for your RIA's embed code to specify the correct allowScriptAccess parameter. AS3 mode should be used in the counter-situation: instances where you do not control the HTML pages on which your RIA is included (for instance widgets copied to myspace.com), or you do control the HTML pages but there is no GA tracking enabled on them. See the gaforflash site3 for more information regarding the use of the mode property.
Tracking pageviews is accomplished using the trackPageview method of the FlexTracker component. In this example, those calls are on lines 24 & 30. The sole parameter to this method is the “URL” of the pageview, which of course isn't a URL but rather the name of a logical view inside the RIA, in this example the Accordion pane that is opened.
Example1 mimics the functionality of a website in that the three exposed Canvas components represent the three principal “views”, sending pageview tracking each time the Accordion's active pane changes. Note that because the initial view of the Accordion doesn't register a change event, I send an initial pageview on line 24.
In this example, since the visualDebug property is set to true (line 15) no data is actually sent to the GA servers. Instead it's captured in the logging window shown at the bottom of the page (see Figure 2) which allows you to see the three pageview events that would have been sent as the different panes are clicked. The visualDebug property is a good way to ensure you have your analytics code in the state you expect before you begin sending data to the GA servers.
Tracking pageviews in this manner allows me to use the GA Dashboard to understand how people interacted with my example application.
Note that any GA profile can receive pageview tracking from the gaforflash API (unlike Event Tracking which requires that your profile be white-listed by Google before you can see the data).
Event Tracking
Event Tracking is best used for monitoring activity inside your RIA that's not related to navigation. The following example sends GA Event Tracking data as a viewer interacts with a video component. Also, in order to illustrate the API's class constructors, care was taken to use no components in declarative MXML.
1 <?xml version="1.0" encoding="utf-8"?>
2 <!--
3 Example 2. Use gaforflash's classes,
4 demonstrate event tracking.
5 Tested against gaforflash-1.0.1.319
6 -->
7 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
8 layout="absolute" addedToStage="initExample2()">
9
10 <mx:Script>
11 <![CDATA[
12 import mx.events.MetadataEvent;
13 import mx.controls.Button;
14 import mx.events.VideoEvent;
15 import mx.controls.VideoDisplay;
16 import mx.containers.Panel;
17 import com.google.analytics.GATracker;
18
19 private var tracker:GATracker;
20 private var readyTime:Number;
21 private var video:VideoDisplay;
22
23 public function initExample2():void
24 {
25 tracker = new GATracker(this, "UA-111-222", "AS3", true);
26
27 //build video UI
28 var panel:Panel = new Panel();
29 panel.title = "Example 2";
30 panel.setStyle("horizontalAlign", "center");
31 panel.x = 20;
32 panel.y = 40;
33 panel.width = 545;
34 panel.height = 372;
35 this.addChild(panel);
36 video = new VideoDisplay();
37 video.autoPlay = true;
38 video.width = 525;
39 video.height = 300;
40 video.autoRewind = false;
41 video.addEventListener(VideoEvent.READY, handleReady);
42 video.addEventListener(VideoEvent.COMPLETE, handleComplete);
43 panel.addChild(video);
44 var button:Button = new Button();
45 button.label = "Pause";
46 button.addEventListener(MouseEvent.CLICK, handlePause);
47 panel.addChild(button);
48
49 readyTime = new Date().time;
50 video.source = "http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv";
51 }
52
53 public function handleReady(event:Event):void
54 {
55 // calculate time (in milliseconds) in which
56 // the video was ready to play
57 readyTime = new Date().time - readyTime;
58 tracker.trackEvent("Videos", "ReadyTime", "Video1", readyTime);
59 }
60
61 public function handleComplete(event:Event):void
62 {
63 tracker.trackEvent("Videos", "Completed", "Video1");
64 }
65
66 public function handlePause(event:MouseEvent):void
67 {
68 var button:Button = event.target as Button;
69 if (button.label == "Pause") {
70 video.stop();
71 button.label = "Resume";
72 tracker.trackEvent("Videos", "Paused", "Video1");
73 } else {
74 video.play();
75 button.label = "Pause";
76 tracker.trackEvent("Videos", "Resumed", "Video1");
77 }
78 }
79
80 ]]>
81 </mx:Script>
82
83 </mx:Application>
Line 25 initializes a GATracker. The first parameter to the constructor can be any DisplayObject that is on the display list, in the example it's simply the mx:Application. The second parameter is your GA Profile, the third parameter is the mode property—either Bridge or AS3—as discussed in the previous section. The final parameter sets the visualDebug property which was also described in the previous section.
This example tracks four events:
- On line 63, a GA Tracking Event is sent when the video component completes playing.
- On lines 72 and 76, a Tracking Event is sent when the video is paused and resumed.
- On line 58, the elapsed time of when the video begins loading to when it is ready to be played is sent in an Event.
The GATracker.trackEvent method is responsible for sending tracking events. The method takes four parameters:
- category: a string representing groups of events.
- action: a string that is paired with each category and is typically used to track activities.
- label: an optional string that provides additional scoping to the category/action pairing.
- value: an optional non-negative integer that associates numerical data with a tracking event.
The example provided above illustrates one common use of the category/action assignment; whereby “Videos” is the category, the action is the activity I'm interested in and the label (“Video1”) serves to narrow the category even further (imagine other videos labeled Video2 through Video5). The GA Dashboard allows you to slice and dice Tracking Events by these dimensions in various ways. For instance, I can view all “Completed” actions to see which labels (Videos1 through 5) resulted in the most complete views. For more information on classifying your categories, actions and labels, see the Google “Tracking Events” website4.
Line 58 shows the passing of the optional fourth value parameter to the trackEvent method. On the GA Dashboard, the values for the example ReadyTime action will both summed and averaged (see Figure 5).
Once events begin flowing into your GA Profile, you'll be able to view them using the GA Dashboard.
Notice the ReadyTime action in Figure 5. We can learn from this that, for the four visits on this date, it took on average 307 milliseconds for the video to be ready to play.
Implementation Notes
The Sprout software team has successfully integrated gaforflash into our architecture and now our clients have access to state-of-the-art traffic and usability analysis of their campaigns. Here are some implementation notes based on our experiences that you might find useful.
- Cache a GATracker instance for reuse instead of instantiating a new instance for each tracking event.
- Integrate pageview tracking into the controllers of your preferred MVC model.
- Involve your clients (and/or other stakeholders) early in determining the exact business analysis your implementation should allow.
- There is a 500 event limit on events sent per session. Consider adding a static event counter, and send an “event overflow” event after the 499th event in order to know the number of sessions that are underreporting.
- There is some latency (as little as one hour, as much as eight) from when the event is sent to when it appears in the GA Dashboard. And the visualDebug property can really interfere with your RIA's user interface. Consider logging event and pageview tracking to a Firebug console or other browser debugging platform.
Conclusion
Google Analytics Tracking for Flash offers unprecedented analysis capabilities for Rich Internet Applications. Using pageview tracking for user-flow analysis can help you understand the strengths and weaknesses of your interface design. Using event tracking can help you combine activity interactions with categories and numerical information.
Source Files
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Editing this article inspired me to build a component set to streamline the integration between Flex and Google Analytics. These components are a direct replacement for the base Flex components and are setup to automatically track certain events. I will be releasing this component set as a free library very soon. If you would like to try it now in our private beta, please contact me directly by sending a request with the subject "RIATrax tester" to rtretola[at]gmail.com.
Rich Tretola
Community Manager
http://www.InsideRIA.com
Twitter: http://www.twitter.com/richtretola
Nice, I will implement this into the Bojinx Navigation plugin :)
Hi Matthew:
I had written a test app,I run it and the debugger told me ,gatracker had send a Event to the GA, But when I open the GA Dashboard for the test,I didn't see any report or visit record. Must I deploy my app.swf to the Website Profile URL(When I create a website profile the ga told me to fill this)? I don't think so ,I saw the example you support,the Flex App was just running under the debug mode,and it seems really worked.
Can you tell me what wrong with my app?Thinks a lot.
Nice article - I could've used this a week ago!! Just kidding. I implemented GA in a site I just finished (http://hummingbirdbaby.com.au/) and eventually got the ecommerce tracking working. If you run visual debug with the mode set to AS3, you see the message "not implemented" when you calll the addTrans(), addItem(), trackTrans() methods. But if you run in Bridge mode it works fine. It took 4+ hours for the transactions to appear in my reports.
@Tiger, did a little patience work? (I made the same mistake)
Nice article indeed, but you can also have simple tracking by using the ExternalInterface and calling the javascript function yourself. This works also for content tracking. I haven't tried this one for events yet...
One thing that never gets mentioned is that gaforflash is quite heavy. In my code based flash approach
var tracker:AnalyticsTracker = new GATracker( this, "UA-111-222", "AS3", false);
i get something like 50 KB extra.
Or maybe I am missing something? Is there a lighter solution?
@Edzis
You're right, gaforflash does add about 50k. I do know some enhancements are planned to reduce the impact. This was discussed in the gaforflash forums (http://groups.google.com/group/ga-for-flash)... you might want to follow the discussion or make suggestions there.
Rich, do you mean automating tracking calls like TargetStat does?
@TargetStat
I was not aware of TargetStat. RIATrax is a set of components that are direct replacements for Adobe Flex components and offer built in analytic event tracking. You can see more about RIATrax and download the beta at http://labs.happytoad.com/RIATrax.
I also wrote a post showing how to use RIATrax at http://blog.everythingflex.com/2009/02/10/upgrade-flex-apps-to-riatrax-in-minutes/
Absolutely wonderful!
Thanks for the article, So how did you get event tracking enabled on the GA site? I've submitted the form on gatorflash and still no event tracking -- sent an email to google team - and no response. Any thoughts? Who do I contact?
Dan
Thanks for the article, So how did you get event tracking enabled on the GA site? I've submitted the form on gatorflash and still no event tracking -- sent an email to google team - and no response. Any thoughts? Who do I contact?
Dan
Hi Dan Zeitman,
You just need to complete this form : http://code.google.com/p/gaforflash/wiki/EventTrackingRequest
Hi Mathew,
Excellent post, inspired me to try flash tracking.
Go it to work, getting hits but browser (Firefox, IE doesn't) keeps showing transferring data from www.google-analytics.com... on the status bar.
Is this normal?
Cheers,
Andres
Would you recommend to separate analytic page views between our destination site and a distribution platform?
Thanks
I personally would, I mean it just would look so much more profressional and make a better presentation of your site as a whole.
Free iMac
This is pretty nice when used with SWFAddress. Now I have to wait a week to see if both SWFAddress and GA event tracking are outputting the same numbers for pageviews. :)
This looks like an excellent solution! well done!
I have a question about a general issue we are having with event tracking...
If we call the _trackEvent function without first calling the _trackPageview function we get the following error:
"'undefined' is null or not an object"
If we call _trackPageview first then the _trackEvent call completes sucesfully, Any ideas what could be causing this? here is our code...
try{
var ga = _gat._getTracker("XXXXXXXX");
ga._setSessionTimeout("10");
ga._trackPageview();
var success = ga._trackEvent("X", "X", "X", 0);
document.write("Track_Event Returned: " + success);
}
catch (err) {document.write("Error = " + err.description)}
Any help or advice would be greatly appreciated,
Regards,
Chris V
Interesting book. Very useful and full of practical tips on today’s web analytics challenges and opportunities. A step by step guidance is presented for people who need a web analytical strategy to succeed
yes there is some lack of documentation, but that does not make the API itself “crappy” domain registration
and yes sometimes it’s not the dev who write the documentation and so few things can be fuxored in the writing of the doc
I personally can not edit this doc, but I ll point the personn that can to those little mistake, like y eah you’re making a big fuss about little mistakes in a documentation (which can always happen)
Quick question with regards to the event tracking API: what is the default value of the fourth, optional "value" int parameter of the GATracker.trackEvent method?
I'm writing a wrapper class around this, and I am making the default value of this 4th parameter -1. Per the description above, this parameter needs to be a non-negative integer, so whenever it's -1 I simply won't pass it through. However, if I know that the default value in the GA API is -1 anyway, then I can simplify my wrapper code and just always pass it though:
public function trackEvent(category:String, action:String, label:String, value:int = -1):void
{
// [...removed other code...]
if (value > -1)
_tracker.trackEvent(category, action, label, value);
else
_tracker.trackEvent(category, action, label);
}
Could be simplified to the following if I know what the default value of "value" is in the GA API:
public function trackEvent(category:String, action:String, label:String, value:int = -1):void
{
// [...removed other code...]
_tracker.trackEvent(category, action, label, value);
}
Thanks!
Erik
Well, I was going to go and write all about this myself, but Matthew McNeely has beaten me to it, it seems, with his coverage of using Google Analytics in Flash and Flex applications.
Well, I was going to go and write all about this myself, but Matthew McNeely has beaten me to it, it seems, with his coverage of using Google Analytics in Flash and Flex applications.
pregnant woman
Now for a simple Flash movie, you’d traditionally host the Flash file in an external website, and add the tracking to the HTML pages. If you’re doing something a little more different – or are obsessive about knowing how your users are interacting with the content – you might be interested to know that there is support for actionscript-initiated tracking, and that it’s supported by Google themselves (a good sign).
idiot proof diet reviews
Well, the Adobe site said this article was intended both for light Flash developers and more advanced... I've done a lot of Flash, and I found this article just about totally unintelligible.
Couldn't there please be a simpler article that says:
To track events in Flash in Google Analytics:
1) put this code in your Flash document's first frame:
"give the code strip"
2) download this file and either import it as an extension, put it in the same folder as your swf, or (whatever):
"give the file link"
3) on events you want tracked, put this code:
"on (release or whatever) {
give_the_code_strip;
}
? Right now I've spent way over an hour just trying to decipher this extremely wordy, not-simple article of instructions that are buried and difficult to find and decipher.
@deborah
I'm sorry that you didn't find the article useful and that you found it overly complex. Note that this site is targeted primarily to Flex RIA developers, hence the Flex examples. I stated this in the introduction, perhaps you overlooked it.
The gaforflash group has better documentation on using GA Tracking for Flash inside Flash content. I'd recommend giving that a try: http://code.google.com/p/gaforflash/
Good luck.
Ok, I'm not a programmer, but I could really use some guidance. I'm trying to install the gaforflash component into Flash CS3. I can't find the access to the application-level configuration folder to reach the \Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components area, but I am able to install it in the \Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components section. When I open up Flash (prior to opening a specific file), I can see the GA icons in the components panel, but then when I open up a file, the icons disappear. So, where did it go?? and How to I get it in there?? Any help would really be appreciated. I'm going around in circles. Thank You.
Traditional application programmers found it challenging to adapt to the animation metaphor upon which the Flash Platform was originally designed. Flex seeks to minimize this problem by providing a workflow and programming model that is familiar to these developers. MXML, an XML-based markup language, offers a way to build and lay out graphic user interfaces.
Robert Rodriguez
I feel that google analytics is one of the best market and everyone need it. And it is very easy to use and free usage. I had note all the Coursework tips of the google and sharing with others.
Thanks for this. I really need to analyse my traffic more.
It could make such big difference to my Free iPod site
1di2aj
Thank you so much for sharing this. This will help a lot :) John, Utility Warehouse Distributor, UK
thanks for the great Salvia Its going to help me out alot
Salvia is the way I was thinking and your correct about all this and thank you for the feedback!! great job !! 5 star !!
Thanks for the info. It will be very useful for me!
Nice!
This is really nice blog, it is helpful for my job.
Pretty nice description about different of features of google analytics, being a web master this post seems pretty interesting and informative, in short this page worth reading. I am using google analytics for couple of my web hosting related sites from last three years, honestly am quite satisfied with the results of analytics but not with the google webmaster tools.
I've got gatorflash up and running on an embeddable video player. Everything seems to be running smoothly, except I'd like to track what domain the video is playing from. Do you have any ideas?
Here's an example implementation of generic event based Google Analytics in flex
http://bytearray.brixtonjunkies.com/2009/08/20/flex-google-analytics-howto/
Very useful article, thanks. I always find Google Analytics seems to under report my visitors when compared to the stats on other counters, sometimes by as much as 50%.
If you have used Google Analytics to monitor and analyze traffic on a website, you were most likely impressed with the ability it gave you to understand the nature of visits to and exits from the site, learn how visitors found it, discover how much time people spent there, et cetera. Recently, the Google Analytics team announced1 the availability of an open source, native AS3 API that enables you to utilize Google Analytics (GA) tracking from within your RIA on debt consolidators.
This article introduces the newly available Google Analytics Tracking for Flash API (gaforflash). I'll cover where to obtain and install the necessary software, introduce basic concepts and terminology, show you how to use it in both component form and native code form, cover the primary methods for reporting activity inside a Flex-based RIA, and talk a bit about limitations and best practices.
Your article make my job a lot easier, am pretty new in this field and was looking for some decent article or tutorial on google analytics and seo, it really worth reading and pretty easy to understand in order to learn google analytics. I have just start working for a webhosting company, so in order to analyze their traffic and conversation rate i must know how to use google analytics. What i came to conclusion till now, that google analytics is a lot better then the hosting company traffic stat providing softwares.
Hey guys if you want to track an Adobe AIR application you should look at http://www.airanalytics.net.
We can tell you how many installs you have had, the number of uses etc… we can even keep tracking when your app is offline….
Air Analytics currently in private beta but we are looking for people to test out our system. So if you register I will activate you and you can have a bash with our system.
Thanks Paul
I'm still getting to grips with Analytics, but there is no doubt it is a comprehensive package, especially when coupled with their other webmaster tools - I encourage anyone with spare time to spend a few hours looking through and getting used to the data. You will find out a huge amount about where your visitors come from and what they do on your site. I've really been able to improve the performance of my free macbook pro site simply by spotting where the most productive groups of visitors come from and concentrating my efforts there.
What's the point of putting hard work in if you're concentrating on the wrong things?
This is great but still cases exist that need expert attention. Mine is a Magazine engine that loads swfs that load players...
I wish i had time to indulge in the detail of implementing this but i do not.
is there a service or team or consultant out there that can assist me?
www.ctndigital.com
Regards,
j
Well till now i have fail to understand the working of google search engine, well i was watching italian soccer on my tv and doing link building for one of my client. I saw that pages which have Pr5 were changed to Pr2 and i had to do all the work again
Well i like the google analytical i have also use alexa for checking visitors but find google analytical very good. Paul Jugendherberge did a good research on my site and find out what my visitors are searching on my site and put more related information.
Is there any software available by now that uses this Google Analytics API? Would be interesting to me as I need to track visitors to my website where I have a series of articles on how to get my ex back
Great post for GG analytics and Flash/Flex integration. Checking these links for more free pdf manuals and ebooks. Enjoy!