Configuración de Adobe Flex

Este documento abarca todo lo que necesitas saber para configurar el seguimiento de Google Analytics para Adobe Flash para el entorno de desarrollo de Adobe Flex.

Cómo obtener la biblioteca de seguimiento

Descarga el código (formato ZIP) de http://code.google.com/p/gaforflash/downloads/list. Sigue las instrucciones del archivo readme.txt para instalar el componente de Flex. A diferencia de los componentes de Analytics Flash, solo hay un archivo de biblioteca ubicado en la descarga: /lib/analytics_flex.swc.

Agrega el código a tu proyecto

Antes de que puedas comenzar a utilizar el código de seguimiento en tu proyecto, deberás vincular el archivo SWC que descargaste como un recurso del proyecto.

  1. Selecciona Project->Properties. Aparecerá el cuadro de diálogo Properties para tu proyecto.
  2. Haz clic en Flex Build Path y selecciona la pestaña Library Path.
  3. Haz clic en Add SWC... en el panel Library Path. Aparecerá un cuadro de diálogo Agregar SWC.
  4. Navega hasta la ubicación en la que descomprimiste la API de Google Analytics, selecciona el archivo lib/analytics.swc y haz clic en Aceptar.
    También puedes soltar el archivo analytics.swc en el directorio /libs del proyecto de Flex.

Ejemplo de un componente de MXML de Flex

En el siguiente ejemplo se muestra la manera de configurar el seguimiento de un botón dentro de un archivo MXML. Para inicializar el componente MXML, haz lo siguiente:

  • Configura el parámetro de espacio de nombres en formato XML. Configura el parámetro de espacio de nombres XML de tu objeto de seguimiento de la siguiente manera: xmlns:analytics="com.google.analytics.components.*"
  • Establece el nombre del objeto. En el siguiente ejemplo, el parámetro id se establece en tracker.
  • Usa el parámetro account para el ID de propiedad web. El ID de propiedad web es la cadena única que se utiliza para realizar un seguimiento de la actividad en tu contenido Flash y enviarlo a la vista (perfil) correcta de tu cuenta de Analytics.
  • Configura el modo de seguimiento con el parámetro mode. Usa Bridge para el parámetro si creas un archivo MXML y deseas una manera sencilla de implementar el seguimiento. Usa AS3 si te sientes cómodo programando con ActionScript3. El modo AS3 te permite importar todas las clases de seguimiento de Google Analytics, desde las cuales puedes crear y configurar tus propios objetos de seguimiento.
  • Configura el modo de depuración con el parámetro visualDebug. Usa true para activar la depuración y la validación de tu programa. De lo contrario, configúralo como false para usarlo en la producción.

En el ejemplo, se agrega un botón mybutton a la etapa. Se crea una instancia del componente de seguimiento de Flex con el nombre tracker y se configura con sus parámetros. Por último, se agrega un evento de clic onButtonClick a mybutton. Cuando se hace clic en el botón, la vista de página virtual /hello world aumenta con un solo recuento.

<?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>

Ejemplo de Flex ActionScript 3

En situaciones más complejas, tal vez te convenga llamar a las clases de seguimiento nativas de ActionScript 3 directamente desde los archivos de recursos de ActionScript. Si bien este ejemplo también es un archivo MXML, todas las instancias de seguimiento se realizan en las etiquetas <MX:script>. Se puede utilizar este mismo proceso para agregar el seguimiento a otros proyectos de ActionScript 3.

En este ejemplo, se agrega un botón mybutton a la etapa. En las etiquetas de la secuencia de comandos, se importan dos bibliotecas:

com.google.analytics.GATracker; //this is the actual tracking class
com.google.analytics.AnalyticsTracker; //this is an interface that the GATracker class implements

Después de importar las bibliotecas, se crea la variable de seguimiento tracker. Una vez que se agrega la aplicación a la etapa, se llama a onComplete, que crea una instancia del objeto de seguimiento. Los cuatro parámetros que necesitas para crear una instancia del objeto GATracker son los siguientes:

  • Haz referencia al objeto de visualización actual. En el siguiente ejemplo, this hace referencia al objeto de visualización.
  • El ID de propiedad web. El ID de propiedad web es la cadena única que se utiliza para realizar un seguimiento de la actividad en tu contenido Flash y enviarlo a la vista (perfil) correcta de tu cuenta de Analytics.
  • El modo de seguimiento: Los parámetros válidos son Bridge o AS3.
  • Modo de depuración: Establece debug como false para el uso en producción y como true para la validación y la solución de problemas.

Por último, en el método de clics myButton, la función onButtonClick realiza un seguimiento de una vista de página virtual en nuestro objeto de seguimiento.

Cuando se ejecuta esta aplicación, cada vez que un usuario hace clic en el botón, se envía una vista de página virtual de “Hello World” a los servidores de seguimiento de Google Analytics.

<?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>