Cómo lanzar eventos con Google Tag Manager

Llega ese día en que decides migrar tu tracking de Google Analytics habitual para hacerlo a través de Google Tag Manager  (si todavía no lo habéis hecho por miedo no os preocupéis, es muy sencillo y si os hace falta Justin Cutroni os lo explica en este vídeo en YouTube).

Entonces, ¿qué pasa con todos aquellos eventos que estabais siguiendo antes con Google Analytics?

¡Pues no pasa nada! Tan solo hemos de buscar la manera de hacerlo nuevamente con Google Tag Manager. A continuación os dejo una manera sencilla (sin dataLayer de por medio) de cómo podemos lanzar algunos tipos de eventos e incluso uno dedicado especialmente a los usuarios de WordPress (cuya metodología y funcionamiento es replicable en otro tipo de situaciones).

– Tracking de enlaces salientes (outbounds links)

El primer evento que podemos crear es el de etiquetar todos los enlaces salientes. De esta manera podremos saber en qué enlaces externos se están haciendo clic. Además, hacer este tipo de tracking en muchas ocasiones nos proporcionará un cálculo del rebote más real si el que se haga clic en un enlace lo consideramos una interacción con nuestro sitio.

El procedimiento es el siguiente. Nos dirigimos en nuestra cuenta de GTM al mismo contendor donde tenemos nuestro código de Google Analytics y vamos a crear una nueva etiqueta.

Google-Tag-Manager

Esta etiqueta que crearemos será de tipo HTML personalizada y se deberá de activar en todas las páginas.

etiqueta-google-tag-manager

Código de la etiqueta:

– Tracking de enlaces con class

En ocasiones tan solo queremos poder marcar un cierto tipo de enlaces, por ejemplo aquellos enlaces que tienen una clase determinada, típico de botones o enlaces con estilos:

La gracia de Google Tag Manager es que te ahorra mucho trabajo si la web está bien hecha, de otro modo tener GTM para estar tocando código como cuando no lo teníamos no merecería la pena en según que casos. En el caso de que el HTML esté bien etiquetado con sus clases, ID, etc. migrarse a GTM sería una buena opción.

Así que si se da la casualidad de que a los maquetadores y programadores el día en que hicieron la web se les alinearon los astros y os dejaron un código bien estructurado y limpio (es broma, que suficiente trabajo tienen…),  etiquetas como la siguiente tendrían sentido, sino tendremos que meter las clases e ids a posteriori.

Como en el caso anterior crearemos una etiqueta HTML personalizada y agregaremos una regla para que se active en todas las páginas del siguiente modo:

tracking-class-event-GTM

Código de la etiqueta:

(sustituir “miclase” por la clase que queráis seguir) 

– Tracking de comentarios en WordPress

Cuando se trata de un WordPress tenemos la suerte de que el HTML está muy bien estructurado (por lo general) y podemos trabajar con GTM la mayoría de las veces sin prácticamente meternos en el código. En el caso de que queramos seguir desde Google Analytics cuando alguien nos comenta en el blog, la solución es muy sencilla.

Lo que haremos primero será detectar el id del formulario que queremos seguir a través del código fuente de nuestra página. En este caso se trata del formulario de comentarios de WordPress y siempre está bajo el mismo id (commentform).

wordpress-commentform-tag-manager

Luego en la etiqueta mediante jquery miramos cuándo se produce el envío de ese formulario con el submit y en ese caso lanzamos el evento. A través de la siguiente etiqueta HTML personalizada en GTM estaríamos enviando un evento cuando un usuario comenta (podéis aplicar la regla de activación a todas las páginas o tan solo en aquellas que exitan comentarios):

evento-comentarios-wordpress

 

Código de la etiqueta:

Incluso si quisiéramos recoger el título del post cuando se lanza el evento, podríamos hacerlo mediante el <h1> del artículo e introducirlo el label del evento de la siguiente forma.

Algunos consejos de uso de Google Tag Manager

  • Siempre que creéis una etiqueta primero tenemos que crear una versión nueva (a modo backup) y esta funcionalidad no estará disponible hasta que guardemos y publiquemos esa versión.
  • Antes de publicarla podemos revisar el comportamiento de la implementación con el modo vista previa y depuración de GTM.
  • Para revisar la implementación aconsejo además apoyarse en alertas de javascript y el uso de plugins como WASP o Firebug.
  • En el caso del uso de funciones de jQuery como las que he mostrado para recoger las acciones, se debe de tener importada la librería de jQuery en nuestra web (la mayoría de WordPress ya vienen con ella por defecto).

Autor:

Consultor SEO y Analista Web en la Consultora de Analítica y Optimización Web Metriplica. Es Ingeniero Técnico en Informática de Sistemas y cuenta con un máster en Marketing Online y Comercio Electrónico y un Posgrado en Analítica Web. Además es profesor de másters y posgrados en las escuelas de negocio ESIC, EAE, idEC (Pompeu Fabra) y ESDEN entre otras. Puedes leer más artículos suyos en su blog Analista SEO y Web.

12 Comments

  1. Nikalytics

    Hola Natzir,

    buen post! conveniente añadir el setTimeout en los eventos porque si no, puede ser que no se disparen 😉

  2. Muy buena aportación Mónica!
    Estuve haciendo pruebas con los timeouts y tampoco había mucha diferencia por eso. Pero según la velocidad de la web, es recomendable ponerlos.

    Saludos y gracias por pasarte y comentar 🙂

  3. Fernando

    Creo que no es la forma ideal de montarlo, deberías utilizar el Data Layer…

  4. Buenas Fernando! sí que los publicamos pero somos muy perros y los miramos de vez en cuando :p

    En cuanto a tu buena sugerencia, sería otra manera de hacerlo. En el post comento que esto es como se haría sin necesidad de data layer y macros 🙂

  5. Jose

    Seria genial si pusieras un ejemplo de cómo seria un ‘Tracking de enlaces con class’ usando datalayer y macros, ya que por lo que leo sería la mejor forma de hacerlo. He buscando información en Google y está muy enrevesada. Tu forma de explicar las cosas está muy clara. Excelente trabajo!!
    Gracias.

  6. Hola Natzir,

    Excelente Post!! de los mejores que he visto sobre este tema. Tengo una pregunta al parecer mis eventos se disparan según ga debugger pero por alguna razón no me estan apareciendo en google analytics sera que me hace falta algo?

    Saludos,

  7. jose

    A mi tampoco me aparecen los eventos de analytics.
    He leido que igual es necesario utilizar setTimeout
    ¿cómo agrego esta instrucción a los códigos html que has escrito en tu post?
    gracias

  8. Dariane

    Hola, gracias por tu articulo. Tengo una duda, la impresión que me dejo GTM es de implementar el código una sola vez y después crear todas las etiquetas de evento ya dentro del GTM sin la necesidad de estar solicitando a los de TI que implemente los trackEvent. Se si como haría la configuración de los Goals dentro de google analytics. Por ejemplo, tengo un botón de envio del formulario de registro, sin tener el TrackEvent como puedo configurar esa etiqueta y configurar las conversiones dentro de analytics personalizadas.

    Muchas gracias

  9. Ana

    Hola. En los ejemplos que pones de etiquetas html personalizadas no dices como enviar la información a google analytics

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.