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!

Let’s take a look..

Background

Before we jump right into the code, we’ll explore what SWFAddress is and how we need to adjust our work flow to use it. Essentially, SWFAddress is a javascript/ActionScript library which gives you the ability the change the browser’s URL, add entries to it’s history list and fire off ActionScript events when the browser changes its URL. SWFAddress will listen for specific browser events (URL changes) and signal its ActionScript counterpart to trigger certain events. The ActionScript class also gives us an easy to use API for controlling various browser actions (ie. changing the URL, changing the page title).

SWFAddress sites differ from some traditional sites because the navigation logic must be string based and it must have a central junction. It’s common for many flash based sites to have a unique function attached to every navigation element. For example, the first button may trigger a function showPage1() and the second could trigger a function showPage2() etc. In a SWFAddress page every navigation element will trigger the same function, namely the one that instructs SWFAddress to change the URL.

SWFAddress will also simultaneously trigger its change event at which point you will need to evaluate the current URL and decide what action to take. Once you get comfortable with this difference you’ll find that SWFAddress creates little resistance to your regular workflow. In fact, many developers already use a similar navigation architecture on their non-SWFAddress sites.

This tutorial will begin by building a basic page with 4 navigation elements. We’ll then introduce SWFAddress into the mix to give us some deeplinking support. Finally, for the advanced users, we’ll swap out our static menu/text and use an external XML file to supply the content.

Step 1: Setting Up the Workspace

Our SWFAddress powered website will consist of a few key files. We’ll need our main FLA, the SWF it compiles, an HTML page, the SWFAddress .as libraries, the SWFAddress .js libraries and the SWFObject libraries (the javascript libraries are in the swfaddress and swfobject folders).

Step 2: The HTML File

Our HTML page is a basic SWFObject dynamic embed with a line for SWFAddress. We won’t go too in depth into it since the HTML and js are beyond the scope of this tutorial. Suffice to say, the only differences between a typical SWFObject HTML template and this is the HTML on line #7 (see the line highlighted in blue).

Step 3: Basic FLA Setup

Now that the source files are in place we’ll start making our FLA. Create a new AS3 document, set its dimensions to 600 x 400px then save it to the project directory as "tutorial.fla". We’ll also set the background color to #999999 so it looks less boring.

Step 4: Menu Items Array

For this tutorial we’re going to make an array to hold our menu items. This will make it easier to incorporate an XML based menu at a later date if you want. We’ll start by making a new layer on the timeline which we’ll call "actions". We’ll then pull up the actions panel (with that layer selected) and use the following code:

var menuArray:Array = new Array("Home", "About Us", "Services", "Contact Us");

It should look something like this:

Step 5: Drawing the Menu Holder

Now we’re going to start making the menu. We’ll make a new layer (call it "menu") and begin by drawing a simple 400 x 50px rectangle with a 2px corner radius on the new layer. The color isn’t important because we’ll tweak it later.

Step 6: Converting the Menu to a Movie Clip

Now we’ll select the menu and press F8 to convert it to a movie clip. We’ll give it a library identifier of "menu" and an instance name of "menuHolder".

Step 7: Making the Menu Background

Double-click on the newly created menu movie clip to enter its edit mode. We’ll select the shape inside and again convert it to a movieclip (F8). This time however, we’ll be applying a 9 slice scaling grid to it. We do this so we can have a background for the menu that we can scale cleanly without having to scale the menu itself. We’ll give it a library and instance name of "menubg".

I’ve also added a subtle blue glow to the menu using a glow filter with the blurx and blury set to 6, strength set to 50% and the color set to #32CCFF.

Step 8: Drawing the Menu Items

Now we’ll go back to the main document and begin creating the actual menu items (ie. the "links" that will populate the menu). Although we’re drawing these on the main document we could draw them anywhere as they’ll be dynamically added to the stage later. We’ll first create a textfield and set it to dynamic and give it an instance name of "txt". We’ll set the font to Arial, the size at 22pts and the color to white #ffffff. Make sure the textfield is not selectable (the first button below the anti-alias drop down menu). Finally, we’ll embed the font. You can use any font you like, but you’ll need to remember to adjust the font size so that it fits the menu height wise.

Step 9: Exporting Menu Items for ActionScript

We’ll now convert the menu items to movie clips, but we’ll need to take an extra step since we’ll be re-using this movie clip in our ActionScript. Select the textfield and press F8 to bring up the movieclip dialog, input "menuItem" into the name field then select the "Export for ActionScript" check box. Once done click OK, then click OK again on the following confirmation dialog (it may not appear depending on your settings).

Step 10: Creating the Menu Items (ActionScript)

We’ll use the following code to populate the menu with the appropriate menu items:

var xval = 20;

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
}

menuHolder.menubg.width = menuHolder.width + 20;
menuHolder.x = (stage.stageWidth/2) - (menuHolder.width/2)

Basically we’re looping through the elements of our array and for each element creating a new instance of menuItem. Then we’re setting the textfield inside menu item to "autoSize = left" so that it expands to fit the text that’s placed inside it. The next line sets the text inside the textfield according to the array element which corresponds with the current iteration of the loop. xval is a variable we use that stores the position of the menu item so we can place them beside each other. Then we center the menu Item within the menu and finally add the menu Item’s width and the padding value to xval. Next we add the menu item to the menuHolder. The last 2 lines of code make the menuHolder’s background stretch to fill the menu holder (we add 20px for padding) and center the menu on the stage.

Step 11: Creating the Content Area

Before we move on to assigning actions to the menu items and setting up SWFAddress, we’ll need to create some content to display. For the sake of simplicity we’ll use the default flash tweening engine. Create a new layer called content. On this layer create a rectangle measuring 500 x 250px and convert it to a movie clip with an instance name of "content".

Step 12: Adding Textfield to Content Area

Now that we’ve created the content area we’ll double click it to enter edit mode and place a dynamic textfield on it. This textfield should be the almost as large as the "content" movie clip. We’ll use the same text settings as the menu (arial 22pt, white) with fonts embeded. We’ll give it an instance name of txt and change the behavior (under paragraph settings) to multi line.

Step 13: Creating the content

Now let’s create some content that we can populate the content area with when menu items are selected. For the sake of simplicity we’ll just create 4 different string variables, but in a more advanced site you would likely be replacing this with some external data source. Add the following 4 variables to our ActionScript code:

var text1:String = "This is the text for the Home page"
var text2:String = "Here is the text that you would see on the About Us page"
var text3:String = "This page would feature the various services we provide"
var text4:String = "These are the various methods you can get in contact with us. You will also find a map here"

You can place these near the top of the code.

Step 14: Making the Textfield’s Change Function

We’ll now create a simple function that changes the textfield’s content and animates the transition. Paste in the following code then we’ll explore it line by line:

import fl.transitions.Tween;
import fl.transitions.easing.*;
var cTween:Tween = new Tween(content, "x", Regular.easeOut, 50, 50, .1,true);
var mainText:String

function textChange(){
cTween.continueTo(-800, .4);
cTween.addEventListener("motionFinish", setText)
}

function setText(e:Event){
content.txt.text = mainText
cTween.continueTo(50,.4)
}

The first 2 lines simply import the tween class and easing functions. The next line initializes the tween so we can more easily manipulate it with the continueTo function. The 4th line creates a variable which holds the current string, this variable will be set by SWFAddress and the content area will load this variable into its textfield whenever it’s tweening back into position. The textChange function tweens the content area off to the side and sets an event listener to trigger the setText function when it’s done. The setText function tweens the content area back on stage and sets its textfield to whatever mainText has been set to by SWFAddress.

Step 15: Initializing SWFAddress

To initialize SWFAddress we simply need to add its CHANGE event and create that event’s handler. These few lines of code will do it;

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)

function addressChange(e:Event){
//stuff to do when address changes
}

The "addressChange" function will run every time the browser changes the URL (via back/forward buttons, re-writing the address bar URL or any other method) or you change the URL (via the SWFAddress.setValue function).

Step 16: Adding Actions to the Menu Items

Our next step is to add some behavior to the menu buttons we created earlier. We’ll be doing this by revisiting the menu creation loop we built earlier.

var xval = 20

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener('click', menuClicked)
}

The last line before the closing brace is the one we need to add. It creates an event on the menu items that fires when a menu item is clicked. We’ll now need to add the corresponding event handler.

var xval = 20;

for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = 'left'
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) - (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener('click', menuClicked)
}

function menuClicked(e:Event){
SWFAddress.setValue(e.currentTarget.txt.text)
}

The last three lines of code we added are executed every time a menu item is clicked. It instructs SWFAddress to execute its setValue function which changes the page and fires its CHANGE event handler. The parameter we’re passing to the setValue function is the text of the menu item that the user has clicked.

At this point, if we uploaded the files to our web server and tested the HTML file, we would have the address URL changing as we clicked the buttons but the file wouldn’t do anything as we haven’t told SWFAddress what to do when the address changes.

Step 17: SWFAddress Actions

We now have the menu set up and the menu buttons are properly triggering SWFAddress. The last part of the equation is to tell SWFAddress what to do when it’s triggered. Earlier in the tutorial (Step 15) we created the SWFAddress event listener and handler. We’ll revisit that block of code and add the following:

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)

function addressChange(e:Event){

if(SWFAddress.getValue() == "/Home"){
mainText = text1
textChange()
}

if(SWFAddress.getValue() == "/About Us"){
mainText = text2
textChange()
}

if(SWFAddress.getValue() == "/Services"){
mainText = text3
textChange()
}

if(SWFAddress.getValue() == "/Contact Us"){
mainText = text4
textChange()
}

SWFAddress.setTitle(SWFAddress.getValue());
}

The key difference is all the code inside the "addressChange" function. We created several conditional statements that check what the current page is, set "mainText" to the appropriate text then launch the "textChange" function which is responsible for animating the transition and setting the text of the content area. The last line sets the page’s HTML title to the current page. This function could be cleaned up with a switch case, but for the sake of simplicity we’ll leave it as is.

Step 18: All Done

Your files should now match the ones in the source files. Publish the FLA, upload the files to your server and you’ll now have a fully functional page.

Conclusion

We’ve now completed our simple SWFAddress powered page. This file should serve as a suitable base for any SWFAddress site and can easily be extended with dynamic content with minimal extra code. I hope you enjoyed following along!