Integrate Google Analytics with Flash | Tutorial

January 28, 2008 • 21,574 views

The results are in and the requested topic is “Integrate Google Analytics into Flash.” The poll has been reset and is ready to recieve your post requests, so keep voting! It’s located in the side bar!

Overview:

Tracking your visitors and attempting to better understand them is a large part of even having content on the web. Since the days of visitor counters displayed proudly on every site, along with dozens of animated gifs to the days when site were designed solely with efficiency and conversion in mind. There are many services that will do this for a fee and other that will do it for free. A popular free web analytics tool is provided by Google. Google Analytics is started by including JavaScript on each page the user wishes to track. This JavaScript loads larger files from the Google webserver and then sets variables with the user’s account number. This JavaScript is used to track and log page views and visitors interaction with the site. This post discusses what to do if your site includes a lot of interactive flash elements you wish to track as well. With the little Google has published related to this(New Code, Old Code), I’ve tried to fill in.
Note: This explains how to set up to track flash events as page views, which does have a drawback- it inflates your pageviews in the analytics and in turn may skew your data. Il’l beposting again soon about how to use then new event tracking, which would track flash events not as pageviews, but as events and thus not inflate the page view count.

UPDATE

I now have an Event Tracking Tutorial as well with actionscript updates!
Event Tracking With Google Analytics & Flash/Actionscript Integration Tutorial

Steps:

If you haven’t already, install Google Analytics on your site. (Note that your analytics tracking code must be placed on the page above the flash call(s) to _trackPageview or urchinTracker)
Determine which events in flash you want to track.
Place in the external.interface code in your actionscript at the specific event(s).
Watch the events get logged in you Google Analytics Reports!

Example:

Here’s a simple example, say you want to track how many times an object is clicked or dragged by a user or how many times it bounces (something that could be tracked but doesn’t necessarily have any required user interaction). In this example flash file I have a ball which bounces off the walls and users can click to drag and even throw it, press the spacebar to create more balls and toggle the gravity on and off with the arrow keys (up is weightlessness, and down is gravity). Each of these events has code to communicate with Google Analytics JavaScript and track the events. I made my own function to call the google analytics code. Do I hear “but sometimes I want to use the new version of Google analytics, and sometimes I want to use the old one…” Have no fear, this function works for either one, or even both. If you’re not using the newer code the calls to the functions in the new code (pageTracker._trackPageview()) will be ignored and vice versa, if you are using the new code, then the calls to the functions in the old code (urchinTracker()) will be ignored, since the functions are not defined. You can track virtually anything with this method. I’ve exaggerated greatly in this example- just to show the variety of different ways this can be used. You might want to make certain the things you track will be useful and relevant for you.

Here is the swf file, I’ve added a text box that will print all actions that are logged to Google Analytics

track Google Analytics actionscript function

1
2
3
4
5
6
7

function trackGA(action:String) {

//Old Google Analytics Code

ExternalInterface.call("urchinTracker('/urchin/IntegrateGoogleAnalytics/"+action+"')");

//New Google Analytics Code

ExternalInterface.call("pageTracker._trackPageview('/pageTracker/IntegrateGoogleAnalytics/"+action+"')");

trace("Google Analytics Tracking: " + action);

}

Calls to Google Analytics actionscript function

1
2
3
4
5
6
7
8
9
10

trackGA("swfLoaded");

trackGA("ball/"+_root.id+"/created/");

trackGA("ball/"+this.ballNum+"/released/");

trackGA("ball/"+this.ballNum+"/pressed/");

trackGA("ball/"+this.ballNum+"/bounced/top");

trackGA("ball/"+this.ballNum+"/bounced/left");

trackGA("ball/"+this.ballNum+"/bounced/right");

trackGA("ball/"+this.ballNum+"/bounced/bottom");

trackGA("gravity/on");

trackGA("gravity/off");

Download:

IntegrateGoogleAnalytics.zip

Update:

Here is a screenshot of my Google Analytics Top Content after I search for “pageTracker/IntegrateGoogleAnalytics” (because I’m using the new code version, if I were using the old version I’d search for “urchin/IntegrateGoogleAnalytics”). This just shows that every event was logged to Google Analytics. This screenshot was taken mere hours after this post published.

New Event Tracking technique tutorial rather than posting each event you want to track in flash as a pageview it can be a specific event!

Categories: tutorial
Tags: actionscript, analytics, as2, download, flash, interactive, javascript, open source, tutorial

somnamblst

I realize you have not done the event tracking blog post yet, but here is what I came up with last night to track rollovers in addition to an on (release)

In my ga.js I added

// Here is the new event object
var rolloverEventTracker = pageTracker._createEventTracker('rollover');

My AS:

box_mc.onRollOver = function():Void
{
ExternalInterface ("javascript:rolloverTracker._trackEvent('rollover', 'MyRollover');")

box_mc.gotoAndPlay(2);
};

box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
};
box_mc.onRelease = function():Void
{
getURL("javascript:pageTracker._trackPageview('/flash/click/');");
getURL("http://www.yahoo.com","_blank");
};

Normally the ga.js goes at the bottom of the page, immediately before the </body) tag. Do I need to put it above my Flash object code on the HTML page?

circlecube

Yes, I this is mostly correct, notice that the ExternalInterface.call() calls don't need the 'javascript:' that is for getURL()
Although, since I'm not a beta tester of the new Google Analytics Tracking Code, I can't access the event tracking in my reports yet...

And yes again, Here's the answer straight from Google: "Google Analytics lets you track any browser based event, including Flash and JavaScript events by using the _trackPageview function, you can assign a page filename to any Flash action, and enter that filename into the appropriate goal or funnel step. Important: Please note that your analytics tracking code and calls to _gat._getTracker and _initData must be placed on the page above the call to _trackPageview."

So it seems that the new GATC should optimally be included at the top of the page rather than the bottom. I just include it in the header rather than the footer.

I assume you need the event object placed before the flash, so the ga.js (exactly like you have it):
var rolloverEventTracker = pageTracker._createEventTracker(â€™rolloverâ€™);

and the AS:
box_mc.onRollOver = function():Void {
ExternalInterface.call("rolloverEventTracker._trackEvent('rollover', 'MyRollover')");
box_mc.gotoAndPlay(2);
};

Good luck! I'm anxious for this feature to be fully rolled out to all users!
I will confirm as soon as I'm able to test it out!

James

Ooh, that's pretty nifty. We've been doing things like this for other commercial tracking systems like Hitbox, but I didn't realise you could also do it with Google Analytics...

Kathy

Thank you very much for your site and what you've put into this page... but I'm out of my element and am hoping someone can post: 1) a simple HTML page with embedded SWF w/ Play button - such that I can see exactly where and how the Google Analytics code is used in the HTML in relation to the SWF and tag. 2) Its corresponding FLA and any files for download (similar to what you've done here for your example).

Should it make any difference, I have a web page with a Flash file (when you hit "Play" button, it loads an FLV) I want to track IF and how long the Movie is viewed. I already have a listener on the Play button in Flash to "go to frame #" when movie ends. If Listeners apply to using GA and Flash -- will these Listeners conflict?

I have another site, which is one Flash File - but loads 4 different FLV movies via buttons I created, each Play button has a listener. Stepsdancecenteronline.com/videos.html

Will I be able to use GA to track views & time viewed for this 4 movie Flash file? (that is, can this be done... not will I be able to set it up properly)

Again, I learn best by example, and what is frustrating to me, is that many great tutorials leave just one or two things to "assumption" of the skill level of the audience. If I can see the code in context, my learning curve goes up.

Thank you again, - even if you can't accommodate this neediness on my part
Kathy

Andy

I would have thought this example would have a higher bounce rate...

Andy

because the ball...bounces.

Dan

Excellent tutorial, and wonderful example provided. I've been looking for this info for a long time.

Thanks a lot for putting in the time for this tutorial. I never considered tracking if the SWF loaded correctly, but it is a very good idea.

I am looking forward to the Event Tracking blog entry.

AlÄ±ÅŸveriÅŸ Scripti

very nice :)

CÃ©dric

very usefull, many thanks !!
it works like a charm :)

BarrieVideoTours

Excellent tutorial. I have been reading Advanced Web Metrics for the past few days. There is a small section on flash event tracking. It is somewhat informative. But your tutorial is better. Now I just have to piece together how to use if for a video.

I am trying to track the clicks on Play, Pause, and time to download the entire video. This would be extremely helpful to track how people are viewing the video with different band widths as well as figuring out if they are viewing the entire video.

Great tutorial...thanks.

lolo

any question, how it could work in a Flash Air application like a widget, because I dont know if Air stuff embede Java and HTML with ja code?

Justin

Hi there,

Great post, very helpful.
I have had to slightly change your code to make it a JS function, and then call the JS function from my swf file in order to track a click. Ran into this problem below tho:

http://www.moock.org/asdg/technotes/crossDomain...

Problem with cross domain security!!

Avangelist

This would be absolutely great if I knew what you were talking about.

The minute you started refering event tracking I was lost.

You have an .swf which has buttons
Those buttons click through for pages
You want to track click throughs
So you are placing the tracking code in the button layer movie's actions layer?

I feel like I need to go back about 4 steps.

circlecube

@Avangelist - This is a tutorial to track an event (something that happens in Flash) in Google Analytics as a pageview.

This is a simple example about how to implement this idea. It can be pushed much further. This example shows how to track events with this ball (user interaction and not) in Google analytics. If we wanted to havea button going to another page it may be better to just put the analytics code on that page.

You have a swf with buttons, which click through for pages? are these "pages" separate html pages or frames in your flash?
You want to track the click of the button? That would be the exact way I track clicking this ball in the example. I'm placing the tracking code in the onPress event for that movieClip, as you can see in the source file provided.

_root.ball.onPress = function () {
startDrag(this);
this.dragging = true;
trackGA("ball/"+this.ballNum+"/pressed/");
}

thanks for reading

Mukesh

Hi,

I tried this code, but in my Google Analytics page I don't see any separate entries for the events that I created. Do I need to create some corresponding entries in GA settings manually too?

Thanks,
Mukesh

circlecube

Mukesh - Nope, it should show up, be sure to give about 24 hours for the hits to show up in your reports. But in this example I make calls to trackGA(â€ball/â€+this.ballNum+â€/pressed/â€);, so you can search in the top content page of your reports for a page containing (in this example) "ball/" or "/pressed/" and if everything happened correctly they should show up there.

If you aren't as patient as that though, you can see live evidence of the tracking being sent to google analytics... Get the firebug extension for firefox and you can easily monitor network calls. This will show you the header and parameters sent with all calls to google analytics, you can see the path that gets sent! Pretty cool, eh? It will look like this "GET __utm.gif?utmwv=......sending tons of parameteres!

Mukesh

Thanks Evan. Actually I had waited for 48 hours before contacting you. What you suggested about Firebug sounds cool. That will help me in finding if I am making any syntactical or other mistake.

Thanks,
Mukesh

Loony

Hi.
Thanks for all the info.
My website is all flash (swishmax to be precised).
I have a menu with several buttons. Once a button is released the movie goes to a frame and plays it. How do I add google analytics to track that somebody clicked that button?
Here is the simple code - but unfortunately no answer:

on (release) {
_root.gotoAndPlay(66);
}

Please make it real simple! Thank you

circlecube

@Looney - try this:

on (release) {
traceGA("buttonRelease/66");
_root.gotoAndPlay(66);
}

function trackGA(action:String) {
//Old Google Analytics Code
ExternalInterface.call("urchinTracker('/"+action+"')");
//New Google Analytics Code
ExternalInterface.call("pageTracker._trackPageview('/"+action+"')");
trace("Google Analytics Tracking: " + action);
}

You can send a different action on each button, and analytics will tell you reports for each button pressed. Or you could put the analytics call onto the timeline, so when they go to a certain frame the function is called to log the tracking.

Loony

wow thank you so much for being so quick at replying. I'm trying it now.

Loony

There seems to be a problem with the line:
traceGA("buttonRelease/66"); It appears yellow meaning there is an error.

Here is what I have once I added the code you gave to me:
on (release) {
traceGA(â€buttonRelease/66â€³);
_root.gotoAndPlay(66);
}

function trackGA(action:String) {
ExternalInterface.call(â€pageTracker._trackPageview(â€™/â€+action+â€â€˜)â€);
trace(â€Google Analytics Tracking: â€ + action);
}

Now the button is inactive. Any idea?

circlecube

@Loony - if you look closely you'll see the type... traceGA != trackGA, my bad.

Loony

There still seems to be a problem. But thank you very much anyway ; I appreciate your time.

abhishek

Im using AS2 and with getURL method..
getURL("javascript:pageTracker._trackPageview('/filetrack/1.html');");
- it does work but when i try to get the page number dynamically..
getURL("javascript:pageTracker._trackPageview('/filetrack/'+_root.pageNumber+'.html');"); IT DOES NOT WORK.. someone please help where im doing wrong- i can however trace the root.pageNumber and it shows the page number right but for some reason.. it does not work- please help.

Jeremy Daley

i used your example and it's not working for some reason... although i don't understand why you're passing the javascript function's parameters all within the contents of the ExternalInterface.call's first parameter, instead of:

ExternalInterface.call("pageTracker._trackPageview", action);

Remco Hoff

Abhishek, you forgot to add 2 double quotes, this should work:

getURL("javascript:pageTracker._trackPageview('/filetrack/'"+_root.pageNumber+"'.html');");

Culler72

By placing the Google tracking script in the html file that calls up the .swf file, will that work properly? Right now Google will read the HTML page, but none of the flash functions. I used some of your code and everything worked ok in Flash.
thanks

fahad naeem

if i use your sample then its work?

dude i really stuck between google analytics and flash plz help me out

fahad naeem

Dear Evan Mullins,

now i upload ur example file and setup it for google analytics on www.dblueroom.com my orignal site address is http://www.dblueroom.com/_final_index.htm could u pleas check it and wat is next step ?

fahad naeem

yes yes yes its working wow thx dear thx alot :D

circlecube

Great to hear you got it all working Fahad,
let me know how it works for you.

Lee

If you're having trouble accessing the reports simply hack the URL to include the events folder and away you go http://www.leewoodman.co.uk/blog/09042009/34675...

michy

In google analytics can u show me way how to embed google analytics in a media player(for example: JW player)

Og2t

Hey there, just posted an article on how to track events in SWFs embedded on remote sites: http://play.blog2t.net/tracking-events-in-embed... Just thought I could share.