Seguimiento de eventos con Google Tag Manager

Publicado en Configuración Avanzada, Configuración de Google Analytics, Herramientas el 01 de agosto de 2013 por .

Si eres de los que visita regularmente este blog, habrás notado que tenemos activa una encuesta en la que os preguntamos ¿Qué crees que deberíamos escribir próximamente?

Encuesta con Qualaroo

Como somos unos defensores de la toma de decisiones basadas en datos, he optado por aprovechar los resultados de la encuesta para decidir sobre qué escribir el siguiente post.

Fin del mundo

Literatura sana

No, la verdad es que no me veo con fuerzas para escribir sobre el fin del mundo ni tampoco en condiciones de hablar sobre “literatura sana” :), así que me he quedado con una de las respuestas que más se ha repetido a lo largo de los últimos meses: Seguimiento de Eventos con Google Tag Manager.

Google Tag Manager

Google Tag Manager

Google Tag Manager

Google Tag Manager

Google Tag Manager

La previa

A finales del año pasado, publicamos en este mismo blog un artículo sobre cómo funciona Google Tag Manager y otro explicando 10 mitos sobre Google Tag Manager. Si no estás muy familiarizado con GTM, te recomiendo que les vuelvas a echar un vistazo a esos artículos para que puedas recordar los primeros pasos en la herramienta y continuar leyendo este post con un poco más de contexto.

Pues bien, ya con todos los deberes hechos, vamos a explicar paso a paso cómo realizar el seguimiento de eventos mediante el uso de Google Tag Manager.

Ejemplo 1: Suscripción vía e-mail

Lo primero que debemos hacer es determinar cuáles son los eventos que vamos a enviar a Google Analytics. En este caso, para simplificar al máximo el ejemplo, vamos a empezar con un evento que servirá para contabilizar las suscripciones a través del email.

1. Configuración de Google Tag Manager

El primer paso será configurar todo lo necesario dentro de la herramienta, así que empezaremos creando un nuevo tag:

  • Tag Name: Newsletter
  • Tag Type: Google Analytics

Google Tag Manager

Una vez elegido el tipo de tag que vamos a utilizar, le indicaremos a Google Tag Manager que lo que vamos a medir es un evento y le asignaremos los valores a los campos categoría y acción.

  • Track Type: Event
  • Category: Newsletter
  • Action: Nueva suscripcion

Google Tag Manager

Lo último que tendremos que configurar será la regla que deberá cumplirse para que Google Tag Manager ejecute el envío del evento.

  • Rule Name: Newsletter OK
  • Conditions: {{event}} equals newsletterOK

Google Tag Manager

2. Inclusión del Data Layer

A grandes rasgos, un Data Layer es un objeto que nos permite definir la información que vamos a enviar a Google Tag Manager.

Continuando con el ejemplo anterior y tras haber finalizado el paso 1, sólo nos quedaría pendiente añadir el Data Layer, que en nuestro caso será de tipo evento y deberá informar el valor que hemos configurado previamente en la herramienta.

Por lo tanto, añadiremos el siguiente fragmento de código en el evento “onclick” del enlace de suscripción vía e-mail:

<a href=”[URL-Destino]” onclick=”dataLayer.push({‘event’: ‘newsletterOK’});” >Suscribirse vía e-mail</a>

De este modo ya tendríamos todo listo para empezar a almacenar en un evento cada una de las suscripciones.

 Ejemplo 2: Descarga de documentos

Si quisiéramos medir también la descarga de documentos a través de eventos y utilizando Google Tag Manager, podríamos hacerlo siguiendo los mismos pasos anteriores y añadiendo un pequeño cambio a la hora de incluir el Data Layer en el enlace de descarga:

<a href=”[URL-Fichero-PDF]” onclick=”dataLayer.push({‘fichero’:‘nombreFichero’, ‘event’: ‘descarga’});” >Descargar PDF</a>

En este caso, además del valor “event” que utilizaremos para configurar la regla que lanzará el evento, hemos incluido la variable “fichero” para informar el nombre del fichero que el usuario se ha descargado en la etiqueta del evento (campo “label”).

A continuación, tendríamos que configurar lo siguiente dentro del Tag Manager:

  1. Un nuevo Tag de Google Analytics para medir eventos
  2. Una regla asociada al evento “descarga” para determinar cuándo debe lanzarse el tag que acabamos de crear: {{event}} equals descarga
  3. Una macro para almacenar el valor de “fichero”

Google Tag Manager

4. Finalmente, crear el evento de la siguiente forma:

 
Google Tag Manager

Otra alternativa: Envío de eventos con JQuery

Tenemos otra opción a la hora de llevar a cabo el seguimiento de eventos mediante Google Tag Manager: Crear una etiqueta personalizada y controlar el envío de eventos a través de JQuery.

En algunos casos, esta alternativa “a la antigua usanza” podría resultar más cómoda y es por eso que no quiero dejar de comentarla en este post.

Los pasos para enviar eventos con este mecanismo serían los siguientes:

  1. Crear un nuevo Tag de tipo Etiqueta HTML personalizada (Custom HTML Tag)
  2. Incluir en el Tag un script que se encargue de lanzar un evento cada vez que el usuario se descargue un documento con extensión PDF:

<script type=”text/javascript”>

$(function(){

     $(“a[href$='.pdf']“).click(function(){

           var file = $(this).attr(‘href’);

           _gaq.push(['_trackEvent', 'Descarga JQuery', 'PDF', file]);

     });

});

</script>

3. Definir la regla que determinará cuando incluir este nuevo Tag. En mi caso, le pondré la regla “Todas las páginas” (All pages).

Importante: 

  • Para poder utilizar este script debes incluir la librería JQuery en el sitio web. Si quieres asegurarte de que exista, la puedes añadir dentro del propio tag:

Google Tag Manager

 

  • También debes activar el check “Tracker Name” que encontrarás en la sección “Advanced Configuration” del Tag general de Google Analytics. Esto permitirá que el tracker de GA sea visible y/o accesible desde otros scripts.

Google Tag Manager

Tras crear una versión, publicar los cambios y hacer unos cuantos clicks en los enlaces, esto es lo que nos aparecerá reflejado en el informe de Eventos disponible en Real Time:

Google Analytics - Eventos en Real Time

Para terminar, espero que este post os haya resultado útil y os animo a que sigáis utilizando la encuesta para contarnos sobre qué temas os gustaría que publiquemos los próximos artículos. Estaremos atentos! ;)

Etiquetas: , , , ,

Sobre Nicolás D'Angelo

Ingeniero Técnico Informático de Sistemas por la Universidad de Oviedo, certificado en Google Analytics y con amplia experiencia en la implantación de sistemas de medición como Adobe SiteCatalyst y Webtrends Analytics.

Me encanta la música, jugar al fútbol y disfrutar de los paseos con mi perra.

Puedes encontrar a Nicolás en:

LinkedIn Blog


10 Comentarios en Seguimiento de eventos con Google Tag Manager

  1. estravagancia

    muchas gracias por la explicación :)

  2. Muebles para la Oficina

    excelente gracias por compartir

  3. jose

    No lo entiendo. Lo sigo al pie de la letra y no hay forma que aparezcan los eventos en analytics.

  4. Vicente

    Hola Nicolás,
    Genial la explicación, me ha aclarado muchas cosas.
    Ya se que ha pasado un tiempo desde que lo escribiste, no se si podrás aclararme una duda.
    ¿Sería posible utilizar la información de las macros dentro de una etiqueta html personalizada?
    Es decir, quitaríamos esto:
    var file = $(this).attr(‘href’);
    Y pondríamos:
    _gaq.push(‘_trackEvent’,’Descarga Jquery’,’PDF’,{{Nombre Fichero}});

    Entiendo que en este caso no es mucha ventaja, pero en otros casos que puedes recoger datos con Macros podría ser muy útil.

  5. daniel

    Excelente post, estoy aprendiendo google analytics con google tag manager y realmente me sirvió bastante. Muchas gracias!!

  6. EmerJa

    Hola!! Yo he empezado a usar GTM hace poco y estoy aún investigando mucho sobre como crear eventos. He visto que al publicarlos y darle vista previa y depurar, tengo dos de los que he creado activados, y veo que una de las etiquetas no. De todos modos, de los activados, no sé donde tengo de buscarlos en mi Google analytics para ver que resultados hay. Cómo vemos leugo las estadísticas que generan estos tags creados?

    gracias

  7. djcaye

    Buenas EmerJa

    Ante tu duda, tienes que ver los eventos dentro de google analytics, en la sección Comportamiento > Eventos

    Un saludo.

  8. social networking service

    Additionally forget regarding individuals 3 thousands of family and friends from all over society
    you have not and can did not satisfy in person. Oh yes, we also repeat this
    – if you should be yet interested in google
    selling, perhaps we respect any choice and/or help you inside using some
    sort of maximum. The following is just how to avoid our plus
    perfectly backlink contacts in Android contacts checklist.

  9. jasa seo

    Thanks , I’ve just been searching for information approximately this topic for a while and yours is the greatest
    I’ve found out so far. However, what in regards to the bottom line?
    Are you sure in regards to the source?

  10. jasa seo

    I blog often and I really appreciate your
    content. The article has really peaked my interest.

    I am going to bookmark your site and keep checking for new information about once a week.
    I subscribed to your RSS feed as well.

3 Trackbacks For This Post

  1. Seguimiento de eventos con Google Tags Manager - Francisco J. Márquez Says:

    [...] http://trucosgoogleanalytics.com/seguimiento-de-eventos-con-google-tag-manager-3038/ [...]

  2. Imprescindibles AB 90 | AB Internet Says:

    [...] de las publicaciones. Por último, profundizamos en un tema de analítica y supimos como hacer un seguimiento de eventos con Google Tag Manager, con varios ejemplos y varias [...]

  3. Enlaces de la semana | Bianka Hajdu Says:

    [...] Seguimiento de Eventos con Google Tag Manager Para mí el el mejor tutorial para la configuración del seguimiento de eventos en GTM. [...]

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>