Lee Burrows

Getting useful visitor stats from a Flash site used to be a pain – if the entire site sits within one html page the server won’t have any page changes to track. I used to write a custom logging system and save user actions to a database, but these days i use Google Analytics (see the previous post) – it’s free, easy to setup and provides a wealth of info (if you want it). Let me show you how to add it to any Flash (or Flex) site.

Step 1: Setup a Google account

If you already have a Google account (eg: for gmail) then you can skip to step 2. Otherwise, you will need to visit https://www.google.com/accounts/NewAccount and set one up – all you need is a valid email address.

Step 2: Add Google Analytics to your Google account

Once you have an account, you can use your details to login to the GA site at https://www.google.com/accounts/ServiceLogin?service=analytics. When you log in, you’ll see a “Sign-up” button which will take you through the registration process.

Firstly, you will be asked for the details of the website you want to track (you can add more sites later):

And then your name and location (note to Google: you already know this!):

Lastly, you’ll need to accept the tems and conditions:

Once you click on “Create New Account”, you’ll be taken to a page with instructions to paste some javascript into your webpages – ignore this; it’s for html sites. Just take note of the code i have highlighted below (your code will be different to mine) and click on “Save And Finish”.

That’s the GA setup complete – you should now be in your account dashboard where you can access all your stats, add more sites and learn all about the finer points of analytics.

Now that GA is setup, we just need to get our Flash site to communicate with the GA server. Luckily, Google have done all the hard work for us…

Step 3: Download the Google swc file

Google provide a couple of swc’s (one for Flash, one for Flex) that provide all the functionality we need. Both are included in the zip file available here: http://code.google.com/p/gaforflash/downloads/list

Step 4: Add the Google swc file to your project

Extract the relevant swc from the zip (“analytics.swc” for Flex projects, “analytics_flash.swc” for Flash projects) and save it somewhere.

Now we need to add the swc file to our project:

Flex Builder/Flash Builder:
Select ‘Properties’ from the ‘Project’ menu and choose ‘ActionScript Build Path’. Ensure that you are in ‘Library Path’, click on ‘Add SWC…’ and browse to the swc file you just extracted from the zip. Select it and click ‘ok’ to add it to the project.
Flash CS5:
In the properties panel, click on the ‘Edit…’ button next to ‘ActionScript Settings’. In the subsequent pop-up window, ensure you are in ‘Library path’ and click on the ‘+’ symbol to add a new path and then click on the Flash (‘f’) icon to browse to the swc file you just extracted. Double click the swc file and you will see it listed. Now click on ‘ok’ to close the pop-up window.
Other IDE’s:
Check your documentation for instructions on adding swc files to your project – sorry!

Step 5: Add the code

Ok, we are nearly there! This is the code to register a page hit:

//code from GA setup
var GAid:String = "UA-xxx-xxx";
//setup tracker object
var GAtracker:AnalyticsTracker = new GATracker(this, GAid, "AS3", false);
//register page hit
GAtracker.trackPageview("/myPageName");

The first line is the code you obtained in step 2 – replace UA-xxx-xxx with your own code.

Next, we setup the GA tracking object; the first argument refers to a display object (this is where a text area containing debugging info will be added – if debugging is enabled); the second is your site code and the third tells the tracker to communicate directly with the GA server. The fourth argument sets debugging on (true) or off (false).

Lastly, we actually record a page hit by calling the trackPageview() method of our tracking object. All we need to do is pass a page name as the argument – note that it must begin with a slash – and GA will take care of everything else.

To record other custom events (such as user playing a video) we use the trackEvent() method:

GAtracker.trackEvent("myCategory", "myAction", "myLabel", myNumber);

The first two arguments define the category and subcategory of the custom event (use any strings you like; just make them meaningful so you can understand what they mean when you are viewing your stats). The third and fourth can be used to record details about the particular event. For instance, to track a user stopping a video we could use:

GAtracker.trackEvent("user-action", "video", "stopped", timeVideoPlayedFor);

where timeVideoPlayedFor is a Number variable containing the time in seconds that the video was played for.

Step 6: Wait

That’s all there is to it. Once a GA enabled site is live, it may take up to 24 hours before you see any data in the GA dashboard so be patient.

As usual, if you have any problems, get in touch.