Como crear eventos dinámicos con Google Tag Manager

Este post sería un resumen en formato texto, de un vídeo anterior realizado en YouTube

y está pensado como memoria para aquellos que quieren seguir todos los pasos de una creación de eventos dinámicos con Google Tag Manager. El nivel de este tutorial es intermedio. Así que cualquier duda pueden ver primero el vídeo explicativo Google Tag Manager en 30 minutos y luego este

 

Definición de evento

Vamos directo al grano, primero definimos que es un evento. Aquí tenemos una desde el RAE:

1. m. acaecimiento.

2. m. Eventualidad, hecho imprevisto, o que puede acaecer.

3. m. Suceso importante y programado, de índole social, académica, artística o deportiva. U. m. en Am.

4. m. Ling. Situación descrita por un predicado, ya sea estática o dinámica.

5. m. Ling. Predicado de naturaleza dinámica.

a cualquier, o a todo, evento

1. locs. advs. En previsión de todo lo que pueda suceder.

2. locs. advs. Sin reservas ni preocupaciones.

Me quedo con dos  y de hecho son previsiones, de lo que podría pasar en este caso aplicado a nuestro mundo, eventos o acciones de usuarios en nuestro sitios web, aplicaciones móviles.

Perfecto, con lo cuál serían interacciones, hitos o hits, como definirlo mejor en Google encontramos esto:

Información sobre los eventos

Utilice los eventos para recopilar datos sobre las interacciones con su contenido.

Los eventos son interacciones del usuario con cuyo contenido se puede realizar independientemente a partir de una página web o una carga de pantalla.

Las descargas, los clics en anuncios para móviles, los gadgets, los elementos Flash, los elementos insertados AJAX y las reproducciones de vídeo son todos ejemplos de acciones de las que puede realizar un seguimiento como eventos.

Con lo cuál tenemos un elenco de algunos ejemplos de eventos, como la descarga de elementos, o click en diferentes botones o imágenes por ejemplo. Aquí mencionar que deberíamos tener un sitio web con muchos botones para diferenciar uno y otro  clics en enlaces, sería ya suficiente para hacer una prueba. ¡Vamos con ello!

Anatomía de los eventos

Un evento tiene los  siguientes componentes, un hit de evento incluye un valor para cada componente y estos valores se muestran en sus informes.

• Categoría
• Acción
• Etiqueta (opcional, pero recomendado)
• Valor (opcional)

Por ejemplo, puede configurar un botón de reproducción de vídeo en su sitio para que envíe un hit de evento con los valores siguientes:

• Categoría: “Vídeos”
• Acción: “Reproducir”
• Etiqueta: “El primer cumpleaños del bebé”

Directamente desde Google Analytics, desde su propia guía, vamos a comentar que necesitamos unas series de elementos para poder crear eventos con Google Analytics, así que mejor decir que sin esta información, no podemos tener nada.

Categoría

Una categoría es un nombre que se debe proporcionar para agrupar los objetos de los cuales quiera realizar un seguimiento. Normalmente, utilizará el mismo nombre de categoría varias veces sobre los elementos relacionados de la interfaz de usuario que quiera agrupar en una determinada categoría.

Supongamos que también quiere realizar el seguimiento de las veces que se descarga el vídeo. Podría utilizar:

• Categoría: “Vídeos”
• Acción: “Descargados”
• Etiqueta: “Lo que el viento se llevó”

En este caso, solo habría una categoría (“Vídeos”) en sus informes y podría ver métricas agregadas para la interacción del usuario con el conjunto total de elementos para ese único objeto de vídeo.

Sin embargo, probablemente tenga más de un solo objeto del que desea realizar el seguimiento de eventos, por lo que merece la pena considerar cómo se van a clasificar los informes antes de implementar la invocación. Por ejemplo, tal vez prefiera hacer el seguimiento de todas las películas por separado en la misma categoría principal de vídeos de manera que obtenga números adicionales para cualquier interacción de vídeo, indistintamente del usuario con el que se interactúe.

Además, podría crear categorías separadas según el tipo de vídeo, una para vídeos de películas y otra para vídeos musicales. También podría tener una categoría aparte para las descargas de vídeo:

• Vídeos: películas
• Vídeos: música
• Descargas

En este escenario, se podría ver el recuento total de eventos combinados de las tres categorías en sus informes. La métrica _Total de eventos_ muestra todos los recuentos de eventos de todas las categorías indicadas en la implementación del seguimiento de eventos. Sin embargo, no podrá ver las métricas combinadas de todos los vídeos aparte de las descargas, porque las métricas de eventos detalladas se combinan en sus respectivas categorías.

Aunque el modelo de objeto de seguimiento de eventos es totalmente flexible, es conveniente prever primero la estructura de informes que se quiera tener, antes de decidir las categorías de nombres. Si tiene previsto utilizar el mismo nombre de categoría en varias ubicaciones, procure hacer referencia correctamente a la categoría que desee por su nombre. Por ejemplo, si tiene previsto denominar a su categoría de seguimiento de vídeos “Vídeo” y posteriormente lo olvida y utiliza el plural “Vídeos”, tendrá dos categorías para el seguimiento de vídeos. Además, si decide cambiar el nombre de categoría de un objeto del que ya se ha realizado el seguimiento con otro nombre, el historial de datos de la categoría original no se volverá a procesar, por lo que tendrá métricas del mismo elemento de página web incluidas en dos categorías en la interfaz de informes.

Acción

Por lo general, el parámetro de acción se usa para asignar un nombre al tipo de interacción o evento del que se quiere realizar el seguimiento para un objeto concreto del sitio web. Por ejemplo, con una única categoría “Vídeos” puede hacer el seguimiento de una serie de eventos específicos con este parámetro, como los siguientes:

• hora a la que termina la carga del vídeo,
• clics del botón “Reproducir”,
• clics del botón “Detener”,
• clics del botón “Pausa”.

Como en el caso de las categorías, el nombre que indique para una acción lo decide usted, pero tenga en cuenta dos características importantes del modo en que se utiliza una acción de evento en los informes:

• Todas las acciones aparecen de forma independiente de sus categorías principales. Esto ofrece otra manera útil de segmentar los datos de evento en los informes.
• Un evento único viene determinado por un nombre de acción único. Puede utilizar nombres de acción duplicados en distintas categorías, pero este hecho puede repercutir en el modo de calcular los eventos únicos. Consulte las sugerencias que se indican a continuación y la sección “Recuento implícito” para obtener más detalles.

Etiqueta

Las etiquetas permiten proporcionar información adicional para los eventos cuyo seguimiento desee realizar, como el título de la película en el caso de los ejemplos de vídeos anteriores, o el nombre de un archivo al realizar el seguimiento de las descargas.

• Categoría: “Descargas”
• Acción: “PDF”
• Etiqueta: “/salesForms/orderForm1.pdf”

Al igual que con las categorías y las acciones, hay un informe que muestra todas las etiquetas que haya creado. Imagínese las etiquetas como una manera de crear una dimensión adicional de los informes para la interacción del usuario con los objetos de la página. Por ejemplo, supongamos que dispone de cinco reproductores de vídeo en su página de cuyas interacciones desea realizar el seguimiento. Cada uno de estos reproductores puede utilizar la categoría “Vídeos” con la acción “Reproducir”, pero cada uno podría tener también una etiqueta aparte (como el nombre de la película) para que aparezcan como elementos diferenciados en el informe.

• Categoría: “Vídeos”, acción: “Reproducir”, etiqueta: “Lo que el viento se llevó”
• Categoría: “Vídeos”, acción: “Reproducir”, etiqueta: “Huckleberry Finn”

Como en el caso de las categorías, el nombre que indique para una etiqueta lo decide usted, pero tenga en cuenta dos características importantes del modo en que se utiliza una etiqueta de evento en los informes:

• Todas las etiquetas se enumeran de forma independiente a sus categorías principales y acciones. Esto ofrece otra manera útil de segmentar los datos de evento en los informes.
• Un evento único viene determinado por un nombre de etiqueta único. Puede utilizar nombres de etiquetas duplicados en distintas categorías, pero este hecho puede repercutir en el modo de calcular los eventos únicos. Consulte las sugerencias que se indican a continuación y la sección “Recuento implícito” para obtener más detalles.

###

Valor

El valor difiere de los otros componentes en que es un número entero en lugar de una secuencia, por lo que debe utilizarlo para asignar un valor numérico a un objeto de página de seguimiento. Por ejemplo, podría utilizarlo para proporcionar el tiempo en segundos que tarda en cargarse un reproductor o para activar un valor monetario cuando se alcance un determinado marcador de reproducción en un reproductor de vídeo.

Categoría: “Vídeos”, acción: “Tiempo de carga de vídeo”, etiqueta: “Lo que el viento se llevó”, valor: downloadTime

El valor se interpreta como un número, y el informe agrega los valores totales sobre la base del recuento de cada evento (consulte “Recuento implícito” a continuación). El informe también determina el valor medio para la categoría. En el ejemplo anterior, se invoca al evento para la acción “Tiempo de carga de vídeo” al concluir la carga del vídeo. El nombre del vídeo se proporciona como una etiqueta y se acumula el tiempo de carga calculado para cada descarga de vídeo. A continuación, se podría determinar el tiempo medio de carga para todas las acciones “Tiempo de carga de vídeo” de la categoría “Vídeos”. Supongamos que ha habido 5 descargas únicas de los vídeos de su sitio web con los tiempos de descarga en segundos que se indican a continuación:

• 10
• 25
• 8
• 5
• 5

Sus informes se calcularían del siguiente modo (los números del ejemplo muestran el tiempo de descarga en segundos):

• Sesiones con eventos: 5
• Valor: 53
• Valor medio: 10,6

No se admiten números enteros negativos.

Eventos en Google Analytics

Una vez explicado y definidos los elementos principales de los eventos, veamos un pantallazo de como se mostraría un evento en Google Analytics, que afecta toda la propiedad (y a todas las vistas o perfiles.

Desde nuestra interfaz vamos en: Comportamiento > Eventos

Aquí una muestra en Tiempo Real > Eventos

 

 

Crear eventos en Google Tag Manager

Y finalmente llegamos a crear los eventos con Google Tag Manager, tenemos una sección dedicada para poder crear los eventos directamente en la etiqueta de Google Analytics, así que sin ninguna dificultad veremos los mismos elementos arriba mencionados: Categoría, Acción, Etiqueta y Valor.

Veamos un ejemplo aqui:

 

y su explicación de los eventos en Google Tag Manager aquí:

https://support.google.com/tagmanager/answer/6106716?hl=es

¿Cuál es la diferencia entre los eventos de Google Analytics y Google Tag Manager?

Los eventos de Google Analytics son interacciones que se envían como resultado de las etiquetas de Analytics activadas desde Tag Manager. Los eventos del navegador de Tag Manager son interacciones de los usuarios con elementos de páginas web (elementos DOM) que registra el navegador y envía a la capa de datos de Tag Manager para que se puedan usar para configurar activadores.

Pues claro, verdad? La primera parte es la nos interesa ahora mismo, ya tendremos otro post explicando los grandes misterios del dataLayer, pero así como viene a ser este post tendríamos que utilizarlo también, sería la parte dinámica de nuestro Tag Manager, así que vamos por la creación de uno y del otro.

No iré explicando todo todo de Google Tag Manager, así asumo que ya conocen las variables, activadores y etiquetas. Asumo que ya conocen las diferentes variables existentes entre predefinidas y personalizadas, así como los activadores. En tal caso, os rimando a otras guías internas para realizar cada una de ella.

Eventos básicos: Clic en Enlaces Salientes

Para crear un evento básico con Google Tag Manager integrando la etiqueta de Google Analytics seguiremos estos pasos:

1. Elegimos y creamos la etiqueta de Google Analytics, del tipo Universal
2. Tipo de seguimiento elegimos la opción Evento
3. Entre los parámetros de seguimientos de eventos rellenamos la siguiente información:
   • CATEGORIA: ClickContactos
   • ACCIÓN: clic
   • ETIQUETA: {{Click URL}}
   • VALOR: – no marcamos nada –
4. Seleccionaríamos o bien la variable de configuración de Google Analytics (creada anteriormente en el caso de tenerla), o marcamos la opción de Habilitar la anulación de configuración de esta etiqueta y añadimos nuestra ID Propiedad de GA
5. Como activador seleccionaríamos: Todas las Páginas

¿Listos?

Si llegamos a leer esta linea significa que solamente tenemos dos opciones: o utilizar la Vista Previa y podemos probar antes de publicar nuestra versión creada, y para ello tenemos que ya tener un contenedor de Tag Manager implementado o bien utilizar el Tag Manager Injector para simular la creación del contenedor. No recuerdas como sería? Puedes echar un vistazo a este vídeo como hacerlo:

Como se mostraría en nuestra preview en Google Tag Manager sería así:

 

y en la interfaz de Tiempo Real en Google Analytics así:

img

Eventos dinámicos en Google Tag Manager

Te imaginas una etiqueta que recoge dinámicamente todos los valores según la tipología de clic, formulario o lo que sea y lo podría diferenciar si  el elemento tal y cuál?

Bueno vamos por partes, necesitamos primero definir la regla del dataLayer. 

En este caso la etiqueta personalizada de HTML con esta lineas de código:

<script><br />
var dataLayer = window.dataLayer || [];<br />
dataLayer.push({<br />
"event" : "linkContact",<br />
"eventCategory" : "", //puedes crear un nombre fácil de recordar para esto tipo de acciones, en este caso optaría para ClickContactLink<br />
"eventAction" : "", //puedes crear una tabla donde recoge los valores del protocolo y lo transforma en Acción, te acuerdas la variable<br />
"eventLabel" : "" //aquí también es sencillo, puedes recoger un dato multiple, el valor (email, telefono, whatasapp y la página vista, ejemplo<br />
});<br />
</script>

Para ejemplo sería así:

<br />
"eventCategory": "ClickEvent",<br />
"eventAction" : "{{Click Text}}",<br />
"eventLabel" : "{{Click URL}}"<br />

La primera linea de código nos valida el dataLayer como variable, si existe o está vacía, así que la confirmamos nuevamente, y con la acción push enviamos nueva información.

La segunda linea es generar un evento en este caso asignamos un valor para luego recuperarlo linkContact, en mi caso.

Las siguientes lineas asignamos los parámetros de eventos de GA, personalizados en su caso, y le asignamos los valores.

El Activador en este caso será nuestro click en url con protocolo: tel, mailto, whatsapp (son para eventos de llamadas), he realizado algo muy particular, puedes o bien seleccionar {{Click URL}} o bien crear una variable personalizada tipo URL > Protocolo > desde {{Click URL}}.

de otro lado prepararé para cada uno de los parámetros del dataLayer, unas variables personalizadas tipo dataLayer:

eventCategory

eventAction

eventLabel

 

Una vez tengamos las variables creadas, nos falta solo rellenar las informaciones dentro de nuestra etiqueta de Google Analytics que teníamos antes, y aplicamos las personalizaciones dinámicas, así:

Su activador será el evento personalizado linkContact que se lanzará desde el dataLayer anteriormente creado, con lo cuál solo en clic en enlaces de llamadas con unos determinados protocolos, nos dará este evento, así que la creación del activador será así:

Una vez tengamos todo, realizamos nuevamente una actualización del nuestro workspace y actualizamos el sitio web y lo que se mostrará será lo siguiente:

Esto es todo, una pequeña muestra de lo que podemos realizar con Google Tag Manager dinámicamente y con una buena dosis de planificación podemos inclusive crear funciones tipo if – else con variables personalizadas, un ejemplo? Del tipo acciones dentro de una página que en base a unos activadores particulares, y reglas o condiciones activaríamos unos eventos dinámicos.

Cualquier duda que tengan, pueden enviarme un mensaje y lo miramos, juntos , gracias y hasta el próximo post.