Flex 4: Simple walkthrough in adding GA to your flex site

As an individual started creating a new website, he/she will be interested in finding out how did the website perform. He/she will be interested in tracking down the actions of the user and which is the most popular page throughout the whole website. Therefore I'm creating a simple demo on integrating the Google Analytics services into your flex website.

Time for some coding.
The main application file source code - SimpleGATracking.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="creationCompleteEvent(event)"
      addedToStage="addedToStageEvent(event)"
      xmlns:local="*">
 <fx:Script>
  <![CDATA[
   import com.util.GATracker.GATrackerObj;
   
   import mx.events.FlexEvent;
   
   private var _isCreationComplete:Boolean = false;
   private var _isAddedToStage:Boolean = false;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    _isCreationComplete = true;
    createContent();    
   }
   
   protected function addedToStageEvent(event:Event):void
   {
    _isAddedToStage = true;
    createContent();
   }
   
   private function createContent():void
   {
    if(_isCreationComplete && _isAddedToStage)
    {
     //let's setup the GATrackerObj
     GATrackerObj.getInstance().setup(this,"UA-35825942-1",true);
    }
   }
   
   /* 
    Upon clicking on one of the buttons,
    we will track the button click.
   */
   protected function clickEvent(event:MouseEvent):void
   {
    if(event.currentTarget == btn1)
    {
     GATrackerObj.getInstance().
      track("main/button_1_click");
    }else if(event.currentTarget == btn2){
     GATrackerObj.getInstance().
      track("main/button_2_click");
    }
   }
   
  ]]>
 </fx:Script>
 <s:VGroup width="100%"
     height="100%"
     verticalAlign="middle"
     horizontalAlign="center">
  <s:VGroup width="50%"
      height="50%">
   <s:HGroup horizontalAlign="center"
       verticalAlign="middle"
       width="100%"
       height="50%">
    <s:Button id="btn1"
        label="Button 1"
        click="clickEvent(event)"/>
    <s:Button id="btn2"
        label="Button 2"
        click="clickEvent(event)"/>
   </s:HGroup>
   <local:SimpleCanvasView width="100%"
      height="50%"
       backgroundColor="#DEDEDE"/>
  </s:VGroup>
 </s:VGroup>
</s:Application>

The view file source code - SimpleCanvasView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 <s:layout>
  <s:HorizontalLayout horizontalAlign="center"
        verticalAlign="middle"/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   import com.util.GATracker.GATrackerObj;
   /* 
    Upon clicking on one of the buttons,
    we will track the button click.
   */
   protected function clickEvent(event:MouseEvent):void
   {
    if(event.currentTarget == btn1)
    {
     GATrackerObj.getInstance().
      track("inner_view/button_1_click");
    }else if(event.currentTarget == btn2){
     GATrackerObj.getInstance().
      track("inner_view/button_2_click");
    }
   }
  ]]>
 </fx:Script>
 
 <s:Button id="btn1"
     label="Button 1"
     click="clickEvent(event)"/>
 <s:Button id="btn2"
     label="Button 2"
     click="clickEvent(event)"/> 
</s:BorderContainer>

The file that I have created to communicate with Google Analytics - GATrackerObj.as

package com.util.GATracker
{
 import com.google.analytics.AnalyticsTracker;
 import com.google.analytics.GATracker;
 
 import mx.core.UIComponent;
 
 public class GATrackerObj extends UIComponent
 {
  private static var _instance:GATrackerObj=null;
  public var tracker:AnalyticsTracker;
  
  //You need the following functions to create a 
  //singleton Object. SingletonObject(e:SingletonEnforcer)
  //and getInstance():SingletonObject
  //Rather than using new SingletonObject to create a new
  //object of the class, you need to use
  //SingletonObject.getInstance() to point to the Singleton
  //class.
  public function GATrackerObj(e:SingletonEnforcer)
  {
   trace("new singleton object created");
  }
  
  public static function getInstance():GATrackerObj{
   if(_instance==null){
    _instance=new GATrackerObj(new SingletonEnforcer);
   }
   return _instance;
  }
  
  /**
   * In order to track(value) your pages, 
   * you need to run setup first
   * 
   * @param view - the view that you are executing the setup()
   * @param id - the GA Account ID
   * @param debug - do you want to show the visual debug console 
   */
  public function setup(view:*,
         id:String, 
         debug:Boolean = false):void
  {
   view.addElement(GATrackerObj.getInstance());
   tracker = new GATracker(this, id, "AS3", debug);
  }
  
  /**
   * In order to track(value) your pages, 
   * you need to run setup first
   * 
   * @param value - the page you want to track 
   */
  public function track(value:String):void
  {
   tracker.trackPageview("/web/" + value);
  }
 }
}

//This class is needed in creating a singleton class.
class SingletonEnforcer{
 
}

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.
~ Click here for the in-depth contents of Google Analytics.
** Click here for the Google Analytics Component for Flash/Flex.