Seguimiento de eventos en Google Analytics con Google Tag Manager 2

En un post publicado anteriormente ya presentamos y definimos los diferentes conceptos de la herramienta Google Tag Manager. Posteriormente, explicamos cómo incluir el código de página de Google Analytics dentro de la herramienta. En este caso vamos a indicar cómo realizar el seguimiento de eventos de Google Analytics a través de Google Tag Manager.

Para ello, volveremos a trabajar sobre la tienda de colecciones DIY Amaikit  de @Tamara y @Fanego (¡¡gracias de nuevo!!). Lo haremos paso por paso y a través de diferentes ejemplos ilustrados.

amaikit logo

Para que sea más sencillo, vamos a dividir el proceso en dos pasos diferentes. Por un lado explicaré cómo crear la regla dentro de Google Tag Manager que permita medir cualquier tipo de evento. Después nos centraremos más en el código que habrá que incluir a través de un ejemplo real (apoyado en un listerner, cuya función explicaré después), e incluso os dejaré algunos enlaces donde encontraréis información sobre las tecnologías necesarias para hacerlo (JavaScript, jQuery, etc).

1. Selección del evento a medir

El primer paso es, por supuesto, la selección del evento a medir. Un evento puede ser cualquier acción, desde introducir un valor erróneo a un campo del formulario a, por ejemplo, visualizar un banner específico.

Para este caso hemos escogido medir los clicks sobre el botón de añadir al carrito un producto. E incluso vamos a llegar un poco más lejos, y vamos a almacenar también el producto que se ha añadido. Así podremos crear un informe en Google Analytics que muestre qué productos son los que se añaden más veces al carrito de la compra.

sushi kit añadir al carrito

 

2. Creación del tag

Exactamente de la misma manera que para incluir el código genérico de Google Analytics, el primer paso a ejecutar será la creación de una nueva etiqueta.  Dicha etiqueta ya no será de tipo Google Analytics, sino que seleccionaremos Etiqueta HTML personalizada. Esto nos permitirá introducir cualquier tipo de código dentro del tag, que se ejecutará después en la carga de la página. La regla a escoger dependerá siempre de los requisitos que tenga la web y como esté constituida, pero normalmente podremos escoger la que está por defecto y que se ejecuta en todas las páginas.

tag google tag manager

¿Como se ejecuta este código del tag?

Cuando la página es cargada, se ejecuta todo el código que está en su interior. Parte de él es el código genérico de Google Tag Manager, que a su vez invoca el código de todas las etiquetas que tiene en el contenedor al que hace referencia. Por invocar entendemos inyectar dichos tags dentro del código de la página web.

3. Diseño del código

El código personalizado que vamos a incluir es código JavaScript mediante la utilización de la librería jQuery. Si no la tienes ya implementada en tu web, en este enlace se explica cómo incorporar la librería jQuery. Al final de este post compartiré algunos recursos con documentación para que podáis aprender a utilizar las múltiples opciones que permite dicha librería.

Lo primero que haremos será observar el código fuente de la página, y ver cuál es el código exacto que hace que el botón sea creado y pintado sobre la página. Como podemos observar en la imagen, se encuentra perfectamente estructurado e identificado dentro de una etiqueta div.

código añadir al carrito

Mediante una de la funciones de jQuery podremos crear un código que se tras ser ejecutado se quede a la espera de que un usuario haga click en el botón. Una vez que se ha producido este click, podremos entonces enviar a Google Analytics la información necesaria para construir el informe.

En la siguiente imagen podréis ver el código completo introducido, que explicaré a continuación:

código tag add to cart

Rodeado todo el código por las etiquetas <script>, que definen código JavaScript dentro del HTML, podemos ver que hay un función implementada. Vamos a desglosarla para ver para qué sirve cada elemento:

  • $(“div#purchase”) – Se utiliza para poder acceder al objeto cuyo div contiene como id (nombre) el valor purchase
  • children() – sirve para acceder al primer hijo del elemento, que en este caso se trata de la etiqueta <p>.
  • next() – avanza al siguiente elemento, para poder acceder al segudo hijo, que es el botón en sí (<input>)
  • click(function() – función que detecta que se ha realizado click sobre dicho elemento. Sólo si el resultado es positivo, se ejcutará el código incluido dentro de la función.

Existen métodos más directos para acceder al mismo botón con jQuery (por ejemplo input#add-to-cart), pero hemos aprovechado para utilizar más funciones y de esta forma también explicarlas.

Una vez que ya tenemos programado el listener que detecta el click sobre el botón, debemos diseñar el código que se debe enviar a Google Analytics para que almacene los datos de la forma que necesitamos. Como queremos enviar el nombre del producto que se ha añadido al carrito, debemos acceder a él para recuperar su valor.

product

 var product=$(“div#product-header-title”).text().trim();

  • $(“div#product-header-title”) – Accedemos al objeto donde está ubicado el nombre del producto, bajo el div con id product-header.title
  • text() – Extraemos el texto que contiene
  • trim() – limpiamos el texto quitando los espacios del inicio y del final de la cadena

_gaq.push([‘_trackEvent’, ‘Click boton’, ‘Add to cart’, product]);

  • Enviamos los datos mediante la función de envío de eventos de Google Analytics, indicando el producto asociado al evento

Ya está! Una vez activado el tag y publicada una nueva versión del contenedor ya tenemos la herramienta disponible para recoger los clicks sobre el botón y los productos asociados.

Google Analytics events report

 

Si tenéis algo que añadir no dudéis en dejarnos un comentario!

Recursos

JavaScript

jQuery

2 thoughts on “Seguimiento de eventos en Google Analytics con Google Tag Manager

  1. Comentar Antonio dic 4, 2013 14:13

    Buenos dias Nicolás,
    He estado mirando en otro blog tuyo el seguimiento de eventos desde Tag Manager, mediante etiqueta html personalizada usando Jquery.
    En el último paso, indicas que “se debe activar el check “Tracker Name” que encontrarás en la sección “Advanced Configuration” del Tag general de Google Analytics.” pero no encuentro dicha opción en ninguna parte. Me puedes indicar algo más? Donde está esa opción?

    Muchas gracias, Antonio

    • Comentar Elías Nuevo dic 22, 2013 08:00

      Hola Antonio,

      Cuando generas un tag de tipo Google Analytics, puedes hacer click en “more settings” y en “advanced configuration”. Ahí la primera opción te permitirá activar el “Tracker Name”, para que el código sea visible para el código de la página.

      Espero que sirva de ayuda.

      Un saludo,
      Elias

Escribir un comentario