Dec 06, 2007 -
Track user navigation and action with Google Analytics
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:
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:
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:
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:
I implemented a public method in my main app:
/** sends usage id to GoogleAnalytics */
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.
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:
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">
Then, we again use ExternalInterface to send the transaction and line item data to a wrapper function:
/* called by ExternalInterface */
document.getElementById('utmtrans').innerHTML = sTransInfo;
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:
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.
I hope you find this useful.