Macromedia Flex Macromedia Flex
Track user navigation and action with Google Analytics
  Home

Dec 06, 2007 - Track user navigation and action with Google Analytics
Even track sales. Very easy, very little code.

The ability to record and analyze user navigation, actions and even purchases is valuable in many web sites and applications. In case you are not aware of it, Google provides a free service called Google Analytics (GA), that makes this very easy to do. Learn more, and set up your account here: http://www.google.com/analytics/

I recently set this up for a Flex application. While clear and helpful, the GA documentation is strongly oriented toward traditional html websites, full of strange terms like "body onLoad" and such, so making it work with a Flex app was harder than it needed to be. Below are the steps you need to take to use Google Analytics with Flex.

Tracking Navigation and actions:

1: Set up your account, a tracking profile, and get your account id, at the above link. It is quite simple. At the end of this process, you will see a block of javascript that needs to go in the html wrapper of the Flex app

2: Modifying the Html Wrapper: Remember that if you are letting Flex Builder generate the wrapper, you need to do this in "index.template.html", otherwise it can just go in the wrapper html. Copy and paste the whole script block into the html wrapper. I put mine just below the style tag, and above the block that defines the flash Global variables. The first tag includes the js file, the next tag sets the account id to a variable, and invokes the "urchinTracker()" function, which logs a page hit with GA. The script block looks like this:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-xxxxxxx-x"; //this is your account Id
urchinTracker(); //this created a record when the wrapper is hit
</script>

Now, you want to know more than that the app wrapper was hit. To do this, you use ExternalInterface in Flex to call the "urchinTracker()" function, but you include an argument. That argument should look like an url. In my case this was no problem, since my navigation was easily represented by the form:

/ApplicationName/MainNav/SubNav/OptionalAction.

I implemented a public method in my main app:

/** sends usage id to GoogleAnalytics */
public function logUsage(sUsageId:String):void
{
  ExternalInterface.call("urchinTracker",sUsageId);
}

At my main navigation points and in sub-applications as desired, I call that method:

_app.logUsage("/" + _sAppName + "/SubAppName[/Action]" );

The result of this is a very useful set of data regarding users navigation around my application. GA has filters and many other analysis tools available to look at this data.

Tracking Ecommerce:

Google analytics also lets you track sales that are made through your application. Again the docs are full of strange terms like "submit form" and "receipt page", that we do not know about in Flex. But if your Flex site sells stuff, it is easy to log it in GA.

1: Set up GA for Ecommerce logging:
  Log in to your account.
  Click Edit next to the profile you'd like to enable.
  On the Profile Settings page, click edit next to Main Website Profile Information.
  Change the E-Commerce Website radio button from No to Yes.

2: Modifying the Html Wrapper:

This works by placing your sales transaction data in a hidden form in the html wrapper. GA advises that this form be placed just before the closing body tag. It looks like this, copy it exactly:

<form style="display:none;" name="utmform">
  <textarea id="utmtrans"></textarea>
</form>

Then, we again use ExternalInterface to send the transaction and line item data to a wrapper function:

/* called by ExternalInterface */
function logTransaction(sTransInfo)
{
  document.getElementById('utmtrans').innerHTML = sTransInfo;
  __utmSetTrans();
}

You see that the function takes the passed in sales transaction info and puts it in the hidden form. Then it calls the "__utmSetTrans" function, which reads the hidden form values and sends it to Google Analytics.

The sales transaction info string is a specially formatted string, like this:

UTM:T|[order-id]|[affiliation]|[total]|[tax]|[shipping]|[city]|[state]|[country]

UTM:I|[order-id]|[sku/code]|[productname]|[category]|[price]|[quantity]

The string works on the delimiters, "UTM" and the "|" pipe, so spaces and newlines don’t matter. Build this string in your shopping cart however you need.

You can have as many UTM:I, line item records that you want. I think only the order-id is required, but include all the pipe delimiters, even if there is no data between them.

Note that it takes 12-24 hours for data to be visible in the GA reports, which is a pain, but just be patient.

See the GA help for more details on all of this.

Since you are using client javascript, your back-end is never involved, and you don’t need to worry about crossdomain issues etc.

I hope you find this useful.

Tracy Spratt

File Details
Created On Dec, 06, 2007 by Tracy Spratt
Last Modified On Dec, 06, 2007 by Tracy Spratt
Group: Tips and Articles
Flex Versions: 2.0
Category: General
Type: Complete Lesson
Difficulty: Beginner
Keywords: