En este artículo aprenderemos conceptos y técnicas importantes para todo diseñador y/o desarrollador Flash que trabaje con sitios web, banners, RIA, juegos etc. y veremos que es realmente sencillo hacer tracking de lo que sucede en Internet con estos elementos interactivos, no importa que utilicemos Flash o Flex para desarrollarlos.

Google Analytics for Flash

Hoy en día es una parte importante dentro de la estrategia de cualquier sitio y/o elemento web tener estadísticas del comportamiento de los usuarios, tráfico generado por el contenido, enlaces externos e internos, etc. Esto permitirá tomar mejores decisiones en el futuro para obtener el mayor impacto, y lo mejor de todo es que no hay necesidad de desarrollarlo desde cero, porque ya existen herramientas como Google Analytics que nos facilitan enormemente el trabajo.

Originalmente Google Analytics es una tecnología que trabaja de manera automática sobre sitios web generados con HTML en los cuales configuremos el servicio, es importante saber que en promedio un 57% de los sitios más importantes lo utilizan.

El servicio se implementa a través de una etiqueta en la página, conocida como Google Analytics Tracking Code (GATC) que es un simple snippet de código Javascript que el usuario tiene que agregar en cada página de su sitio web. Este código lo que hace es recolectar datos de cada visitante y los manda a los servidores de Google.

Comentamos que de manera automática se realiza el tracking de sitios HTML, pero ¿Qué pasa con los sitios Flash? o con los sitios híbridos. Para ello Adobe creo un componente llamado Google Analytics Tracking for Adobe Flash o en el argot flasher mejor conocido como gaforflash. Este componente contiene toda la funcionalidad del código javascript de Google Analytics y esta compilado como un objeto nativo en ActionScript 3, haciendo su implementación muy intuitiva para ambientes de desarrollo Flash y/o Flex.

¿Por qué utilizar Google Analytics for Flash?

Es posible hacer tracking del contenido Flash sin el componente gaforflash, sin embargo esto involucra algunas complicaciones técnicas adicionales que ya están resueltas. Primero, tendrías que desarrollar una interfaz personalizada para el archivo ga.js para que la aplicación Flash pudiera ejecutar el método apropiado para Analytics, tales como trackPageview() or trackEvent(). Adicional a esto tendríamos que anticiparnos cuando el contenido Flash tiene acceso al Document Object Model (DOM) del navegador, esto es debido a que el tracking falla en aquellos sitios donde el DOM no es accesible por nosotros, esto es típico en sitios de terceros.

Todo lo anterior involucra un entendimiento de como hacer llamadas en ActionScript 3 mediante ExternalInterface para acceder al DOM del navegador y también para abstenernos de hacerlo cuando no tengamos acceso.

El componente gaforflash lo que hace es simplificar el tracking del contenido Flash y manipular el DOM de manera efectiva, haciéndolo útil para los siguiente propósitos:

  • Widgets Flash incrustados en una página de HTML
  • Una aplicación Flex de tipo standalone o un sitio Flash dentro de una página HTML
  • Un juego Flash y/o Flex donde el desarrollador no tenga control de donde será colocado el widget.

Hay que tener en cuenta que hacer tracking de aplicaciones Flash puede traer consigo algunas variaciones estructurales más allá de hacer tracking solamente sobre páginas HTML, es esencial más allá de utilizar el componente familiarizarse con el tracking de Analytics para entender el funcionamiento y aprovecharlo al máximo. Recomendamos ver la siguiente presentación para entender los términos.

Ambientes de Desarrollo Soportados

Es posible aprovechar las funcionalidades de gaforflash y trabajar con Flash (CS3, CS4 y CS5) o con un ambiente de desarrollo Flex con Flex/Flash Builder. En cada ambiente requerimos de un componente diferente que se puede descargar de http://code.google.com/p/gaforflash/. Los componentes están basados en ActionScript 3 y a nivel general la configuración puede hacerse de dos maneras diferentes para cada ambiente:

En Flash

  • Se agrega y configura el Componente Simple desde el inspector de componentes y se arrastra al escenario.
  • Se importan las librerías de Flash Tracking directamente en la librería.

En Flex

  • Se incluye el componente MXML para configurarlo desde el mismo archivo MXML.
  • Se importan las librerías de Flash Tracking dentro de los archivos de AS3 ligados al proyecto.

¿Cómo funciona el Componente de Google Analytics for Flash?

Para poder utilizar el componente de tracking para Flash se puede configurar directamente en el entorno visual o a través de configurarlo directamente en código. Más allá de hacerlo de una u otra forma tienes que proveer los siguientes elementos:

propiedad de ID web —Mejor conocido como el número UA del código de tracking, es un número parecido a UA-xxxxx-yy, donde hay que sustituir x’s y y’s con los números que corresponden a la cuenta y a la información del perfil para el objeto al que se le hará tracking.

tracking mode—Se puede elegir entre modo bridge o modo AS3. Determina como es que el componente de tracking se comunica con los servidores de Analytics.

modo debugging—No importa que ambiente de desarrollo o modo de tracking utilicemos, puedes activar el debugging para hacer pruebas.

Modalidades de Tracking

Dependiendo en como queramos distribuir el contenido, el componente de Google Analytics se comunica con los servidores de Google haciendo un puente entre el contenido Flash sobre una instalación existente de Analytics o comunicándose de forma directa. Estas dos modalidades de trabajo se llaman modo Bridge y modo AS3 respectivamente. Ambas modalidades proveen la misma funcionalidad de tracking y es fácil cambiar de una modalidad a otra, de manera adicional también se puede elegir un modo debug para validar el tracking.

Modalidades de Google Analytics for Flash

Para ambas modalidades de trabajo, allowscriptaccess debe estar en always para que funcione el componente. Este parámetro activa el acceso de lectura a la página provista por la URL y a la información requerida por el código de analytics. Sin allowscriptaccess, el código pierde mucha de su funcionalidad, aún así nos proporciona datos de la actividad de los usuarios pero no podemos tener certeza de cubrir el modelo de atribución de campañas que maneja Google Analytics.

Modalidad Bridge

Esta modalidad es útil además de controlar el contenido Flash también controlas la página HTML. Es idela si es que ya implementaste el código de Google Analytics (ga.js) en tu sitio web y quieres agregar trackeo a partir del contenido Flash. Se simplifica mucho la comunicación de Flash a JavaScript con una sola interfaz unificada de ActionScript 3 al código de ga.js.

La conexión al código de Google Analytics Tracking puede ser configurada a partir del parámetro ID de dos maneras.

El Método más Común. El objeto Google Analytics Tracking ya existe en tu página con su propio nombre, como podría ser pageTracker. En este caso, solamente damos la referencia DOM completa del objeto para hacer tracking. Por ejemplo, si tu objeto se llama pageTracker, se hace la referencia a ese objeto en el código mediante window.pageTracker de la siguiente manera:

tracker = new GATracker( this, “window.pageTracker”, “Bridge”, false );

Método Alternativo. Si no has creado un objeto para hacerle tracking en tu página, simplemente puedes pasarle la propiedad ID, y un objeto de JavaScript para hacer tracking será creado de forma automática. Con este método, se requiere aun así una referencia al código base ga.js en la página de HTML. El siguiente bloque de código ilustra como tendría que configurarse en ActionScript 3:

tracker = new GATracker( this, “UA-12345-22″, “Bridge”, false );

Para que la modalidad de bridge funcione correctamente debemos dejar la propiedad ExternalInterface.available en true en nuestro código ActionScript. Esto también significa que allowScriptAccess debe de estar configurado en always en el HTML que incrusta el contenido Flash.

Modalidad AS3

Se utiliza esta modalidad si controlas el código ActionScript 3, pero no tienes control del ambiente que va a servir de host al contenido de la aplicación Flash. Por ejemplo, si estás desarrollando contenido Flash para distribuirlo en varios sitios web, ahí utilizaríamos la modalidad AS3. Esta modalidad es completamente independiente del código de tracking ga.js y contiene toda la funcionalidad necesaria. No hay necesidad de una instalación por separado de ga.js con esta modalidad. Adicionalmente, la modalidad AS3 utiliza un mecanismo de almacenamiento Flash para mantener información de la sesión del visitante.

Para ciertos parámetros DOM como language, el componente de AS3 intenta recuperar los valores del mismo navegador. Si lo valores no están presentes, el componente utilizará su valor equivalente desde Flash.

Notas:

  • Parte de este artículo se basa en el siguiente contenido con Creative Commons y en la documentación oficial con licencia OS.
  • En el Curso de ActionScript 3 se adquieren los conocimiento necesarios para dominar este tipo de herramientas.

También te puede interesar:

Tags: , , ,