Accessibility

Table of Contents

  1. Introduction
  2. A Simple Approach to Implementing Client-Based Analytics in a Flex-based RIA
  3. Modifying the Javascript from Your Vendor
  4. Looking at the The Host JSP File
  5. GetURLQueue() : Gateway to Javascript
  6. AnalyticsFacade(): Logging Your Views
  7. Building the Application
  8. Where To Go from Here

Setting Up Client-Based Analytics in a Flex Application

Looking at the Host JSP File

Question 2 (Will HTTP requests to the analytics platform interfere with other HTTP requests that you might make, such as downloading or uploading bits?) from the original list of issues is a tricky one. Solving it requires some understanding of the inner workings of a browser and a brief under-the-hood look at Macromedia Flash Player.

Many browsers treat an outgoing HTTP request as not only a request for new data, but also as a request to kill off (or "orphan") any outstanding HTTP requests that may have already been issued. In our original testing, we found that Internet Explorer 5 and 6 both handled HTTP requests this way. To work around this, I decided to encapsulate the JavaScript in an iframe. Most browsers treat iframes almost identically to frames, meaning that all of the iframes in a given page can simultaneously make HTTP requests without orphaning other iframe requests. To create an iframe, I first created a host file for my demo using the Flex Tag Library for JSP (for more information on the Flex Tag Library, refer to the documentation). The original host file looked like the following:

<%@ taglib uri="FlexTagLib" prefix="mm" %>
<html>
<!--<body style="overflow:hidden">-->
    <body bgcolor="#FFFFFF" title="Flex Analytics Implementation Demo">
	
      <mm:mxml source="omniture_test.mxml" />
		
    </body>
</html>

Then, I loaded analytics.html into an iframe in the above host:

<%@ taglib uri="FlexTagLib" prefix="mm" %>
<html>
    <body bgcolor="#FFFFFF" title="Flex Analytics Implementation Demo">
	
	<mm:mxml source="omniture_test.mxml" />
		
	<!-- analytics iframe -->
	<iframe id="analyticsFrame" name="analyticsFrame" width="100%" height="200" frameborder="0" vpsace="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="analytics.html"></iframe>
    </body>
</html>

I set the height of the iframe to 200 so that I can see the trace statements that my JavaScript outputs. In production, set the frame height parameter to 0 to make it invisible to the user. Last, I want to be able to pass in some variables to my MXML file to allow for easier reuse and maintenance. The parameters I pass are javascriptMethod, which is the name of the method that my application calls to log views; jsMethodLocation, which is the iframe that contains the JavaScript method; and analyticsParams, which is a comma-separated list of all of the parameters that my application will send in each of its logged views.

<%@ taglib uri="FlexTagLib" prefix="mm" %>
<html>
<!--<body style="overflow:hidden">-->
    <body bgcolor="#FFFFFF" title="Flex Analytics Implementation Demo">
	
	<mm:mxml source="omniture_test.mxml">
            <mm:param name="javascriptMethod" value="sendAnalyticsEvent" />
            <mm:param name="jsMethodLocation" value="analyticsFrame" />
            <mm:param name="analyticsParams" value="s_pageName,s_prop1,s_prop2,s_channel" />
	</mm:mxml>
		
	<!-- analytics iframe -->
	<iframe id="analyticsFrame" name="analyticsFrame" width="100%" height="300" frameborder="0" vpsace="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="analytics.html"></iframe>
    </body>
</html>

The host file is complete. I now have a container for my Flex app that contains:

  • An iframe that loads my JavaScript, through which I can edit the names of the JavaScript method I call
  • The iframe that contains the method
  • The parameters that the app must pass with every view logged

Next, I show you how to write the ActionScript classes that contain the logic to make it all work.

Page 4 of 8
Previous Page
Next Page