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.
