Eventos con macros predefinidas en Google Tag Manager

En mi post anterior hable sobre cómo implementar el abandono de formularios con Google Tag Manager, en este post voy a seguir hablando sobre implementaciones con este increíble gestor de etiquetas y va dirigido a aquellas personas que están comenzando a implementar eventos en Google Tag Manager y no tienen conocimientos técnicos.  Sé lo que es y por esto quiero compartir este post con ustedes : )

Habrán leído el post de Justin Cutroni donde explica cómo utilizar los procesadores de eventos y las macros predefinidas para crear eventos. Las macros predefinidas que describe son:

  • url de elemento
  • Target elemento
  • Id elemento
  • Clases de elemento
  • Elemento
  • Texto del elemento (la incluyo porque ha sido añadida posteriormente en GTM)

Estás macros son muy útiles para diferenciar acciones del usuario. Por ejemplo, si queremos medir cuál es el enlace que más utilizan los usuarios para ver un mismo contenido cuando existe más de un enlace en la Home o si queremos saber cuál contenido de la sección de destacados ven más los usuarios u otras opciones que se quieran medir, se puede incluir en la regla del evento, en la acción y en la etiqueta de los eventos las macros predefinidas para hacer este tipo de mediciones.  ¿Cómo se hace esto?  Antes de explicarlo, voy a ir un paso más atrás para entenderlo mejor.

Las macros predefinidas que explica Cutroni, son atributos del elemento del HTML. No soy técnica, pero lo voy a explicar lo mejor que puedo con la web www.nomadatrek.com de viajes de senderismo y trekking que pertenece a nuestra MGG Paula Sánchez : )  …Las MGG no solo se dedican al marketing online ; )

Dentro de la web de Nomadatrek, podrás encontrar el siguiente código:

<td id=”oplink00″ class=”eltab_cont_over”>Destino</td>

En donde,

<td> es el elemento del HTML

id y class son los atributos del elemento del HTML

“oplink00″ es el valor del atributo id

“eltab_cont_over” es el valor del atributo class

Con lo cual, si unimos esta información con la de Cutroni, vemos que las macros predefinidas id elemento y clases de elemento son los atributos id y class que se encuentran en el elemento HTML que he puesto como ejemplo. Si quieres entender sobre código, te recomiendo que leas esta guía para no programadores de Optimez Smart (también conocido como Seo Takeaways) que publicamos en nuestra página de Facebook, a mi me ha ayudado a saber y entender cómo implementar Google Analytics (y me ayudo para darles la explicación anterior).

Ahora bien, ¿cómo haces para saber cuál es el código que tiene un botón o un enlace que quieras medir?  Bueno, pues es muy sencillo, existen herramientas en los navegadores que utilizan los desarrolladores para depurar, editar y monitorizar una web. En Chrome se puede utilizar el inspector de elementos (pulsando el botón derecho y eligiendo la opción Inspeccionar Elemento)  o en Firefox puedes instalarte Firebug que es un complemento de Firefox.

Yo trabajo con desarrolladores y hace unos años un compañero me enseño a utilizar Firebug, voy a explicar cómo funciona esta herramienta al tenerle más cariño ; )

Volvamos con Nomadatrek, en la Home de la web existe una sección de destacados con un carrusel de imágenes en la parte superior, con un total de 6 imágenes de destinos que al hacer click sobre ellas te llevan a la descripción del destino y lo que incluye el viaje, es la ficha de producto.

Estas imágenes van cambiando de forma aleatoria, por lo que para Paula es importante conocer cuáles destinos está viendo el usuario desde esta sección. Para ello, vamos a crear un evento en donde nos diga desde qué posición de la imagen del carrusel ha visto el destino y cuál destino ha visto el usuario.

Nomadatrek-Home

Para crear este evento vamos a utilizar las macros predefinidas, por lo tanto necesitamos saber qué atributos del HTML podemos utilizar de las imágenes del carrusel. Aquí es donde entra Firebug, una vez instalado el complemento en Firefox, abrimos Firebug desde el menú Herramientas del navegador, siguiendo la ruta: Herramientas>Desarrollador Web>Firebug>Abrir Firebug

Una vez se abre Firebug en la parte inferior del navegador, vamos a pulsar la flecha azul Flecha azul-Firebug que está justo al lado del “bicho” a la izquierda. Al seleccionar la flecha lo que haces es que por cada elemento de la web por el que pases, aparecerá en Firebug el código que contiene ese elemento, haz click sobre el elemento para que se quede el código fijo y no se vaya cambiando según mueves el ratón por la web. Como nos interesa saber los atributos del HTML para las macros predefinidas, tenemos que ver esta información dentro de la opción HTML de Firebug. Se vería de esta forma:

Carrusel-Nomadatrek

Como se ve en la imagen superior, en el carrusel la imagen del destino La Costa Licia en Turquía tiene en el elemento imagen (<img>) el atributo id con valor “idImg_2″ y el atributo src que especifica la URL de la imagen con valor “images/Costa_Licia_1_feat_19.jpg”

En este ejemplo, estos dos atributos los vamos a incluir en el evento, el atributo id nos dirá la posición de la imagen en el carrusel (idImg_1, idImg_2, idImg_3,…) y el atributo src nos dirá el destino que están viendo los usuarios desde la sección de destacados.

Vamos a crear el evento con macros predefinidas en Google Tag Manager!!!  En la Categoría del evento he incluido Destinos Carrusel para identificarlo, en la Acción he incluido la macro predefinida {{element id}} para que guarde la posición de la imagen del carrusel y en la Etiqueta he incluido la macro {{element url}} para que guarde la URL de la imagen. El {{element url}}, como indica Cutroni, guarda el atributo href, este atributo especifica la URL de la página a la que te lleva un enlace.  Como en el código de la imagen tenemos el atributo src que como he dicho antes es la URL de la imagen, el valor que nos guardará en la etiqueta del evento será: el dominio + la URL de la imagen (http://www.nomadatrek.com/images/Costa_Licia_1_feat_19.jpg).

Si quieres que se guarde la URL de la página a la que te lleva el enlace, lo mejor es que te ayude un técnico e incluyas una macro JavaScript Personalizada (gracias Estevao Medeiros por esta idea).

Evento-carrusel

También en la regla vamos a incluir macros predefinidas para delimitar cuando se debe disparar el evento.

Regla-evento-carrusel

Como ven en esta regla además del procesador de clicks (gtm.click), he incluido que la macro {{element id}} tenga como valor el id de las imágenes del carrusel (idImg_1, idImg_2,…) para que se dispare el evento. He incluido esta expresión regular (^idImg_1$|^idImg_2$|^idImg_3$|^idImg_4$|^idImg_5$|^idImg_6$) para que contemple todos los ids de las imágenes.

Y listo! Ahora a probar.  Antes de crear la versión del contenedor de Google Tag Manager y publicarla, recomiendo que pruebes antes si te funciona o no. Para esto, ve a la opción Vista Previa que está en la parte superior derecha, se te abrirá un lightbox donde verás la opción Depurar, pulsa en ella para que puedas ver en tu web si se dispara el evento o no. Abrimos la página y verás una ventana del Google Adminstrador de Etiquetas donde se ve si se dispara el evento. En el caso de este ejemplo, sí se dispara!!! Fíjate en el estado de la etiqueta Evento Destinos – Carrusel (nombre del evento) que dice “Activada en evento gtm.click”

Vista Previa-Nomadatreck

Y por último para saber si se guarda la acción y la etiqueta del evento como queremos en Google Analytics, vamos a la opción de Tiempo Real de la propiedad que estás probando para comprobarlo. Como ves, nos ha funcionado de maravilla!!! en la Acción nos guarda la posición de la imagen y en la Etiqueta nos guarda la URL de la imagen (dominio + URL de la imagen). Ahora ya puedes crear la versión y publicarla en Google Tag Manager.

Tiempo Real Evento II

Espero este post te sirva para tus próximas implementaciones. ¿Alguien quiere compartir cómo ha utilizado las macros predefinidas?, deja comentarios en el post y así todos aprendemos ; )

Viviana Contreras

Soy licenciada en Empresariales por el Colegio de Estudios Superiores de Administración (CESA) de Colombia. Tengo un Máster en Digital Business en ESIC y otro Máster en Analítica Web en Kschool. Trabajo como Digital Analytics Consultant en DBi – Havas Media Group.

Pienso que siempre debes luchar por lo que quieres y sigo día a día la frase de Wayne Gretzky “fallarás el 100% de las cosas que no intentes”.

Twitter LinkedIn 

4 Responses to Eventos con macros predefinidas en Google Tag Manager

  1. Agustín Suárez junio 16, 2014 at 11:17 am #

    Hola Viviana,

    es casi un orgasmo cada vez que leo un poco de GTM en español porque estoy convencido de que muy pronto se convertirá en un estándar en el proceso de análisis web. En las grandes empresas, los sistemas de administración de etiquetas ganan cada día nuevos adeptos. Según builtwith.com, el 10% de las top 10K empresas en Internet utilizan ya alguna de estas implementaciones, siendo GTM quien se lleva el 50% del volumen de mercado.

    En cuanto al seguimiento automático de eventos, permíteme complementar tu artículo con algunos hábitos que yo suelo emplear en bavaria.by:

    1. Simo Ahava ha armado una extensión para Google Chrome (GTM Sonar) que facilita la creación y el debug de eventos. Al final del comentario hay un enlace a un vídeo demostración de GTM Sonar, usando a la competencia como ejemplo :-). *offtopic* Paula, ¿Baviera la siguiente destinación, verdad?

    2. Con GTM Sonar podemos comprobar que los mismos se disparan de manera correcta. Se crea un entorno virtual muy chulo, porque al hacer click sobre alguna de las imágenes (como en tu ejemplo), se lanza el evento a la capa de datos y la acción no se realiza (no se abre la página de destino, por ejemplo)

    3. En este modo de debug tenemos a mano toda la información que el elemento clickeado genera (clase, id, alt, parentElements, chlidElements…) y que nos permite identificar rápidamente cuáles de estos elementos podemos utilizar para X o Y acción.

    4. Estoy seguro que sabes que GTM permite crear macros que expanden las funcionalidades estándares. element.url (http://www.nomadatrek.com/images/Trekking_Dolomitas_6_feat_23.jpg) mola, pero element.alt (Trekking por Dolomitas) mola aún más. Ambas variables son, sin embargo, susceptibles a dar una información incorrecta si el encargado de introducir nuevo contenido tiene un mal día. En cambio, podemos adquirir el valor de parentElement.innerText que es el que figura en blanco sobre fondo negro. Este contenido es mucho más visible para quien testea la web y, por lo tanto, existen menos posibilidades de que se esté mandando información que al final no identifique nada. Adicionalmente, para mi como analista, una cadena de texto me facilita mucho la vida en comparación con una URL.

    5. parentElement.innerText puede obtenerse creando una macro de javascript personalizado nueva, por ejemplo. Este valor puede usarse en las etiquetas de evento de la misma manera que se usan las macros por defecto (posiblemente GTM vaya implementando más y más de estas macros… recordemos que esto de element url, element id o element class es una cosa de poco más de 4 meses, si la memoria no me falla).

    6. De la misma manera, podemos crear otra macro de javascript personalizado que nos indique que parentElement recibió el click. Veo en la web que existen 2 carrousels. De esta manera podemos tener una sola etiqueta que capture el click en ambos pero distinga en cuál de ellos se llevó a cabo el click. La posición de la imagen, como tu bien dices, viene identificada en el element id. Yo optaría por extraer el valor numérico de esta ID y asignarlo al valor del evento, porque…

    7. … para rizar el rizo, se podría crear otra etiqueta que detecte un evento hover sobre las imágenes. Al quedar la acción del evento libre podemos incluso analizar qué imágenes han captado la atención del usuario pero a las que les ha faltado esa chispita necesaria que provoque el click.

    8. Pero lo mejor de GTM Sonar, sin duda alguna, es que puede ser utilizado en cualquier sitio web, incluso en aquellos donde GTM no se emplea (MGG, por ejemplo ;))

    Enlace al vídeo:
    http://screencast.com/t/TmIcmpOoF

    Posiblemente el video maree un poco, pero lo hice rápidamente desde un pequeño portatil antes de que empezara un meeting.

    Me reitero en mis palabras. El asado es lo importante, y eso es lo que se obtiene siguiendo tus pautas. A mi, simplemente, me gusta especiarlo un poco ;)

    Saludos,
    Agustín

  2. Vivicont junio 17, 2014 at 12:22 am #

    Gracias Agustín por completar el asado!!! ; ) De verdad que da gusto que compartas tu conocimiento y experiencia. Desde luego que se pueden hacer muchas implementaciones, muchísimas gracias por compartir!!! : )

  3. Cayetano Torres junio 20, 2014 at 7:45 pm #

    Genial Post Viviana!!! Deseando probarlo!!!

    Abrazos!!!

Trackbacks/Pingbacks

  1. Libera la bestia analítica con Google Tag Manager • Agustín Suárez - agosto 28, 2014

    […] Eventos con macros predefinidas en Google Tag Manager. Viviana Contreras. Ejemplo práctico de cómo utilizar las macros predefinidas de GTM para la medición de eventos de navegación. […]

Hecho con cariño desde Madrid por las Madrid Geek Girls.