Tutorial – Using Google Analytics to track activity inside of a Flash or Flex AS3 application

8 actionscript,as3,as3 tutorials,flash,javascript,work  |   February 24, 2008  |     1729

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:

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).

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:

Tracking Google Analytics calls in Firebug

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:

Finding Google Analytics UTMP information from Firebug

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:
Visualizing custom events from Flash / Flex AS3 in Google Analytics

Hope you enjoyed today’s topic!!

Cheers,

Martin

Comments
  • March 11, 2008 at 4:32 pm

    jack

    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

  • May 13, 2008 at 2:52 pm

    Alex Melkonian

    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 23, 2008 at 1:20 pm

    mlegris

    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.

  • June 6, 2008 at 9:22 am

    Sam Clement

    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 6, 2008 at 9:41 am

    Martin Legris

    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..

    🙂

  • September 1, 2008 at 7:48 am

    Jeff

    great, thanks, very helpful 🙂

  • December 12, 2008 at 9:05 am

    abhishek

    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.

  • January 28, 2010 at 3:31 am

    Mareforzanove

    Many thanks mate, your post resolve at all my tracking problems of the day 🙂

Leave a Reply