Quick Tip: How to use Google Analytics for Tracking in Flash

In this Quick Tip I’ll show you how to examine the way visitors are using your websites, widgets and games. Then we’ll look at how to improve them based on this info!

Introduction

Building nice looking websites is great; building websites that have a high Return Of Investment is priceless.

Recently I joined the web team of a Brussels based communication agency, a team with expert knowledge in the fields of user experience design, content strategies, software development, and interaction design. We spend a lot of time on wireframes, storyboards, and prototypes, which guarantees that the functionality and the content of the websites are optimal before any graphical design takes place. This means our websites have a solid base to be built upon, which results in a higher ROI with less time spent on development.

A huge part of our work is under the hood: Google Analytics inside Flash.

This tool allows us to measure how well our sites are doing against our predefined goals: bounce rate, click paths and even custom measurements like how many people scrolled a certain page. Our specialists analyze all this information and use it to optimize the website. If you’re not measuring how people are using your site, you can only guess about its successes and failures.

The following setup is a stripped-down version of an image gallery; Google Analytics allowed the client to discover which images triggered the most interest. I’ve left out the actual gallery building as it is beyond the scope of this tutorial; there are plenty on Activetuts+ already though – just search for “gallery”.

We will focus on how to set up Google Analytics to put a smile on your clients’ faces (and probably yours too…)

Google Analytics in Action

Here’s the simplified image gallery:

As you can see, when an image is clicked, its identity gets sent over to my Google Analytics account. Later on, I can look at all the statistics of which images were clicked, at which times, in which countries, and so on.

(Of course, you’ll remove all that overlaid information when it’s live on your own site!)

Step 1: Understand the Benefits

Imagine yourself working hours, weeks, even months on a website. You successfully deliver the files before the deadline, but a few months later it’s clear that – despite being beautiful – the site is not attracting as many customers as your client expected. Google Analytics helps you to review visitors’ browsing habits and discover which parts of the site could be better highlighted. Beauty is great, but I believe that Return Of Investment should be your main priority.

In another scenario this same tool helps you to understand what area of your website has the most page views, how many times visitors wanted to contact you, or which elements of your portfolio visitors love the most. How many benefits can you think of for your site?

Step 2: Set Up a Google Analytics Account

If you don’t have a Google account already, sign up for one here – it only takes a few seconds.

Once that’s done, head to http://google.com/analytics and sign up for an Analytics account. There you can give an account name for the websites you want to track.

Step 3: Inside the Machine

Head to https://google.com/accounts/ManageAccount
and use your mouse skills to click Analytics.

Great, we are now in the Overview page. You should see your Analytics account name; click it and you’ll find yourself at the website profiles.

If you haven’t set up a website to track, simply click ‘Add Website Profile’. Enter your domain name and Country, then click Finish.

Step 4: Retrieve your UA Code and Tracking Status

The Tracking Status page will automatically appear:

The most important part is your web property ID. This is a unique number Google Analytics will use to send and store your website’s traffic. (Copy this UA code for use later in Flash, or write it down.) For this introduction we’ll simply keep all the options at their defaults.

If you’re going to embed your SWF on your own webpage, the javascript code must be pasted right before the </body> tag in the page’s HTML. This will allow you to keep statistics for the actual page itself, as well as for within the SWF. It’s worth inserting this code in every page on your site.

All this is great, but you still won’t be able to pinpoint your visitors’ interaction in great detail, as the HTML is blind to your actual SWF / Flash content.

Step 5: Gathering Wood

To make sure you can see which parts of your SWF are being used, head to http://code.google.com/p/gaforflash/.

This amazing open source AS3 API has a lot of great features for integrating GA into Flash, but even with our biggest and most complex websites, we’ve only ever used two functions. (More about these later on.) Make sure you download the latest installment on the right of the page. (Come back any time to read the wiki, issues etc, to learn more about this vast API.)

Step 6: Install the Components

The zip contains a documentation folder with the entire API layout to help you along the way; a library folder (lib) where you’ll find the two components; and some text files you probably won’t ever read. At least I didn’t ;]

To install the components, make sure Flash is closed, then navigate to:

• Windows users: C:\Program Files\Adobe\Adobe Flash CS X\language\Configuration\Components
• Mac users: Macintosh HD/Applications/Adobe Flash CS X/Configuration/Components

At this point you need to create a directory named ‘Google’ and copy the files from the \lib\ folder in the zip to it.

Basically the two components give you the same functionality but are developed for two different purposes. The Analytics component is for those who are unfamiliar with AS3. I assume most of you are already using AS3, so we’ll use the AnalyticsLibrary component.

Step 7: Feeding the Fire

Inside Flash, open the FLA for the project you’re working on, click Window > Components, and drag the AnalyticsLibrary component to your library.

Step 8: Action! (Script)

Whether you’re coding on the timeline or using a document class, you’ll need to do some imports:

//import the Analytics classes
import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;

Also, in your code, create a new instance of the AnalyticsTracker:

var tracker:AnalyticsTracker = new GATracker( this, "UA-XXXXXX", "AS3", true );

The parameters are: stage, UA code, actionscript 3 mode, visual debugger on/off. Leave them all as I’ve set them, apart from the UA code which you’ll need to swap for your own. Set the last parameter to false when you are done with your testing phases, as when true it will create an overlay on top of your SWF file like in the example above.

Test this out by adding a Click event listener and handler to one of your movie clips or buttons:

myMc.addEventListener (MouseEvent.CLICK,onClick);

function onClick (event:MouseEvent):void
{
	//make your clients happy.
    //use 'event.target.name' instead of 'event.target'
	//this will display 'myMc' instead of [object myMc], which is obviously a nicer output.
	var mySelection:String = event.target.name;
	tracker.trackPageview ("gallery = " + mySelection);
}

Here we’re using the trackPageView() function. Use this for navigation purposes. You can add a string so your client knows what part is being tracked. In this case we’re tracking which gallery has been triggered. So copy and paste this code everywhere you want to track your interactions and give an understandable String to the data.

For example, if you have a “call to action” button on stage to lure potential new clients, you could write:

tracker.trackPageview("Hire me");

…in the Click event handler for that button. Or if you want to track how many times they have read your disclaimer:

tracker.trackPageview("Disclaimer");

I’m sure you get the idea.

Step 9: Event Tracking

Use event tracking if you want to track what video or MP3 event is being played, or when the user pauses it – things like that. It’s basically for any action that doesn’t represent opening a “page”.

The code looks like this:

trackEvent(category, action, label);

For example:

tracker.trackEvent("profile videos", "play", "first video: introduction");

Additionally you can add a fourth parameter. This can represent any value you like, but it must be an integer (whole number). For example, you might want to pinpoint the exact time when the video was paused.

This is great to see how well your streaming or downloading performs for your visitors (not everyone has top class Internet connections):

var currentTime:Date = new Date().time;	//get the current time
//load the video here
var readyToRoll:Date = new Date().time - currentTime;	//get time taken to load the video
tracker.trackEvent("profile videos", "playing the video", "video 1/3: introduction", readyToRoll);

Step 10: See the Data in Google Analytics

Go to http://google.com/analytics/settings/ and click your account name. Next to your domain name, click View Report.

Here you will see a timeline. (Please note: depending on your server response time it can take a while before the data gets stored, but it shouldn’t take too long.) Select the dates for when you have been testing using the calendar in the top-right:

Locate the Content Overview; here you can see which events or buttons were triggered:

As you can see, as I explained a few steps back, event.target.name displays a “nice” name like “/gallery = gallery 1″, while event.target returns something like “[object picture1]“

Clicking on one of these links – for example, “/gallery = gallery2″ – you will be able to see in-depth information, like what screen resolution your users have, when you choose an option in the drop-down menu.

There’s a deep and rich information source in nearly every single branch of the Google Analytics module. It’s nearly impossible to list all of them. Don’t be afraid; look around and see what data you can provide to your clients and yourself.

Step 11: Eliminate Yourself from the Stats using Filters

It’s a good idea to filter out your own behaviour; otherwise, it will give you incorrect data since you will probably test this in great detail.

You can do this by filtering all activity coming from your IP address – though please note, this will only work if you have a static IP address. There is a lot of documentation in the help files; I can’t cover it all here. Check out http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55481

Filters can also be useful for other reasons. Here is some more information: http://www.google.com/support/googleanalytics/bin/topic.py?hl=en&topic=11091

Step 12: The End is the Beginning…

In this Quick Tip I’ve only covered a snowflake on the tip of the iceberg of what you can do with this amazing API. It’s a quick overview on the two most beneficial functions that we deal with to improve our websites and match our clients’ wishes.

You can also set predefined goals, group users that (for example) use widescreen monitors, base your Analytics on search engine keywords and so on. For your clients, you can send an email with daily, weekly or monthly reports (as xml, PDF, or other formats), or even give them access to your Analytics page. If you’d like more information, please ask in the comments!

My Opinions on Search Engine Friendly Flash Websites

Although it is beneficial to read and trace your visitors’ interactions, this is a long way from using Flash in an SEO-friendly world. I’ve warmed you up for optimal website design and focusing on Return of Investment, but we’re not there yet.

A good next step would be to look into the Gaia framework, and use its mighty setup to work with swfaddress and deeplinking. This will allow you to track individual pages of your website project and in combination with your newly learned Google Analytics magic, I am sure not only your clients will smile.

Editor’s Note: We have some Gaia tutorials lined up, don’t worry ;)

I’ve been working for over 10 years in the graphic design world, and never had so much power to know exactly what my clients and visitors want. I often like to call it “free marketing and research from your desktop”. (If you are wondering why my own site isn’t using this technology, well honestly… I hope to re-launch by mid 2010 *sips coffee*)

I hope this opens new doors for you and boosts your skill set. Good luck and have fun!