02.24Tutorial - Using Google Analytics to track activity inside of a Flash or Flex AS3 application
Hi Everyone,
do you develop complex AS3 applications and wonder how people interact with them? You could build yourself a webservice to which you would send event details, but then how would you visualize the data?
The answer can be quite simple.
Google Analytics offers you a simple way to track custom events. You call the following using Javascript, after the google analytics initialization code:
-
// for new version
-
pageTracker._trackPageview("whatever you want here");
-
-
// for old version
-
urchinTracker("whatever you want here");
Now what you need is interesting urls, which can describe the action that just took place. One application that I needed to track the activity in was the Music Nation Launch Pad. People can switch views, look up artist info, vote, add things to their queue, favorite certain medias, the application itself is quite complex ( 200 classes ). So I thought the answer was:
- /launchpad/media/rate/[mediaid]/[rating]
- /launchpad/media/favorite/[mediaid]
- /launchpad/artist/viewinfo/[artistid]
- /launchpad/queue/addmedia/[mediaid]
and so on.
But now, how do you do this from ActionScript 3? The answer is mindblowingly simple: use the ExternalInterface or navigateToURL. I prefer ExternalInterface, because it is made exactly for this purpose: calling Javascript functions (and offering hooks into ActionScript from Javascript)! Here is a quick sample, this function belongs to my REST webservice client class, which is a singleton (meaning I can refer to it from anywhere easily).
-
// these are to be imported if you prefer navigateToURL instead of ExternalInterface
-
import flash.net.navigateToURL;
-
import flash.net.URLRequest;
-
-
// there are to be imported if you prefer ExternalInterface.. my choice..
-
// the other option drives you nuts while testing from Flash CS3 because it keeps
-
// opening browser windows each time a call is sent.
-
import flash.external.ExternalInterface;
-
-
public function logAction(action:String):void
-
{
-
// add the "/launchpad/" prefix to all actions
-
action = "/launchpad/" + action;
-
-
// the navigateToURL way
-
navigateToURL(new URLRequest("javascript:pageTracker._trackPageview('"+action"')"), "_self");
-
-
// the ExternalInterface way
-
ExternalInterface.call("pageTracker._trackPageview",action);
-
}
Important details
Don't run off implementing just yet, there is one important detail you want to do; that is to ensure the allowScriptAccess" embed/object parameter is set to always. Also, if you still use the old version (urchinTracker) of the javascript provided by Google Analytics, replace all instances of pageTracker._trackPageview to urchinTracker. Oh and beware, javascript function names in this context are *case-sensitive*.
How to see it in action
I realize it takes a while for Google Analytics to process the information. So how do I know if it went through? In firefox you can use a wonderful tool called Firebug. Once the page containing your published AS3 project is loaded, do one of the actions that would trigger a Google Analytics call. Now open firebug and look for the following:
Once you've found the __utm.gif's, you click on the (+) sign, then Params. Look for utmp, which represents the parameter passed inside of pageTracker._trackPageview(...). It should look something like this:
Other important detail
Certain subscriptions of Adblock Plus have a filter that blocks both versions of the google analytics javascript files. Therefore if you have Adblock Plus (what a marvelous invention, anybody have the equivalent for TV? Maybe I would watch it if I did!), and you get a Javascript error saying either: urchinTracker is undefined or pageTracker is undefined open up Adblock Plus's settings and remove that filter.
Viewing the results
So what does it look like in Google Analytics? The data will appear in the Page Views. It will completely screw up your Page View statistics, so you might want to create a custom account for this. Here I had URLss with "ExternalInterface" and other URLs with "navigateToURL" to show you both ways work:
Hope you enjoyed today's topic!!
Cheers,
Martin
Related posts (automatically generated):
Hi i’m developing a flex application and website in flex, i can added the AS3 code that u explain with external interface?
The UI code that Google analytics provide when you open account there isn’t in your code, in AS3 i can leave blank?
Jack
March 11th, 2008 at 4:32 pm
Hey Martin, just wanted to say great article but I am new to flash and am having trouble implementing the externalinterface way of tracking flash events. Do you see any problems with my code?
Javascript:
129var gaJsHost = ((”https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
130document.write(unescape(”%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
131
132
133var pageTracker = _gat._getTracker(”UA-4365601-1″);
134pageTracker._initData();
135pageTracker._trackPageview();
136var flTracker = pageTracker._createEventTracker(”flash”);
137
Flash:
stop();
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
WC1.addEventListener(MouseEvent.CLICK,WC1Click);
RN1.addEventListener(MouseEvent.CLICK,RN1Click);
CC1.addEventListener(MouseEvent.CLICK,CC1Click);
function WC1Click(event:MouseEvent):void {
gotoAndPlay(”WC Open”);
}
function RN1Click(event:MouseEvent):void {
gotoAndPlay(”WCRN Open”);
}
function CC1Click(event:MouseEvent):void {
gotoAndPlay(”WCRNCC Open”);
}
function logAction(action:String):void
{
action = “/flash/” + action;
ExternalInterface.call(”pageTracker._trackPageview”,WC1Click);
ExternalInterface.call(”pageTracker._trackPageview”,RN1Click);
ExternalInterface.call(”pageTracker._trackPageview”,CC1Click);
}
May 13th, 2008 at 2:52 pm
Alex: instead of calling gotoAndPlay(’…’) in your click handlers, you need to call logAction(”….”). Also, in the function logAction, the second parameter should be simply “action” without the quotes, instead of the click function handlers.
Hope this helps.
May 23rd, 2008 at 1:20 pm
Has anyone had any luck passing dynamic URLs using this method? It seems that not only are the parameter stripped but the entire URL is not passed with the utmp variable.
Great post by the way!
June 6th, 2008 at 9:22 am
Sam:
try calling a javascript function that calls the actual pageTracker._trackPageView() function for you. This way, in the additional javascript function you can do a alert() and see what Flash passes to javascript. If your ‘dynamic url parameters’ are still there, there is a problem inside of javascript. Otherwise the problem is inside of the actionscript to javascript call. Could help you find a solution..
June 6th, 2008 at 9:41 am
great, thanks, very helpful
September 1st, 2008 at 7:48 am
quick question- here is how im trying to get the dynamic page names in AS2 :
getURL(”javascript:pageTracker._trackPageview(’/filetrack/’+_root.currentPage.text+’.html’);”);
where currentPage.text makes the page names (1.html, 2.html) based on the location. it does not work because i guess it does not recognize variables inside the code.. i can use direct page names and it does work.. could you please help. or is there any other way to do the same in AS2.
December 12th, 2008 at 9:05 am
Many thanks mate, your post resolve at all my tracking problems of the day
January 28th, 2010 at 3:31 am