Sugerencia rápida cómo utilizar Google Analytics para el seguimiento en Flash

En este Consejo rápido, le mostraré cómo examinar la forma en que los visitantes utilizan sus sitios web, widgets y juegos. Luego veremos cómo mejorarlos en base a esta información.!


Introducción

Construir sitios web de aspecto agradable es genial; la construcción de sitios web que tienen un alto retorno de la inversión no tiene precio.

Recientemente, me uní al equipo web de una agencia de comunicación con sede en Bruselas, un equipo con conocimiento experto en los campos del diseño de experiencia del usuario, estrategias de contenido, desarrollo de software y diseño de interacción. Pasamos mucho tiempo en wireframes, guiones gráficos y prototipos, lo que garantiza que la funcionalidad y el contenido de los sitios web sean óptimos antes alguna El diseño gráfico tiene lugar. Esto significa que nuestros sitios web tienen una base sólida sobre la que se puede construir, lo que se traduce en un mayor retorno de la inversión con menos tiempo dedicado al desarrollo.

Una gran parte de nuestro trabajo está bajo el capó: Google Analytics en Flash.

Esta herramienta nos permite medir qué tan bien se están desempeñando nuestros sitios en comparación con nuestros objetivos predefinidos: tasa de rebote, rutas de clics e incluso mediciones personalizadas, como la cantidad de personas que se desplazaron por una determinada página. Nuestros especialistas analizan toda esta información y la utilizan para optimizar el sitio web. Si no está midiendo cómo las personas están usando su sitio, solo puede adivinar sobre sus éxitos y fracasos.

La siguiente configuración es una versión reducida de una galería de imágenes; Google Analytics permitió al cliente descubrir qué imágenes generaron el mayor interés. He omitido el edificio de la galería real, ya que está fuera del alcance de este tutorial; Aunque ya hay muchos en Activetuts +, solo busca "galería".

Nos centraremos en cómo configurar Google Analytics para poner una sonrisa en las caras de sus clientes (y probablemente también la suya ...)


Google Analytics en Acción

Aquí está la galería de imágenes simplificada:

Como puede ver, cuando se hace clic en una imagen, su identidad se envía a mi cuenta de Google Analytics. Más adelante, puedo ver todas las estadísticas de las imágenes en las que se hizo clic, en qué momentos, en qué países, etc..

(Por supuesto, ¡eliminará toda esa información superpuesta cuando esté en vivo en su propio sitio!)


Paso 1: Entender los beneficios

Imagínese horas de trabajo, semanas, incluso meses en un sitio web. Usted entregó exitosamente los archivos antes de la fecha límite, pero unos meses después está claro que, a pesar de ser hermoso, el sitio no está atrayendo a tantos clientes como su cliente esperaba. Google Analytics le ayuda a revisar los hábitos de navegación de los visitantes y descubrir qué partes del sitio podrían destacarse mejor. La belleza es excelente, pero creo que el retorno de la inversión debe ser su principal prioridad..

En otro caso, esta misma herramienta lo ayuda a comprender qué área de su sitio web tiene la mayor cantidad de visitas a la página, cuántas veces los visitantes quisieron comunicarse con usted o qué elementos de su cartera les encantan más. ¿En cuántos beneficios puedes pensar para tu sitio??


Paso 2: configurar una cuenta de Google Analytics

Si aún no tiene una cuenta de Google, regístrese para obtener una aquí; solo toma unos segundos..

Una vez hecho esto, vaya a http://google.com/analytics y regístrese para obtener una cuenta de Analytics. Allí puede dar un nombre de cuenta para los sitios web que desea rastrear.


Paso 3: Dentro de la Máquina

Diríjase a https://google.com/accounts/ManageAccount
y usa tus habilidades con el ratón para hacer clic en Analytics.

Genial, ahora estamos en la página de Resumen. Debería ver su nombre de cuenta de Analytics; Haz clic en él y te encontrarás en los perfiles del sitio web..

Si no ha configurado un sitio web para realizar un seguimiento, simplemente haga clic en 'Agregar perfil de sitio web'. Ingrese su nombre de dominio y país, luego haga clic en Finalizar.


Paso 4: Recupere su código UA y el estado de seguimiento

La página de estado de seguimiento aparecerá automáticamente:

La parte más importante es su ID de propiedad web. Este es un número único que Google Analytics utilizará para enviar y almacenar el tráfico de su sitio web. (Copie este código UA para usarlo más adelante en Flash, o escríbalo). Para esta introducción, simplemente mantendremos todas las opciones a sus valores predeterminados.

Si va a insertar su SWF en su propia página web, el código javascript debe pegarse justo antes de etiqueta en el HTML de la página. Esto le permitirá mantener las estadísticas de la página real, así como dentro del SWF. Vale la pena insertar este código en cada página de su sitio..

Todo esto es genial, pero aún no podrá identificar la interacción de sus visitantes con gran detalle, ya que el HTML es ciego para su contenido SWF / Flash real.


Paso 5: Recolección de madera

Para asegurarse de que puede ver qué partes de su SWF se están utilizando, vaya a http://code.google.com/p/gaforflash/.

Esta asombrosa API AS3 de código abierto tiene muchas características excelentes para integrar GA en Flash, pero incluso con nuestros sitios web más grandes y complejos, solo hemos usado dos funciones. (Más sobre esto más adelante). Asegúrese de descargar la última entrega a la derecha de la página. (Regrese en cualquier momento para leer el wiki, problemas, etc., para obtener más información sobre esta vasta API).


Paso 6: Instalar los componentes

El zip contiene una carpeta de documentación con todo el diseño de la API para ayudarte en el camino; una carpeta de biblioteca (lib) donde encontrarás los dos componentes; y algunos archivos de texto que probablemente nunca leerás. Al menos no lo hice;]

Para instalar los componentes, asegúrese de que Flash esté cerrado, luego navegue hasta:

  • Usuarios de Windows: C: \ Archivos de programa \ Adobe \ Adobe Flash CS X \ idioma \ Configuración \ Componentes
  • Usuarios de Mac: Macintosh HD / Aplicaciones / Adobe Flash CS X / Configuración / Componentes

En este punto, debe crear un directorio llamado 'Google' y copiar los archivos de la carpeta \ lib \ en el archivo zip a este.

Básicamente, los dos componentes le brindan la misma funcionalidad pero están desarrollados para dos propósitos diferentes. El componente Analytics es para aquellos que no están familiarizados con AS3. Supongo que la mayoría de ustedes ya está utilizando AS3, así que usaremos el componente AnalyticsLibrary.


Paso 7: Alimentando el Fuego

Dentro de Flash, abra la FLA para el proyecto en el que está trabajando, haga clic en Ventana> Componentes, y arrastre el componente AnalyticsLibrary a su biblioteca.


Paso 8: ¡Acción! (Guión)

Ya sea que esté codificando en la línea de tiempo o utilizando una clase de documento, deberá realizar algunas importaciones:

 // importar las clases de Analytics import com.google.analytics.AnalyticsTracker; importar com.google.analytics.GATracker;

Además, en su código, cree una nueva instancia de AnalyticsTracker:

 var tracker: AnalyticsTracker = nuevo GATracker (este, "UA-XXXXXX", "AS3", verdadero);

Los parámetros son: etapa, código UA, modo actionscript 3, activación / desactivación del depurador visual. Déjalos a todos como los he establecido, aparte del código de UA que deberás intercambiar por el tuyo. Establezca el último parámetro en falso Cuando haya terminado con sus fases de prueba, como cuando cierto creará una superposición encima de su archivo SWF como en el ejemplo anterior.

Pruebe esto agregando un detector de eventos Click y un controlador a uno de sus clips de película o botones:

 myMc.addEventListener (MouseEvent.CLICK, onClick);
 function onClick (event: MouseEvent): void // haga felices a sus clientes. // use 'event.target.name' en lugar de 'event.target' // esto mostrará 'myMc' en lugar de [object myMc], que obviamente es una salida más agradable. var mySelection: String = event.target.name; tracker.trackPageview ("gallery =" + mySelection); 

Aquí estamos usando el trackPageView () función. Utilice esto para fines de navegación. Puede agregar una cadena para que su cliente sepa qué parte está siendo rastreada. En este caso estamos rastreando qué galería ha sido activada. Así que copie y pegue este código en cualquier lugar donde desee realizar un seguimiento de sus interacciones y brindar una cadena comprensible a los datos..

Por ejemplo, si tiene un botón de "llamada a la acción" en el escenario para atraer a nuevos clientes potenciales, podría escribir:

 tracker.trackPageview ("Contrátame");

... en el controlador de eventos Click para ese botón. O si desea realizar un seguimiento de cuántas veces han leído su exención de responsabilidad:

 tracker.trackPageview ("Descargo de responsabilidad");

Estoy seguro de que entiendes la idea.


Paso 9: Seguimiento de eventos

Use el seguimiento de eventos si desea rastrear qué video o evento de MP3 se está reproduciendo, o cuando el usuario lo detiene, cosas así. Es básicamente para cualquier acción que no represente abrir una "página"..

El código se ve así:

 trackEvent (categoría, acción, etiqueta);

Por ejemplo:

 tracker.trackEvent ("videos de perfil", "play", "primer video: introducción");

Adicionalmente puedes agregar un cuarto parámetro. Esto puede representar cualquier valor que desee, pero debe ser un número entero (número entero). Por ejemplo, es posible que desee determinar la hora exacta en que se pausó el video.

Esto es genial para ver qué tan bien funciona su transmisión o descarga para sus visitantes (no todos tienen conexiones de Internet de primera clase):

 var currentTime: Date = new Date (). time; // obtener la hora actual // cargar el video aquí var readyToRoll: Date = new Date (). time - currentTime; // obtener el tiempo necesario para cargar el video tracker.trackEvent ("videos de perfil", "reproducir el video", "video 1/3: introducción", readyToRoll);

Paso 10: ver los datos en Google Analytics

Vaya a http://google.com/analytics/settings/ y haga clic en el nombre de su cuenta. Junto a su nombre de dominio, haga clic en Ver informe.

Aquí podrás ver una línea de tiempo. (Tenga en cuenta que, dependiendo del tiempo de respuesta de su servidor, puede tomar un tiempo antes de que se almacenen los datos, pero no debería tomar mucho tiempo).

Localice el resumen de contenido; Aquí puedes ver qué eventos o botones fueron activados:

Como puedes ver, como expliqué unos pasos atrás., event.target.name muestra un nombre "bonito" como "/ gallery = gallery 1", mientras event.target devuelve algo así como "[picture1 objeto]"

Al hacer clic en uno de estos enlaces, por ejemplo, "/ gallery = gallery2", podrá ver información detallada, como la resolución de pantalla que tienen los usuarios, cuando elige una opción en el menú desplegable..

Hay una fuente de información rica y profunda en casi todas las ramas del módulo de Google Analytics. Es casi imposible enumerarlos todos. No tengas miedo mire a su alrededor y vea qué datos puede proporcionar a sus clientes y a usted mismo.


Paso 11: elimínate de las estadísticas con los filtros

Es una buena idea filtrar tu propio comportamiento; de lo contrario, le dará datos incorrectos ya que probablemente probará esto con gran detalle.

Puede hacer esto filtrando toda la actividad que proviene de su dirección IP. Sin embargo, tenga en cuenta que esto solo funcionará si tiene una dirección IP estática. Hay mucha documentación en los archivos de ayuda; No puedo cubrir todo aquí. Visite http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55481

Los filtros también pueden ser útiles por otras razones. Aquí hay más información: http://www.google.com/support/googleanalytics/bin/topic.py?hl=es&topic=11091


Paso 12: El final es el principio ...

En este Consejo rápido, solo he cubierto un copo de nieve en la punta del iceberg de lo que puedes hacer con esta API increíble. Es un resumen rápido de las dos funciones más beneficiosas con las que trabajamos para mejorar nuestros sitios web y satisfacer los deseos de nuestros clientes.

También puede establecer objetivos predefinidos, agrupar usuarios que (por ejemplo) usan monitores de pantalla panorámica, basar sus análisis en palabras clave del motor de búsqueda y así sucesivamente. Para sus clientes, puede enviar un correo electrónico con informes diarios, semanales o mensuales (como xml, PDF u otros formatos), o incluso darles acceso a su página de Analytics. Si desea más información, por favor pregunte en los comentarios.!


Mis opiniones sobre los sitios web de Flash compatibles con los motores de búsqueda

Aunque es beneficioso leer y rastrear las interacciones de sus visitantes, esto está muy lejos de usar Flash en un mundo amigable con SEO. Lo he preparado para un diseño óptimo del sitio web y para centrarme en el retorno de la inversión, pero todavía no hemos llegado a ese punto..

Un buen paso siguiente sería mirar el marco de Gaia y usar su poderosa configuración para trabajar con swfaddress y deeplinking. Esto le permitirá realizar un seguimiento de las páginas individuales de su proyecto de sitio web y, en combinación con su nueva magia de Google Analytics, estoy seguro de que no solo sus clientes sonreirán.

Nota del editor: Tenemos algunos tutoriales de Gaia en línea, no te preocupes;)

He estado trabajando durante más de 10 años en el mundo del diseño gráfico, y nunca tuve tanto poder para saber exactamente lo que quieren mis clientes y visitantes. A menudo me gusta llamarlo "marketing e investigación gratis desde tu escritorio". (Si se pregunta por qué mi propio sitio no utiliza esta tecnología, honestamente ... espero volver a lanzar a mediados de 2010 * sorbos café *)

Espero que esto te abra nuevas puertas y aumente tu conjunto de habilidades. Buena suerte y diviertete!