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

Modifying the JavaScript from Your Vendor

Since most client-based analytics platforms process once on page load, there are a few changes I made to the code I received from Omniture, our analytics vendor. The code we originally received from Omniture looked something like the following:

<script language="JavaScript"><!--
	var s_pageName='Macromedia Home Page';
	var s_channel='Macromedia Channel';
	var s_prop1='Special Descriptive Variable 1';
	var s_prop2='Special Descriptive Variable 2';
	//--></script> 
	<script src="omniture_propietary_js.js"></script>
	<script language="Javascript">
	var s_accountName='macr_account_name';
	s_wds(s_accountName);s_ca(s_accountName);
	var ns=s_accountName;
	s_gs(ns);
</script>

You can see that the code sets the variables once on a page load. Then, the last line calls a function, s_gs(), with the account name. This function (declared in the external JavaScript file that contains the vendor's proprietary code) collects values for all of the declared variables and transfers them to the vendor's servers. This method also runs once when the page loads.

First, I address question 1 (How to keep from double-logging values when the application loads?). I modified the code slightly to initialize all of the variables I might need throughout the life of the RIA; but the code does not send any variables until they are needed. After my changes, the JavaScript looked like the following (the yellow highlighter shows the changes I made):

<script language="JavaScript"><!--
	var s_pageName='';
	var s_channel='';
	var s_prop1='';
	var s_prop2='';
	//-->
</script> 
	<script src="omniture_propietary_js.js"></script>
	<script language="Javascript">
	var s_accountName='macr_account_name'; 	s_wds(s_accountName);s_ca(s_accountName);
	function sendAnalyticsEvent(secondaryAcctName){
		var ns=s_accountName;
		if(secondaryAcctName!=null)ns+=","+ secondaryAcctName;
		void(s_gs(ns)); 
		}
</script>

I removed the values from the variable declarations and initialized them all as empty strings (except for the primary account name, which never changes over the life of the RIA). Also, I wrapped call to s_gs()in a function, sendAnalyticsEvent().When the page loads, it does not call this function so it does not send the variables immediately. Also, the function accepts an argument for a secondary account name which, if defined, appends itself to the primary account name before being sent to s_gs(). These changes help address questions 1 (How to keep from double-logging values when the application loads?) and 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 above list.

Finally, I wanted a simple way to see the parameters that my Flex app passes to my JavaScript method. To accomplish that, I added a div tag to my HTML called debugLayer and a method to update the text within the div tag. Here's the entire HTML file after my last set of additions:

<html>
  <script language="JavaScript"><!--
      var s_pageName='';
      var s_channel='';
      var s_prop1='';
      var s_prop2='';
      //--></script> 
      <script src="omniture_propietary_js.js "></script>
      <script language="Javascript">
      var s_accountName= ‘macr_account_name';
      s_wds(s_accountName);s_ca(s_accountName);
      function sendAnalyticsEvent(str){
        var ns=s_accountName;if(str!=null)ns+=","+str;void(s_gs(ns));
         updateTextMonitor();
      }
		
      function updateTextMonitor()
      {
        var txt = "<font size='1'>s_pageName : " + s_pageName + "<br />";
        txt += "s_channel : " + s_channel + "<br />"
        txt += "s_prop1 : " + s_prop1 + "<br />"
        txt += "s_prop2 : " + s_prop2 + "<br />"
        txt += "#######################<br /><br />";
        document.getElementById("debugLayer").innerHTML += txt;
      }
    </script>
<body>
<div ID="debugLayer">  ### debug ###<br /></div>
</body>
</html>

I saved all of the above changes in a file called analytics.html and placed this file in the directory that contains all of my demo files. Now that you have created the file that loads into an iframe by the host file, it's time to take a look at the host file itself.

Page 3 of 8
Previous Page
Next Page