Come see us

100 Brunswick Street
Glasgow G1 1TF


t: 0141 559 5840
f: 0141 559 5841
digital@framecreates.co.uk

Helping you help Flash

The following instructions are intended for Flash CS3 users with a basic knowledge of ActionScript 3.0. You will also require a Google Analytics Profile ID.

Downloading and Installing GAforFlash, for use within the Flash IDE

  1. Download the GAforFlash components @: http://code.google.com/p/gaforflash/

    The zip file contains 2 SWC files. SWC's are basically component files that package together a bunch of code into one compiled file that is easy to use and install. Once installed, you can access all of the methods within GaForFlash in the same way that you would access methods in your own Class libraries.
     
  2. Next you have to install the SWC for use within flash.
    1. If Flash is open, close it for now.
    2. Then create a sub folder in: C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components. I named my folder 'Google Analytics'.
    3. Copy the analytics.swc (not the analytics_flash.swc) file into this new folder.
    4. When you re-start Flash, open the component library. You should see a new Google Analytics folder and AnalyticsLibrary Component.


       
    5. To use Google Analytics you have to import the component from the component library into the library of your Flash file. You can do this by dragging the component into your library from the component library, or by dragging an instance of the component onto the stage, which you can then delete. This will add it to your library as a compiled clip and allow you to use it from your ActionScript 3 code.

Using the API in your code

Ok, you have installed the GaForFlash component and you have it in your library ready to use. Now it's time to write some code to track PageViews and Events.

First you have to instantiate a new Google Tracker Object.

  1. In your Document Class or ActionScript frame, add the following code to import the appropriate methods:

    import com.google.analytics.AnalyticsTracker;
    import com.google.analytics.GATracker;
    
  2. Now you have to instantiate a Tracker Object. Use the following code:
    tracker = new GATracker(this, "UA-XXXXXXX-10", "AS3", true);
    
    The tracker object requires 4 properties;
    1. The current display object (in most cases you can just write this)
    2. Profile ID (UA-XXXXXXX-XX), the profile ID from your Google Analytics account.
    3. Tracking Mode, you want to use AS3 mode since we are using the analytics.swc and are using code to import Google Analytics.
    4. Debug, set to true during development. 

Debug Mode

Debug Mode rocks! It lets you know what's happening between your application and the Google Analytics API. When debug mode is set to true, a semi transparent layer appears on top of your Flash application providing feedback.

Subway - Red Nose Day - Google Analytics API

You can click the Google Analytics Version label at the top at any time to contract the debug layer, allowing you to navigate around your website more easily and remove the debug notifications.



The grey panel at the base and the yellow panel at the top of the screen give feedback on any method calls and events taking place between your application and Google Analytics.

Tracking PageViews

Now that you have instantiated a tracker object and set the appropriate parameters, it's time to fire some methods and save some Data to Google Analytics. trackPageview is the method you use to do this. The method accepts a string of text, which should be a description of the current page. The string you pass to the method is how the data is represented as a PageView within your Google Analytics account.

tracker. trackPageview("homepage");

TrackPageview should be used to track the users' position within a website. If you have a flash site that loads multiple SWF files, each representing a different section of the site, you could call trackPageview("yourpagename") from each SWF's Document Class, or from frames on the timeline within your Flash file, depending on how you have structured your application code.

The following screenshot shows the string value passed to the trackPageview method represented as Pages within Google Analytics:

Google Analytics Page Views

Tracking Events

Event tracking can help provide an invaluable insight into how users are interacting with the various elements within your Flash application, helping determine if certain elements are being used as much as expected.
It's also very handy when your client asks, how many times was the play button? Or, how many users watched my video clip till the end? In fact, Event tracking is only limited by what you would like to track.
Its split into 'Categories', 'Actions' and 'Labels' and it's entirely up to you how you organise and name these. In the following example I monitor the number of times the homepage button within the main site navigation was clicked:

tracker.trackEvent("main_nav", "clicks", home_btn);

The three parameters you pass to the trackEvent method allow you to create meaningful structure within the Google Analytics dashboard. In the example above 'main_nav' would be a category that would capture all Main Navigation events. The action, in this case 'clicks', is used to describe the action of the event. The label is usually a descriptive name for the object, in this case the homepage button. Be sure to name think carefully about how you classify your event tracking otherwise you may regret it later.

Enabling Event Tracking within your Google Analytics Account

The Event tracking button is not visible in every profile by default within Google Analytics. This is because Event tracking is fairly new and is slowly being released to all profiles.
When a profile has Event tracking enabled you can access it under the site search option within Content:
Google Analytics - Event Tracking

If Event Tracking is not visible within your profile don't worry! You can still view the data.

Once you are logged into your Google Analytics account you can modify the URL to view the events data. Simply modify the URL in the address bar to the following, making sure you copy your ID from the address bar and pass it as a query to the events page:

You should then be able to see the Event tracking overview page. You could now click 'Add to Dashboard' to make it easy to access thereafter until such times as it's the button is enabled for your profile.

Google Analytics - Event Tracking

If you would like the button to be enabled for a profile you can make a request to Google via the form at the following URL:

Apparently this Event tracking enabling feature is exclusively available to Flash Developers, but it may just work for none Flash websites too

Download a working example and get started using Google Analytics for Flash. (Add download link)

Bookmark and Share

Posted in: Labs