This document covers everything you need to know to set up Google Analytics Tracking for Adobe Flash for the Adobe Flex development environment.
Get the Tracking Library
Download the code (ZIP format) from http://code.google.com/p/gaforflash/downloads/list. Follow the instructions in the readme.txt
file to install the Flex component. Unlike the Analytics Flash components, there is only one library file located in the download: /lib/analytics_flex.swc
.
Add the Code to Your Project
Before you can start using the tracking code in your project, you will need to link the SWC
file you downloaded as a project resource.
- Select Project->Properties. A Properties dialog box appears for your project.
- Click on Flex Build Path and select the Library Path tab.
- Click Add SWC... within the Library Path pane. An Add SWC dialog box appears.
- Navigate to the location where you unzipped the Google Analytics API and select the
lib/analytics.swc
file and click OK.
Or, just drop theanalytics.swc
file into your Flex project/libs
directory.
A Flex MXML Component Example
The following example shows how to set up tracking for a button inside an MXML file. In order to initialize the MXML component, do the following:
- Set the XML namespace parameter. Set the XML namespace parameter of your tracking object as follows:
xmlns:analytics="com.google.analytics.components.*"
- Set the object name. In the example below, the
id
parameter is set totracker
. - Use the
account
parameter for the web property ID. The web property ID is the unique string used to track activity on your Flash content and deliver it to the correct view (profile) in your Analytics account. - Set the tracking mode with the
mode
parameter. UseBridge
for the parameter if you are creating an MXML file and want a simple way to implement tracking. UseAS3
if you are comfortable coding using ActionScript3. AS3 mode allows you to import all the GA tracking classes, from which you can create and configure your own tracking objects. - Set the debug mode with the
visualDebug
parameter. Usetrue
to turn on debugging and validation for your program; otherwise, set this tofalse
for production use.
In the example, a button mybutton
is added to the stage. The Flex tracking component is instantiated with the name tracker
and configured with its parameters. Finally, a click event onButtonClick
is added to mybutton
. When the button is clicked, the virtual pageview /hello world
is incremented with a single count.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" > <mx:Script> public function onButtonClick():void { tracker.trackPageview( "/hello world" ); } </mx:Script> <analytics:FlexTracker xmlns:analytics="com.google.analytics.components.*" id="tracker" account="UA-111-222" mode="AS3" visualDebug="false" /> <mx:Button id="mybutton" label="hello world" click="onButtonClick()" /> </mx:Application>
A Flex ActionScript 3 Example
In more complex situations, you might want to call the native ActionScript 3 tracking classes directly from your ActionScript resources files. While this example is also an MXML file, all the tracking instantiation is done in the <MX:script>
tags. This same process can be used to add tracking to other ActionScript 3 projects.
In this example, a button mybutton
is added to the stage. In the script tags, two libraries are imported:
com.google.analytics.GATracker; //this is the actual tracking class com.google.analytics.AnalyticsTracker; //this is an interface that the GATracker class implements
After the libraries are imported, the tracking variable tracker
is created. Once the application has been added to the stage, onComplete
is called, which instantiates the tracking object. The four parameters that you need to instantiate the GATracker object are:
- Reference the current display object. In the example below,
this
references the display object. - The web property ID. The web property ID is the unique string used to track activity on your Flash content and deliver it to the correct view (profile) in your Analytics account.
- The tracking mode. Valid parameters are
Bridge
orAS3
. - The debug mode. Set
debug
tofalse
for production use and totrue
for validation and troubleshooting.
Finally, on the myButton
click method, the onButtonClick
function tracks a virtual pageview on our tracking object.
When this application runs, every time a user clicks the button, a virtual pageview of "hello world" is sent to the Google Analytics tracking servers.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" addedToStage="onComplete()" > <mx:Script> <![CDATA[ import com.google.analytics.GATracker; import com.google.analytics.AnalyticsTracker; public var tracker:AnalyticsTracker; private function onComplete():void { tracker = new GATracker( this, "UA-111-222", "AS3", false ); } public function onButtonClick():void { tracker.trackPageview( "/hello/world" ); } ]]> </mx:Script> <mx:Button id="mybutton" label="hello world" click="onButtonClick()" /> </mx:Application>