Google Analytics + Flash CS4 + AS3

I just finished a Google Analytics + Flash CS4 + AS3 setup and I’d like to impart some help to anyone who is attempting to do the same. It is a *little tricky, and while the documentation is pretty good, it’s still a little tricky.

OK- so first you need the Google Analytics Flash Component so go here and download it: http://code.google.com/p/gaforflash/

Here’s some documentation as well: http://code.google.com/apis/analytics/docs/tracking/flashTrackingIntro.html

more after the … more link>>

Step 1 – Install the components

In the zip file you downloaded you will find a readme.txt document that will tell you how to install- those instructions work for CS3 but NOT CS4 so you need to do the following: grab the 2 SWC files and find the following location on your computer:

– (Windows) C:\Program Files\Adobe\ Adobe Flash CS4\Common\Configuration\Components

– (Mac OS X) Macintosh HD\Applications\Adobe Flash CS4\Common\Configuration\Components

in the appropriate “Components” folder, create a New Folder named “Google” and put the SWC files in it. Start up Flash CS4 and you should see them in your components list.

Step 2 – Get your Code ready

There are a couple of things you need to do if you are going to use the component with code-

1. First- you need to put the components in your library- drag them from the Component window into the Library – not the stage, the Library.

2. Second- you need to import them in your ActionScript:

import com.google.analytics.AnalyticsTracker;

import com.google.analytics.GATracker;

3. Also – you also need to make sure to import ExternalInterface so the component can talk to your container document:

import flash.external.ExternalInterface;

Step 3 – Add your Tracker

1. create a var, in MY case, I just created a private variable in my “Main” class file like so: “private var tracker:AnalyticsTracker;”

2. create an instance of the var, with the parameters “tracker = new GATracker( this, “window.pageTracker”, “Bridge”, false );” There are avariety of ways you can set this up- so make sure that you look at the documentation very carefully. I used this setup because I am in control of the HTML container, and have used the Google tracker code in the page.

3. then add your tracker code to an event or function of your choosing ” tracker.trackPageview(“foo”);”, replacing “foo” with whatever information you want to send to Google Analytics. In my case I wanted to track some XML documents, so my actual code was “tracker.trackPageview(xmls[index]);”

Step 4- Adjust your HTML page

1. if you are using the Object/Embed tag, make sure the “allowScripAccess” is set to “always”. If you are using the AC Runtime script, or SWFObject or some other type of code to draw the SWF on the page, do the same. This will not work without the “allowScriptAccess=always” code, and will throw an error at time.

2. Make sure your Google Tracking code is in the page. I figured out through a little trial and error that the Google Tracking code in the body tag of the HTML was not enough, I also had to put <script src=”http://www.google-analytics.com/ga.js”></script> in the Head tag to make it work.

And finally- test it. If it works, you should not see any errors.

IF you want to see it in action, turn the Debug mode on by switching “false” to ” true” in this statement: