Adobe Flex Setup

This document covers everything you need to know to set up Google Analytics Tracking for Adobe Flash for the Adobe Flex development environment.

1. Get the Tracking Library
2. Add the Code to Your Project
3. A Flex MXML Component Example
4. A Flex ActionScript 3 Example

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.

1. Select Project->Properties. A Properties dialog box appears for your project.
2. Click on Flex Build Path and select the Library Path tab.
3. Click Add SWC... within the Library Path pane. An Add SWC dialog box appears.
4. Navigate to the location where you unzipped the Google Analytics API and select the lib/analytics.swc file and click OK.
   Or, just drop the analytics.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 to tracker.
• 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 profile in your Analytics account.
• Set the tracking mode with the mode parameter. Use Bridge for the parameter if you are creating an MXML file and want a simple way to implement tracking. Use AS3 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. Use true to turn on debugging and validation for your program; otherwise, set this to false 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 profile in your Analytics account.
• The tracking mode. Valid parameters are Bridge or AS3.
• The debug mode. Set debug to false for production use and to true 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>