Google Tag Manager: qué es y cómo configurarlo para exprimir tus estadísticas

Google Tag Manager es una herramienta gratuita de Google que nació con el objetivo de hacer más fácil la instalación y gestión de distintos tipos de etiquetas en nuestras páginas web desde un solo sitio.

De esta forma, instalando únicamente la etiqueta de Google Tag Manager en nuestra web tendremos la opción de pegar un montón de etiquetas distintas a través de GTM, tales como las etiquetas más típicas (Adwords, Analytics, Crazyegg o comScore) y una infinidad de posibilidades más.

Si bien su configuración inicial puede resultar muy compleja, si se hace correctamente permite automatizar las estadísticas de cualquier elemento de una web, y eso es fundamental para proyectos que a la larga acaban siendo muy grandes.

En esta primera guía te explicamos cómo instalar y configurar las funcionalidades de Tag Manager para que empieces a trastear con tus webs.

Instalación de Google Tag Manager

Vamos a ver en primer lugar cómo enviar datos a Google Analytics desde Tag Manager.

Primero, acceder a la herramienta desde aquí.

Si no la has usado nunca, te aparecerá una pantalla como la siguiente.

En este paso crearás una cuenta y configurarás el nombre del contenedor para tu web (eligiendo “Sitio Web”).

Después de aceptar las políticas de turno, nos dan el código de Tag Manager que se pone antes del cierre de la etiqueta head.

Una vez pegado ahí, tendrás el contenedor de Google Tag Manager instalado en tu sitio y se abrirá ante ti un abanico prácticamente infinito de posibilidades.

Crear variables y constantes en Google Tag Manager

El siguiente paso para continuar viendo nuestros datos en Analytics (pero a través de Tag Manager) es crear las variables.

Dentro de Tag Manager nos iremos a “Variables” para después hacer clic en “Nueva”.

Lo que te recomiendo hacer es crear una Constante con tu UA de Analytics, para así poder usarlo siempre y no tener que ir copiando y pegando cada vez.

Yo en SEOH1 he llamado a esta constante “Constante UA”, después de seleccionar «Constante» como tipo y en valor pegar mi UA.

El siguiente paso es ir a “Etiquetas” donde le enviaremos la información a Analytics desde Tag Manager. Creamos una nueva Etiqueta.

Entre los distintos productos que ofrece Tag Manager elegimos Google Analytics y el tipo Universal Analytics.

En ID de seguimiento elegimos la Constante que hemos creado antes. (También podríamos pegar a mano nuestro UA, y en tipo de seguimiento elegimos página vista.

Por último, lo activaremos en todas las páginas de nuestro site. Una vez hecho esto casi lo habremos configurado.

Tenemos que ver si lo que hemos hecho es correcto. Para ello, iremos a la pestaña superior y haremos clic en “Vista Previa”.

Nunca jamás publiques nada sin comprobar en la vista previa que funciona.

Una vez le des a “Vista Previa” abre otra pestaña con tu web y se te abrirá automáticamente un panel inferior de Tag Manager informándote de qué está pasando en tu página.

En este caso todo funciona correctamente, y nuestra etiqueta de Google Analytics se está cargando en esta página.

Una vez hecho esto puedes finalmente hacer clic en «Publicar» y no olvides quitar el antiguo código de Analytics de tu página.

Una buena práctica que te recomiendo cada vez que toques algo en Tag Manager es ir a «Versiones» y renombrar tus últimos cambios especificando qué has hecho.

Así siempre tendrás claro qué has modificado y cuándo.

Ejemplo de Tag Manager en SEOH1

Pongamos un ejemplo. En esta web puede interesarnos controlar qué categorías son las que más interesan a los usuarios etiquetando los botones del menú.

Antes, tendríamos que haber etiquetado uno a uno los enlaces con el código de traking de eventos.

Pero ahora con Tag Manager podemos hacerlo sin tener que tocar nada de código (o casi).

Vamos a ver paso a paso como podemos etiquetar la categoría “SEO” en el menú para saber cuántas veces se clica en el mismo.

1º Inspeccionar el elemento para ver qué trozo de código podemos coger para identificar ese botón.

Como vamos a “contar” los clics, activamos todas las variables de clic (aunque podríamos limitarnos a una, pero bueno).

En este caso vamos a probar con «Click Text» para identificar ese botón.

También activo variables de página. En este caso utilizaré “Page Path”, por lo que podría perfectamente (en este caso), desactivar las otras.

Ahora tengo que crear un nuevo activador.

Aquí tienes una guía de activadores explicada increíblemente bien.

¡Aukera es una especie de Biblia de Google Tag Manager en castellano!

El evento que quiero medir es un Clic en un enlace, por lo que en la configuración elijo «Solo enlaces».

Este activador se habilitará en cualquier página (podría configurarlo para una página concreta, pero de momento vamos a medirlo a lo bestia).

Elijo Page Path que coincida con la expresión regular /.*

Si no te aclaras mucho con las expresiones regulares (como es mi caso), podrías cambiarlo por Page Path → Empieza por → /

Ahora le digo a Google Tag Manager que empiece a contar los clics con el texto igual a SEO en cualquier página (/.*).

Cuando le doy a guardar al Activador ya casi lo tendremos. Por decirlo de alguna forma, Google Tag Manager estará recogiendo la información, pero no le hemos dicho cómo queremos que nos la enseñe.

Esto lo haremos mediante una etiqueta de Google Analytics.

Crear etiqueta de Google Analytics en Tag Manager

Elijo una etiqueta de Google Analytics (Universal) de tipo Evento.

En el ID de seguimiento tenemos que decirle a qué cuenta de Analytics queremos que envíe la información, por lo que elegiremos nuestra constante con nuestro UA.

Ahora tenemos que llenar los campos de categoría, acción y etiqueta del evento de Google Analytics. Podríamos incluir constantes en estos campos y otras cosas, pero vamos a hacerlo a mano para este ejemplo.

Sí es importante que respetes un orden para aclararte después de lo que haces. Yo he decidido hacerlo así y seguro que se te ocurre alguna forma de estructurarlo mejor.

• Categoría → Clic
• Acción → Menu
• Etiqueta → Seo

¿Por qué no es buena idea llenar estos campos “a mano”?

Pues porque como soy despistado, puede que el siguiente evento en lugar de Clic (con mayúscula) lo ponga con minúscula, por lo que estaré enviando dos categorías distintas a Analytics y la estaré liando parda sin darme cuenta hasta que vaya a mirar los datos…

Por eso es importante hacerlo mediante constantes.

En la parte de “Activar” elegiré el activador que he creado anteriormente.

Ahora solo queda guardar la etiqueta y darle a vista previa a ver qué pasa. (¡Jamás publicar a la primera!)

Después de dar a “Vista Previa” y cargar la página puedo ver que se está disparando la etiqueta de Analytics, pero no la de UA Event Menu Seo, que es como he llamado al clic en esa categoría del menú.

Cuando haga clic en “Seo” se tendría que disparar su evento si todo esta bien.

¡Éxito! Está funcionando correctamente. Si ahora vamos a nuestra cuenta de Analytics → Comportamiento → Eventos, podremos ver cuanta gente ha hecho clic en esa parte del menú.

Aún así, he cometido un error configurando ese ejemplo.

En el Activador le he dicho que se active en cualquier página cuando se haga clic en un enlace con un texto igual a SEO. ¿Y qué pasa si en alguna otra parte de la web tengo un enlace con el texto SEO?

Pues que estaré recogiendo datos que no son reales, porque los estaré mezclando con otras cosas.

En este caso, Seoh1 es una web pequeña (de momento) y puede que sirva tal y como está. Pero imagínate cuando estés etiquetando un ecommerce con millones de páginas…

Para asegurarnos de hacerlo bien, tenemos que tunear un poco más nuestro activador, es decir, tengo que buscar otra cosa (trozo de código) que me ayude a identificar mejor ese botón en concreto.

Ahora puedo mirar en la consola de Google Tag Manager qué “puedo coger” para identificar ese click.

Esto se hace haciendo clic en “Seo” seleccionando en el sumario mi clic (gtm.linkClick) elegir mi UA Event Menu Seo y luego hacer clic en Variables.

(Aquí estará recogiendo sólo las Variables que yo le he puesto antes que recoja).

Podría identificarlo con el “Click Element”, pero podría aparecer lo mismo en otros enlaces, por lo que no solucionaría nada.

El mismo caso para “Click URL” (es la url de destino). Tampoco solucionaría nada.

¿Qué ideas se os ocurren? ¡A ver si entre todos conseguimos solucionar este pequeño problema!

En próximos post compartiré lo que se me ha ocurrido a mí, o si a alguien se le ocurre algo mejor en los comentarios, se mencionará en el artículo, por supuesto 😉