Categorías
_trackEvent Configuración Avanzada configuracion de google analytics Event Tracking Eventos Google Tag Manager Herramientas jquery

Seguimiento de eventos con Google Tag Manager

https://m4p.es/seguimiento-de-eventos-con-google-tag-manager/ Seguimiento de eventos con Google Tag Manager 2013-08-01 07:15:06 admin Blog post _trackEvent Configuración Avanzada configuracion de google analytics Event Tracking Eventos Google Tag Manager Herramientas jquery bootstrap

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_kmq.push([«trackClickOnOutboundLink»,»link_56b1cf28b8cb5″,»Article link clicked»,{«Title»:»cu00f3mo funciona Google Tag Manager»,»Page»:»Seguimiento de eventos con Google Tag Manager»}]); y otro explicando 10 mitos sobre Google Tag Manager_kmq.push([«trackClickOnOutboundLink»,»link_56b1cf28b8d94″,»Article link clicked»,{«Title»:»10 mitos sobre Google Tag Manager»,»Page»:»Seguimiento de eventos con 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_kmq.push([«trackClickOnOutboundLink»,»link_56b1cf28b8e62″,»Article link clicked»,{«Title»:»JQuery»,»Page»:»Seguimiento de eventos con Google Tag Manager»}]);.

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>

  1. 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! ;)

Seguimiento de eventos con Google Tag Manager_kmq.push([«trackClickOnOutboundLink»,»link_56b1cf28b8f2f»,»Article link clicked»,{«Title»:»Seguimiento de eventos con Google Tag Manager»,»Page»:»Seguimiento de eventos con Google Tag Manager»}]); es un post de Trucos Google Analytics_kmq.push([«trackClickOnOutboundLink»,»link_56b1cf28b8ffc»,»Article link clicked»,{«Title»:»Trucos Google Analytics»,»Page»:»Seguimiento de eventos con Google Tag Manager»}]);.

The post Seguimiento de eventos con Google Tag Manager appeared first on Trucos Google Analytics.


Source: http://feeds.feedburner.com/TrucosGoogleAnalytics-Optimizer