Excellent hack! Really, this is a big step for feasibility regarding Flex based sites. Advertisers especially are interested in analytics data. What about deep linking, could you run that through GA too?
-- William --- In [email protected], "Tracy Spratt" <[EMAIL PROTECTED]> wrote: > > 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 >
