Adding Google Analytics tracking code

[Dave]

I need to add Google Analytics tracking to my Xi apps. Ideally, I don't want to have to code anything in my apps to make it work, plus I don't want page refreshes from immediate validation events to record new page loads on Analytics. Also, I want to be able to change what events I'm tracking without actually touching my code.

I want to use the standard Analytics asynchronous tracking code that Google supply:

Code: Select all

<script>

  var _gaq = _gaq || &#91;&#93;;
  _gaq.push&#40;&#91;'_setAccount', 'UA-XXXXX-X'&#93;&#41;;
  _gaq.push&#40;&#91;'_trackPageview'&#93;&#41;;

  &#40;function&#40;&#41; &#123;
    var ga = document.createElement&#40;'script'&#41;; ga.type = 'text/javascript'; ga.async = true;
    ga.src = &#40;'https&#58;' == document.location.protocol ? 'https&#58;//ssl' &#58; 'http&#58;//www'&#41; + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName&#40;'script'&#41;&#91;0&#93;; s.parentNode.insertBefore&#40;ga, s&#41;;
  &#125;&#41;&#40;&#41;;

</script>

and the actual information I want to send for tracking would be something like

Code: Select all

"_gaq.push(['_trackPageview', '"/form-url/form-name/stageName']);"

where stageName is something I decide for a particular tracking event.

[Dave]

A convenient way to achieve this is to assign a specifically named custom attribute (via HtmlElements), such as trackerID, to each element that you wish to track. The value of the custom attribute can then represent the stageName that you want to assign to a click on that element, and will be the value that gets passed to to Analytics via

Code: Select all

"_gaq.push(['_trackPageview', '"/form-url/form-name/stageName']);"

For example, you might have a button click that you want to track, so you assign trackerID=thisButtonClicked.

The click events can easily be bound to each element with the trackerID custom attribute via jQuery in a client script, e.g.

Code: Select all

$(document).ready(function(){
   $("[trackerID]").click(function() {
   ...tracking processing for the click goes here
   });
});

The trackerID value for a clicked element is also easily retrieved via jQuery

Code: Select all

$(this).attr("trackerID")

and the form name and form URL can picked up in jQuery from hidden (on the form page but not visible, i.e. display:none;) fields set on your apps BeforeForm event, e.g. in FPL

Code: Select all

form_name = $FORMID;
form_url = $UFS_REQUEST_URL;

Assign ID locators of formName and FormURL to these fields and the code in your client script handling the clicks would look like

Code: Select all

$(document).ready(function(){
   $("[trackerID]").click(function() {
      _gaq.push(['_trackPageview', $("#form_url").val() + "/" + $("#form_name").val() + "/" + $(this).attr("trackerID")]);
   });
});

The last thing to handle is the prevention of immediate validation page refreshes from being tracked as a new page loads: we can add a form field, e.g. form_load_flag with a locator ID of formLoadFlag and a default value of 1. When the client script runs when we first execute the app we can test if the form_load_flag has a value of 1 (which it will) and if so, do an initial write to Analytics and clear the field value to 0. This prevents subsequent page refreshes from firing any unwanted tracking. Adding this logic and including Googles supplied tracking code we have

Code: Select all

// jQuery $(document).ready() code
//
$(document).ready(function(){
   // Bind a click event to each element with the trackerID customer attribute. The function writes the value (to Google tracking) of the custom 
   // attribute defined on the element that fired the event.
   //
   $("[trackerID]").click(function() {
      _gaq.push(['_trackPageview', $("#formURL").val() + "/" + $("#formName").val() + "/" + $(this).attr("trackerID")]);
   });

   // Check the value of hidden page field formLoadFlag to see if this is the first time the form loads, i.e. has the valie 1. If it is then write 
   // to Google tracking and clear the flag to 0 to prevent further writes if the page gets reloaded, e.g. from immediate validation.
   //
   if ($("#formLoadFlag").val()=="1") {
      _gaq.push(['_trackPageview', $("#formURL").val() + "/" + $("#formName").val() + "/" + "Loaded"]);
      $("#formLoadFlag").val("0");
   }
});

// Google analytics supplied tracking code
//
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_setDomainName', 'myDomain']);
_gaq.push(['_trackPageview']);

(function() {
   var ga = document.createElement('script'); 
   ga.type = 'text/javascript'; 
   ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   }
)();

The client script can be added to your project's Presentation Template and the BeforeForm processing and form_load_flag field can be added as standard for all of your apps. This way your Analytics tracking becomes a simple exercise of setting a custom attribute and value on any element where a click corresponds to a tracking event.

A simple form demonstrating the above can be downloaded from
http://www.ebaseftp.com/download/forum/ ... ngDemo.zip