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 jus to 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:
1. Log in to your account.
2. Click Edit next to the profile you'd like to enable.
3. On the Profile Settings page, click edit next to Main Website
Profile Information.
4. 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
