Event Tracking with Google Analytics | Flash Integration | Tutorial

Many have read my Integrate Google Analytics with Flash Tutorial in which I express enthusiasm for the new event tracking at google analytics! Well, it’s been a while, but I was admitted to the Beta testing group! So I’ve now had the chance to play with event tracking a bit and wanted to publish my findings!

Overview

Almost a year ago Google Analytics announced their new event tracking model and have had help documents published and code samples up. And as with many of Google’s products the beta stamp has lasted a very very long time. Many have seen my earlier tutorial exploring using traditional Google Analytics Tracking from within Flash, and it does wonders to track your flash apps in this manner, but there is a problem with it. We’re using supposed object oriented concepts to track objects as pageviews. One thing is it really isn’t a very intuitive way to represent that data, and another it inflates your pageviews! The solution? the long awaited and announced Event Tracking model. I’ve been itching for this to be released so I could refresh my analytic tactics I use in my flash projects. No, to answer your questions, it has not been released yet, but I contacted Google and explained that I would be a great beta tester for this feature and after a bit of correspondence they invited me to join in the beta testing! This is good news for you too! Because I will tell you all about how to do it and even show you what the reporting looks like and when it is released finally, you will know what you’re in for after this sneak peak!

UPDATE: Here are the reports for this very example: Report from Event Tracking with Flash Tutorial

The very quick summary is this:
_trackEvent(category, action, optional_label, optional_value)
Note that the _trackEvent function is called on the pageTracker object itself. (initially Google had you instantiate a separate event tracker for every object (or category) you wanted tracked)

For example, if we want to track a ball. All the actions that can apply to the ball are: it being created, dragged, dropped, bounced, deleted… You get the idea. We can have direct user actions tracked or even automatic actions. If we have gravity and physics running, the ball may bounce a lot without any direct user interaction. But it will never be dragged or dropped without direct interaction. I’d recommend only tracking user interactions because who cares how often a ball bounces on your page (unless you’re doing an experiment, of course), want we want to know is how and when a user interacts with the ball.

category:string (required)

This is the name of the object you are tracking.

action:string (required)

This is the action that happens to your object you want to track.

optional_label:string (optional)

This can be more information to accompany the action.

optional_value:integer (optional)

A number to provide numerical information to accompany the action.

Steps

  1. First, I’d recommend reading up about Event Tracking at Google
  2. Decide your object oriented structure for tracking events. What objects do you want to track and what useful information do you want to get through tracking user interaction?
  3. Make sure you have the new Google analytics tracking code on your page
  4. Use these functions to communicate Google Analytics from your flash
    1. Call the main function with the specified parameters
    2. It will call the appropriate function and send the data to your pageTracker object through javascript with externalInterface calls
  5. See the reports in your analytics profile! (if your a beta tester, or else, wait until it is released)

Source code

The tracking functions are below, I enhanced the earlier trackGA function I wrote about. Now you call trackGA with 2 required parameters, categoryOrPageTrack and action. categoryOrPageTrack is where you have to pay attention. I wanted to keep the ability to track pageviews as well as have event tracking, so as the first param you either send in the string ‘page’ to explicitly state that you want to track the page view, or you send in another string to state you want to track an event on that specified object. Action remains the same, the action you want tracked (either on the pageview, it is the path that will appear in your reports; or the event tracking will be the action tracked to the category)…
So to track a pageview I call
trackGA("page", "swfLoaded");
and to track an event to an object I call ball:
trackGA("ball", "created");
The trackGA function will rout your call to the appropriate place and send the info to Google through either the trackGAPage function or the trackGAEvent function.
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//trackGA (categoryOrPageTrack [required], action [required], label [optional], value [optional]
//categoryOrPageTrack – either the category string or a string saying ‘page’
function trackGA(categoryOrPageTrack:String, action:String, optional_label:String, optional_value:Number) {
//call page tracking version of Google analytics
if (categoryOrPageTrack == “page”) {
//trace(“GATC pageTracker call”);
trackGAPage(action);
}
//call event tracking method
else {
//trace(“GATC event tracker call”);
trackGAEvent(categoryOrPageTrack, action, optional_label, optional_value);
}
}

var prefix:String = “flashGA”;
//Google Analytics Calls Page Tracking – for tracking page views
function trackGAPage(action:String) {
//GA call
if (prefix != null && !eventTrack){
var call = “/” + prefix + “/” + action;
//Old Google Analytics Code (urchinTracker)
ExternalInterface.call(“urchinTracker(‘”+call+”‘)”);
//New Google Analytics Code (_trackPageview) pageview
ExternalInterface.call(“pageTracker._trackPageview(‘”+call+”‘)”);
trace(“==GATC==pageTracker._trackPageview(‘”+call+”‘)”);
}
_root.tracer.text = action;
}

//Google Analytics Event Tracking Calls – for tracking events and not pageviews
//category, action, label (optional), value(optional)
function trackGAEvent(category:String, action:String, optional_label:String, optional_value:Number) {
/*
objectTracker_trackEvent(category, action, optional_label, optional_value)
category (required) – The name you supply for the group of objects you want to track.
action (required) – A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional) – An optional string to provide additional dimensions to the event data.
value (optional) – An optional integer that you can use to provide numerical data about the user event.
*/

theCategory = “‘” + category;
theAction = “‘, ‘” + action + “‘”;
theLabel = (optional_label == null) ? “” : “, ‘” + optional_label + “‘”;
theValue = (optional_value == null) ? “” : “, ” + optional_value;
//New Google Analytics Code (_trackEvent) event tracking
theCall = “pageTracker._trackEvent(” + theCategory + theAction + theLabel + theValue + “)”;
ExternalInterface.call(theCall);
trace(“====GATC====”+theCall);
_root.tracer.text = theCategory + theAction + theLabel + theValue;
}
[/cc]

Here’s the actionscript lines where I call the trackGA function:
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//Tracks that the swf loads, so I pass ‘page’ to let it know I want a pageview tracked…
trackGA(“page”, “swfLoaded”);
//Tracks various objects sending various actions
trackGA(“gravity”, “on”);
trackGA(“gravity”, “off”);
trackGA(“friction”, “on”);
trackGA(“friction”, “off”);
trackGA(“ball”, “deleted”, count);
trackGA(“ball”, “created”, ballCount);
trackGA(“ball”, “drag”, this.ballNum, this.ballNum);
trackGA(“ball”, “drop”, this.ballNum, this.ballNum);
trackGA(“ball”, “bounce”, “right”, this.ballNum);
[/cc]

Example

[kml_flashembed fversion=”9.0.0″ movie=”/wp-content/uploads/2008/10/integrategoogleanalytics/integrategoogleanalytics.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”400″ height=”400″]

Get Adobe Flash player

[/kml_flashembed]

View example in it’s own html page, I even added a couple html buttons with javascript hooked in to show javascript event tracking implementation.

Download

Download Source

Concerns

I’ve noticed while putting this together that the calls to google analytics are not completely fullfilled, this example sends out correct calls to javascript, but (in firefox at least) a max of about 1 tracking call is registered with the tracking code every 5 seconds or so. I noticed this as I was monitoring the drag and drop events for each ball, although the drag and drop events are both fired, usually the drag event was received and the drop is not. After verifying that my code was consistent, I noticed that no matter how fast I interacted with the objects, the calls were much slower. I’m guessing this is a limit placed by the google team to keep us from sending pointless data such as is posted at the bottom of the event tracking implementation guide, titled Events Per Session Limit.

26 thoughts on “Event Tracking with Google Analytics | Flash Integration | Tutorial

  1. Hi,

    Your code seems quite helpful. I put it in my flash application to track some events.

    But those events don’t seem to appear in Google Analytics page for my website. I was checking on net and somewhere read that the event name should begin with a “/” . But that doesn’t seem to be the case in the example that you wrote. What is correct?

    Also, after I change my flash code, do I need to go and make some changes to my analytics settings too? e.g. adding some goals or maybe something else?

    Please let me know.

    Thanks,
    Mukesh

  2. @Mukesh – Event tracking is still in BETA mode, therefore those who are not beta testers are not given tracking for events.

    You must have the new google analytics code on your site.

    Beginning the event with a backslash? Haven’t heard of that, but as you can see, my events showed up just fine in my reports (because I’m a BETA tester). I haven’t checked to be sure, but I think you can have it all set up and sending events to your analytics correctly and google will record them but not show them to you until they turn event tracking on… Meaning you should be able to watch the http requests or the Network monitor in firebug and see the call go out to analytics.

  3. Oh it is still in beta mode. I didn’t catch that from ur post 🙁

    So what is the best a flash coder can do right now to track activities on flash page?

  4. Sorry I should have read carefully. I thought as beta tester u have the results immediately while others have to wait for 24 hrs to check.

  5. Hey wazzup bro! Great job with this tutorial . It s awesome and very helpful. I have a question. If you go to my website http://www.react-magazine.net and you go to the bookcase page (sorry not english yet and still in beta stage of design 🙂 ), you can see there some links from three photographs, another one from a postcard and two more hidden in the magazine of the middle of the page.

    Well, using your tutorial I am able to track every single click in the photos links but it doesn t work for the “download the magazine” buttons (the ones hidden in the magazine). Does it make any sense or am I doing something wrong?

    I have seen that the code for tracking the download events in HTML is a little diferent. Should I edit the “logging.as” file with that code?

    Thanks man, agan brilliant work!

  6. hey man wazzup, it s me again 🙂 just two questions:

    1. I downloaded the firefox plugging to check the web transit and defenetly my download links doesn t send any kind of signal to Google Analytics. DO you now what to do then with that?

    2. Please dont forget me! 🙂 I have been checking your post since I wrote waiting for your answer. Hehe, just kidding, I ll seriously appreciate your help 🙂

    Thank you! Take care

  7. If you’re not seeing anything in firebug going to google analytics that would mean your problem is in the code. Are those download buttons html text or movieclips? Html text if handled differently than a movieClip click. Good luck

  8. hey wazzup
    thanks for answering 🙂
    they are simple button symbols made in flash with the getURL action script. They are linked to the file in my server so clicking them you download it.

    As I told you, I followed the steps of your tutorial and it doesn t track the click. I have been able to track the rest of events of the web, also those getURL events that are linked to other sites

    Should those buttons work as well as the other events? am I doing something wrong? Have you checked that?

    PS: I m so sorry for my precarious english 🙂
    PS2: Don t wish me good luck yet 🙁 . It seems that you will never answer me again. Don t leave me aloneeee XD

  9. Hi there,
    I’ve got a flash player (AS2) and I offer my clients a choice of embed. like whoever is watching the video can embed it on their facebook, blog, etc.
    Do you know if it is possible for me to have analytics tracking where and how many times an event is happening (like how many times the loader runs)? So I could have an idea about how the pre-rolls and post-rolls are behaving.
    Could you please get in touch with me via email so we could discuss it?

    Cheers,

    Vlad

    1. @Vlad – You can have analytics track most anything that can be measured. Although if you are letting people embed the flash onto their site, then the analytics will go to their account. Analytics on the page will work if and only if there is analytics tracking code in that html file, so if you’re wanting to track your file across other sites, I don’t think it’s possible with this method. Does that answer your question?

  10. Vlad – I had the same issue. I created an AS3 shell to load the AS2 player. Then I placed a button on the AS3 stage that tells me whenever the video is clicked. Not perfect, but it seems to be working. I get good tracking.

    However, I’m trying to figure out how to track which URLs are using my code. Anybody have any ideas?

  11. Hi Evan,

    I’m looking to integrate GA with my Flash AS 2 file.
    The index.swf opens ‘pages’ (external swfs) on the release of a movieclip.

    Could you lend me a hand as to the path I should take to accomplish this. I’ve read up on multiple tutorials referencing this integration and can’t for the life of me get it to work.
    Thanks so much.

  12. How to track number of clicks for an event?

    is it just a matter of using the 3rd optional_value in the function call or is it necessary to customize a function like the ones in ‘ball.as’ ?

    e.g.
    function createNewBall() {
    //if (ballCount < maxBalls) { //commented out this to focus on the ++ loop but left it in so other readers could identify it.
    ballCount++;
    }

  13. Another question:
    When I use the tracking code function calling page view ( ‘page’) in the root time line it sends data to GA.

    However, I tried using the event function call code in a frame nested within the timeline of a movie clip and I am Not getting any data sent.

    Is there a way of calling an event in a nested time line?

    Should I try calling the function off a button click as opposed to when the playhead reaches a frame?

  14. I want to track flash banner on my site, please tell me what i need to insert

    _trackEvent(category, action, optional_label, optional_value)
    or
    pageTracker._trackEvent(category, action, optional_label, optional_value)

    please

  15. only three categories are displaying,but i have given four categories,but it is showing three categories in the overview.
    please let me know where it is wrong.

    Thanks

Comments are closed.