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.

Página principal de la configuración de Google Tag Manager

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”.

Variables de Google Tag Manager

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.

Crear una variable en Google Tag Manager

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.

Crear una etiqueta en Google Tag Manager para enviar los datos a Analytics

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.

Revisar y publicar la etiqueta de Google Tag Manager

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.

Vista previa de Google Tag Manager en la web

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).

Etiquetar una categoría de menú con Google Tag Manager

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.

Inspeccionar el elemento para asignarle una variable con Google Tag Manager

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.

Un activador es una condición mediante la cual le decimos a Tag Manager cuándo tiene que recoger cierta información y pasarla a las etiquetas. En el primer caso de este post, el activador sería “Todas las Páginas”

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

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

Configurar un activador de evento en Google Tag Manager

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 → /

Configurar expresión regular en Google Tag Manager

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

Configurar etiqueta de Google Analytics con Google 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!)

Vista previa de la etiqueta y el evento de Google Tag Manager y Analytics

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.

Google Tag Manager lanza el evento al hacer clic

¡É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.

Variables para clics en Google Tag Manager

(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 😉

¿Necesitas Hosting para WordPress de Calidad?
Yo ya estoy migrando todo ➡️ Raiola Nework (20 % de descuento)
Muy veloces, optimizados y con un soporte incomparable (comprobado).

Escrito por

Artículos relacionados

Un comentario

  1. Luis E. Morales
    15 mayo, 2016

Comenta el artículo

Acepto la política de privacidad *

Responsable: Bruno Ramos Lara.
Finalidad: Gestión y moderación de comentarios.
Legitimación: Tu consentimiento.
Destinatarios: No se ceden datos, todo queda registrado en esta web.
Derechos: acceder, rectificar, limitar y suprimir tus datos.


¡Suscríbete!

Responsable: Bruno Ramos Lara.
Finalidad: Envío de boletines informativos.
Legitimación: Tu consentimiento.
Destinatarios: Tus datos se guardan en Acumbamail, proveedor de email marketing de seoh1.com cuyos servidores se encuentran en España y cumple todos los requisitos de la RGPD.
Derechos: Acceder, rectificar, limitar y suprimir tus datos.