[Tips] Adding Google Analytics to your Flash Actionscript 3 Project

It has been almost ages that we finally able to harness the power of analytics inside Flash. However it would be a turndown for those who wants this in Actionscript 2. At the moment it seems there won’t be any plan for porting this to ActionScript 2. Your best bet would probably to jump the Actionscript 3 bandwagon to get benefits of this tool. This will be a through guide on how to setup your Flash file to enable Google Analytics tracking.

Setting up a Google Analytics account

analytics01

First and foremost before you do anything at all, you will need an account to get this to work. Head to http://www.google.com/analytics and apply for an account.

analytics02

Once you’re done, click on Add Website Profile to obtain a key.

analytics03

Input the website address that your flash file will be hosted at.

analytics04

When you’re done. You will receive a Web Property ID which identifies your website with other. It will be an unique ID. We’re now ready to proceed with next step.

Setting up Google Analytics for Flash

analytics05

To enable GAforFlash on your Flash installation, first you will need to head to http://code.google.com/p/gaforflash/ to get the components off Google Code. Grab the latest version as shown on the thumbnail above.

analytics06

Once downloaded, you may unzip the file and copy both of the component (.swc) file.

analytics07

And paste it inside the Components folder of your Flash CS3 installation folder. (Yours might be different due to installation language, mine is en, for English). Create a folder for Google and paste the file inside.

analytics08

This should be alright. We are now ready to go inside the authoring environment.

Launching Adobe Flash

analytics09

If everything above is setup correctly, you should see an extra option for you to select the Analytics components.

analytics10

For flexibility and more options, I would suggest to use the AnalyticsLibrary instead. To get started, drag the components from your Components Panel onto the stage. Do not worry, there won’t be anything for you to setup. Everything will be code based on the timeline.

analytics11

Since there won’t be anything for you to setup on the component itself except putting on the stage, I usually place the components on the lowest layer and lock it.

analytics12

For this example, I’ll just use one example to trigger an event.

analytics13

Example of the code. Will be provided below. Basically if you look carefully, the setup is pretty simple with few lines only (ignoring the comments). The GATracker Class consists of only 4 variables(couldn’t think of a correct word now) for you to key-in :

  • this (stage works as well, basically this refers to the movie you want the action to be tracked)
  • “UA-XXXXXX” (your analytics ID)
  • “AS3″ (you can use this option of the bridged-mode which I have not tried yet)
  • false/true (this option enables/disables the debug mode, which in debug mode will help to identify if your ID, or events are placed correctly)

analytics14

This is how it looks when debug mode is turned off. And you might wonder if nothing worked?

analytics15

You can immediately switch on the debug mode by specifying the option to true.

analytics16

This is how it looks in debug-mode. But remember to switch this mode off when you put your website live for public!

stop();
// -----------------------------------------------------------------------------------------
// IMPORTS
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker; 

// -----------------------------------------------------------------------------------------
// VARIABLES
var tracker:AnalyticsTracker 			= new GATracker( this, "PUT YOUR URCHIN TRACKER ID HERE", "AS3", true ); 

// -----------------------------------------------------------------------------------------
// INITIALIZATION
mybtn.addEventListener(MouseEvent.CLICK, btnClicked);

// -----------------------------------------------------------------------------------------
// FUNCTIONS

function btnClicked(e:MouseEvent):void {
	tracker.trackPageview("/mybutton clicked")
}

Below are some files related to the example above :

Some other sites that is related to this subject :