Google Tag Manager: el tutorial que necesitas

Han pasado 7 años ya, desde la primera vez que me encontré con un contenedor de Google Tag Manager, en lo adelante GTM, Tag manager o mi gestor favorito de etiquetas. 

 

Antes de eso, había escuchado hablar de GTM como una herramienta que soluciona gran parte del conflicto técnico, que los de marketing debemos abordar para implementar soluciones de medición que den un sentido lógico, probable en resultados, a nuestros esfuerzos. 

 

¡Y lo es! 

 

Aunque la herramienta es muy sencilla una vez comienzas a usarla, estando allí frente a ella por primera vez, me sentía como en la entrada del Laberinto de Horta o de cualquier laberinto complejo… 

 

Evidentemente, necesitaba ayuda para introducirme de la mano de un experto en el recorrido. Aunque, existen un sin fin de tutoriales de Google Tag Manager, en ese entonces las opciones eran limitadas. 

 

Buscando, encontré a Lucía Marín; con ella hice la formación, obtuve conocimientos fundamentales y mi primera acreditación (que, por cierto, no sé qué hice con ella) ¿Será que lucía guarda el historial de acreditaciones expedidas del curso?

 

Si tú como yo hace 7 años, antes de conocerlo, ya sabes que lo necesitas y estás buscando un tutorial sobre Tag Manager que te salve la vida, este post es para ti. 

 

 

Seguro que también te interesa:

 

• Qué es Google Search Console: guía completa
• Qué es la tasa de rebote en una web y cómo reducirla
• Parámetros UTM: qué son y cómo crearlos

 

 

En las líneas a continuación conoceremos los aspectos fundamentales de Google Tag Manager, para entender qué es Google Tag Mánagero para qué sirve Google Tag Manager. Además, descubriremos cómo instalar un contenedor de GTM en los gestores de contenido web más usados y presentaremos un ranking Top 5 de tutoriales de GTM en Youtube. Fabuloso, ¿no?

 

Pues empezamos.

 

 

¿Qué es Google Tag Manager?

 

Google Tag Manager ha venido a facilitarnos la vida a todos los que trabajamos marketing digital con páginas web ¡Y de forma gratuita!

 

Entonces, ¿Qué es Google Tag Manager? GTM, como se le conoce de forma amistosa,  es una herramienta de gestión de etiquetas desarrollada por Google que permite implementar e instalar las etiquetas de seguimiento, códigos html, scrip y conversiones en sitios web o aplicaciones móviles de forma más simplificada y sencilla, sin tener que tocar el código de la web todos los días.

 

Hace más de 12 años que existe y aún son muchas las empresas y las personas que jamás lo han usado, ¿Estamos locos o qué?

 

Algunos ejemplos de etiquetas incluyen el código de seguimiento de Google Analytics, El pixel y la API de Facebook o la etiqueta de conversión de Google Ads.

 

 

¿Para qué sirve Google Tag Manager?

 

Con Google Tag Manager, puedes agregar, actualizar o eliminar etiquetas desde una interfaz de usuario fácil de usar, lo que simplifica la gestión y optimiza la implementación de etiquetas, ahorrando tiempo y recursos en el proceso.

 

¡Lo que oyes! Con esto ganas independencia y no necesitas estar molestando al equipo de IT de tu empresa cada dos por tres.

 

A continuación te dejo algunos de los principales beneficios que trae este asistente que Google nos regala:

 

 

✅ Gestión correcta de etiquetas

 

El objetivo más importante de Tag Manager es hacer que la gestión de etiquetas sea lo más fácil y eficiente posible.

 

Esto significa que puedes añadir, editar o eliminar cualquier etiqueta de seguimiento o análisis, como Google Analytics o las etiquetas de conversión de Facebook, sin necesidad de intervenir directamente en el código de tu sitio web.

 

Esto es especialmente útil para sitios web de negocios donde las campañas y las necesidades de seguimiento cambian con frecuencia.

 

 

✅ Medir las conversiones

 

Google Tag Manager permite la fácil configuración de etiquetas específicas para rastrear los eventos que realizan los usuarios en nuestras webs (y claro que las conversiones más importante!), ya sea realizar una compra, suscribirse a un newsletter o rellenar un formulario de contacto.

 

Estos datos son vitales para evaluar la efectividad de tus campañas de marketing y optimizarlas para mejor rendimiento.

 

 

✅ Vincular otras Plataformas de Marketing

 

Google Tag Manager tambien sirve para integrar la web con otras herramientas de análisis y marketing digital vitales para tu estrategia online.

 

Puedes conectar GTM con Google Analytics para obtener informes más detallados sobre el comportamiento de los usuarios en tu sitio o con Google Ads para mejorar el seguimiento de las campañas publicitarias y su rendimiento. También puedes insertar los eventos de conversión en plataformas sociales como Meta, Tiktok y Linkedin,

 

 

✅ No afecta la velocidad de carga web

 

Google Tag Manager te ahorra la mala idea de instalar múltiples etiquetas de forma individual en tu sitio web que lo ralentiza y afectan su tiempo de carga. Con GTM todas tus etiquetas se manejan a través de un único contenedor, lo que reduce significativamente el tiempo de carga.

 

Un sitio más rápido mejora la experiencia del usuario y puede contribuir a un mejor ranking en los motores de búsqueda.

 

 

¿Cómo funciona Google Tag Manager?

 

El cómo funciona Google Tag Mánager y las mejores claves para su instalación y configuración te lo enseñaremos a profundidad en los próximos puntos.

 

Pero antes, queremos que te metas entre ceja y ceja los tres elementos claves que serán tu mantra en GTM:

 

• Etiquetas
• Activadores
• Variables

 

¿Quieres saber qué son estos ‘mantras’? Pues sigue leyendo:

 

 

Aspectos fundamentales de Google Tag Manager

 

Para empezar, el uso de Google Tag Manager no significa un divorcio con el equipo técnico de programación; pero… nos otorga cierta libertad de acción que mejora la relación . 

 

 

¿Qué es un contenedor de GTM?

 

Comenzaremos por entender que una cuenta de Google Tag Manager puede tener varios contenedores relacionados con una plataforma objetivo. 

 

Las plataformas objetivo pueden ser:

 

• Un sitio web
• una aplicación de iOS
• Una aplicación Android
• Las AMP
• De server

 

 

Cuando creas un contenedor, abres una interfaz muy amigable para el usuario, con  capacidad para extraer toda la información que desees, de la plataforma objetivo, y enviarla a aplicaciones de terceros, como son herramientas de analítica web y proveedores de anuncios. 

 

Un contenedor de Google Tag Manager está compuesto básicamente por etiquetas, activadores y variables.

 

 

 

¿Qué son las etiquetas de Google Tag Manager?

 

Como en la vida misma , las etiquetas de Google Tag Manager contienen información relevante del bien etiquetado. Y como somos gente muy curiosa, nos encanta etiquetarlo todo, que no falte ni un dato.

 

 

Vamos a poner un ejemplo:

 

Imagina que Lucía está navegando por un sitio web donde venden bicicletas, se va después de 30 minutos y no compra. ¿Te vas a conformar con saber solo que estuvo ahí? No señor. Querremos saber: 

 

• ¿Qué modelos miró? ¡Etiqueta!
• ¿Agregó alguno al carrito? ¡Etiqueta!
• ¿Habrá iniciado el proceso de pago? ¡Etiqueta!

 

¿Cuáles son las etiquetas más populares en Google Tag Manager?

 

Veamos ahora cuáles son las etiquetas más populares en Google Tag Manager. Seguro que las conoces todas.

 

 

• Google Analytics

 

Google Tag Manager te permite configurar y administrar eventos de GA4 en un solo lugar. Para enviar datos de eventos de Google Tag Manager a GA4, hay que configurar dos etiquetas que funcionan juntas:

 

• Etiqueta de Google
• Google Analytics: evento de GA4

 

Aprende más sobre la configuración de GA4 mediante GTM en la ayuda de Google para Tag Manager

 

Configuración de GA4 con GTM

 

 

• Google Ads

 

Se puede usar Tag Manager para implementar las etiquetas de conversión de Google Ads. Encuentra más información relevante sobre la configuración de estas etiquetas en el siguiente enlace 

 

Cómo implementar las etiquetas de conversión de Google Ads

 

 

• Floodlight

 

Google Tag Manager permite gestionar varias etiquetas de Floodlight en un único lugar, en vez de tener que hacer cambios manualmente en cada página y la implementación es más rápida y automatizada. Podemos obtener más información sobre la integración en  

 

Cómo actividades de Floodlight a contenedores de Google Tag Manager

 

 

• Etiqueta de Google

 

La etiqueta de Google envía datos a destinos conectados, como Google Ads y Google Analytics 4. 

 

Para configurar una etiqueta de Google en Tag Manager, necesitas un ID de etiqueta de Google. Descúbrelo todo sobre la configuración de esta etiqueta aquí

 

Configura tu etiqueta de Google

 

 

• Vinculación de conversiones

 

Las etiquetas de vinculación de conversiones se usan para registrar los datos de clics de forma que las conversiones se puedan medir de manera eficaz. 

 

Para configurar una etiqueta de vinculación de conversiones, puedes seguir los pasos que se indican en este enlace

 

Faltan parámetros

 

 

• HTML personalizada

 

El tipo de etiqueta HTML personalizada se usa para implementar etiquetas que aún no son compatibles con Tag Manager. 

 

Si quieres más información sobre estas etiquetas a continuación Google Support al rescate

 

Más info sobre etiquetas personalizadas

 

 

Y es que… ¿qué es lo que necesitamos saber sobre este tema que no lo tenga el Super Power Flower Google?

 

Todas las respuestas = busca en Google

 

Hehehe

 

 

¿Qué son los activadores de Google Tag Manager?

 

Las etiquetas suelen estar dormidas y, por si solas, no hacen absolutamente nada. Y aquí es donde entran en juego los activadores.

 

Los activadores son el ring que las despierta just in time. 

 

 

Existe diversos grupos de activadores de Google Tag Manager, conforme nombramos a continuación:

 

 

De vista de página

 

 

• DOM preparado

 

Se activa después de que el navegador haya terminado de crear la página completa en HTML y cuando el modelo de objetos del documento (DOM) está listo para analizarse. 

 

Las etiquetas basadas en vistas de páginas que interactúan con el DOM para rellenar variables se deben configurar con este tipo de activador para asegurarse de que se envíen los valores adecuados a Google Tag Manager.

 

 

• Inicialización

 

Se ha diseñado para que se ponga en marcha antes de que se activen otros activadores, excepto Inicialización del consentimiento. 

 

Cada contenedor web incluye un activador Inicialización: todas las páginas de forma predeterminada. Este activador pone en marcha todas las etiquetas que deban ir antes de otros activadores.

 

 

• Inicialización del consentimiento

 

Ayuda a respetar la configuración de consentimiento antes de que se pongan en marcha otros activadores. El activador Inicialización del consentimiento se utiliza con etiquetas que definen o modifican el estado de consentimiento de los usuarios de su sitio, como las de la Plataforma de gestión del consentimiento o las que definen los valores predeterminados de consentimiento. 

 

Cada contenedor web incluye un activador Inicialización del consentimiento: todas las páginas de forma predeterminada

 

 

• Ventana cargada

 

Se activa después de que la página se ha cargado por completo, incluidos los recursos insertados, como imágenes y secuencias de comandos.

 

 

• Vista de una página

 

Se activa en el instante en el que el navegador web comienza a cargar cualquiera de las páginas definidas en la configuración de este activador. Es una opción efectiva cuando solo necesitamos datos generados a partir de impresiones de páginas.

 

 

️ De clic

 

• Solo enlaces

 

Activan las etiquetas cuando el usuario hace clic en un enlace. Por defecto se activan al hacer clic en cualquier enlace, pero pueden ser configurados para activarse en enlaces cuando se cumplen determinadas condiciones. 

 

Las condiciones pueden ser establecidas en función del valor de una variable. Por ejemplo puedes crear un activador de clics en enlaces con una clase específica.

 

Puede configurarse para: 

 

• Retrasar la apertura de enlaces hasta que se hayan activado todas las etiquetas o hasta que se haya agotado el tiempo de espera especificado.
• Activar la etiqueta solo si la apertura del enlace se considera una acción válida. 

 

 

• Todos los elementos

 

Se activa cada vez que el usuario hace clic, no importa el elemento. Al igual que el anterior, pueden ser configurados para activarse en enlaces cuando se cumplen determinadas condiciones, en función de valores de variables específicas.

 

 

‍ Interacción del usuario

 

• Envío de formulario

 

Como su nombre lo indica, se usa para activar las etiquetas cuando un formulario es enviado. Tiene una opción clave que permite diferenciar la cantidad de intentos de envíos de formularios de la cantidad de formularios enviados  de manera exitosa  “Comprobar la validación”. Más detalles en este enlace

 

 

• Profundidad de desplazamiento

 

El activador de profundidad de desplazamiento se usa para activar etiquetas en función de cuánto se haya desplazado un usuario en una página web. Pueden ser horizontales o verticales en función de la dirección del desplazamiento del usuario. Más detalles en este enlace

 

 

• Visibilidad del elemento

 

Se activa cuando un elemento seleccionado se vuelve visible en el viewport del navegador web. Algunos de los eventos que hacen que un elemento se muestre son: cargar una página, desplazarse por ella, pasar una pestaña del navegador al primer plano o la ejecución de rutinas programáticas que afecten la posición o visibilidad del elemento. Más detalles en este enlace

 

 

• Vídeo de YouTube

 

Permite capturar las actividades de:

 

•  Iniciar 
• Completado
•  Pausado, almacenado en búfer o buscado
•  Progreso 

 

De algunos o todos los vídeos.

 

 

Otros

 

• Cambio en el historial

 

Los activadores basados en el evento Cambio en el historial se activan al cambiar el fragmento de URL (hash) o cuando un sitio web utiliza las API HTML5 pushState. Estos activadores son útiles para activar etiquetas que realicen un seguimiento de las páginas vistas virtuales en una aplicación Ajax, por ejemplo.

 

 

• Error de JavaScript

 

Se usa para activar etiquetas cuando se produce una excepción JavaScript (window.onError) no detectada. Esta etiqueta sirve para registrar mensajes de error en herramientas de análisis. 

 

 

• Evento personalizado

 

Los eventos personalizados sirven para hacer un seguimiento de las interacciones que ocurren en su sitio web o aplicación móvil y que no se gestionan con métodos estándar. Su uso más frecuente es el seguimiento de envíos de formularios cuyo comportamiento predeterminado ha cambiado.

 

 

• Grupo de activadores

 

Este grupo solo se activa cuando todos los activadores seleccionados se han activado por lo menos una vez. 

 

 

• Temporizador

 

Este activador se usa para medir cuánto tiempo tarda un usuario en finalizar una tarea, como leer un artículo, rellenar un formulario o hacer una compra, en una misma página.

 

 

¿Qué son las variables de Google Tag Manager?

 

Las etiquetas pueden enviar información customizada, que se puede usar para condicionar la activación de las mismas. Ese es el motivo por el cual existen las variables. 

 

 

Las variables integradas en un contenedor de GTM son las siguientes:

 

 

 

¿Cómo instalar un contenedor de GTM en el sitio web?

 

De forma manual en todas las páginas

 

Un contenedor de Google Tag Manager (GTM) cuenta con dos fragmentos de código necesarios para que este funcione de manera correcta en el sitio web. 

 

→ Una parte del fragmento debe insertarse entre las etiquetas head de todas las páginas, tan alto como sea posible.

 

→ La otra debe insertarse inmediatamente después de la etiqueta html de apertura de body.

 

 

¿Cómo encuentro esos fragmentos de código?

 

Para obtener los fragmentos de código que necesitas insertar en la web, lo primero que debes hacer es crear la cuenta de Google Tag Manager en https://tagmanager.google.com/

 

Te dejo todos los detalles para configurar e instalar la cuenta de forma manual aquí: 

 

 

 

  En un CMS

 

 

• WordPress

 

Francesco Graso nos indica cómo instalar un configurador GMT en WordPress en esta publicación realizada directamente en el sitio oficial de wordpress.org:

 

 

• Shopify

 

Google tag manager está disponible para todas las tiendas de shopify a través de un pixel personalizado.

 

 

• Adobe Commerce

 

En el sitio web de Adobe Commerce podemos encontrar de información sobre cómo instalar GTM de manera sencilla en este CMS:

 

 

• PrestaShop

 

Puedes insertar el código en todas las páginas editando los archivos correspondientes o bien instalar un addon de los de la lista. Más info aquí.

 

 

• Joomla

 

Se puede realizar directamente editando los archivos de la plantilla o usando una extensión.

 

 

• Woocommerce

 

Con este plugin solo tienes que instalar una extensión para capturar y emitir todos los eventos de eCommerce que necesites. 

 

 

Top 5 de tutoriales de Google Tag Manager del Momento en Youtube

 

⏯️ Tutorial de Analytics Mania

 

Si no estás seguro de cómo o dónde empezar, este tutorial de Google Tag Manager es exactamente lo que necesitas. En este vídeo de 1 hora, te muestran cómo:

 

– Crea tu primer contenedor

– Crea tus primeras etiquetas en GTM (usaremos Google Analytics 4)

– Cómo asegurarse de que su configuración funcione correctamente

– Y cómo publicar esos cambios (para que Google Analytics comience a medir el tráfico de su sitio web).

 

Además, algunas partes del vídeo contienen una introducción rápida a la funcionalidad de Google Analytics 4.

 

¡Win, win!

 

 

⏯️ Tutorial de Ramón Optimiza

 

En este vídeo, Ramón explica paso a paso a cómo añadir GTM a tu página web, a configurar tu cuenta de GA4 y a registrar tus primeros eventos.

 

 

 

⏯️ De Tutopress

 

En este curso de Google Tag Manager aprenderás cómo usar esta herramienta, cómo instalar herramientas como Google Analytics y cómo funcionan los activadores y las variables.

 

 

 

⏯️ De Simplilearn

 

En este video tutorial de Google Tag Manager para principiantes, te enseñan cómo usar Google Tag Manager para optimizar los análisis de su sitio web y obtener la información que necesita para mejorar su presencia en línea. 

 

 

 

⏯️ De Analytics mania

 

Con este curso descubrirás qué es el etiquetado del lado del servidor en Google Tag Manager y por qué podrías necesitarlo.

 

En este vídeo Analytics mania explica:

 

• Qué es el etiquetado del lado del servidor
• Los beneficios del etiquetado del lado del servidor de Google Tag Manager
• Los inconvenientes del etiquetado del lado del servidor
• Cómo configurar su primera configuración de etiquetado del lado del servidor (incluido Google Analytics 4)
• Cómo conectar un dominio personalizado
• Cómo actualizar su servidor (para que funcione en su sitio web activo)
• Entre otras 

 

 

 

Beneficios de usar Google Tag Manager en tu estrategia digital

 

Llegados a este punto, sabemos que son obvias las ventajas y los beneficios de utilizar Google Tag Manager para tu sitio web y campañas de marketing.  Aún así, como no queremos que te vayas sin tenerlo memorizado, vamos a dejarte un pequeño resumen:

 

 

✨ Uso fácil y Autonomía

 

Google Tag Manager sobresale por su usabilidad intuitiva, que facilita la gestión de etiquetas y lo pone al alcance de todos aunque no tengamos ni idea de programación ni códigos.

 

Permite a los especialistas en marketing, editores de contenido y propietarios de sitios web añadir, editar o eliminar etiquetas sin depender constantemente de los desarrolladores web.

 

Con GTM ganamos tiempo para acelerar la puesta en marcha de nuestro plan de marketing y reducimos los problemas vinculados con el desarrollo técnico.

 

 

✨ Mejor Organización

 

Antes de GTM, cada nueva herramienta o servicio requería su propia etiqueta, lo que llevaba a una acumulación de códigos en el sitio web que podía ser difícil de gestionar y rastrear.

 

GTM permite alojar todas tus etiquetas en un único contenedor, lo que facilita su organización, implementación y actualización. Esto garantiza  que tu sitio se mantenga limpio y ordenado.

 

 

✨ Seguimiento Personalizado de Conversiones

 

Podrás crear un seguimiento avanzado de todas las acciones que el usuario realiza en tu web o app. Desde el seguimiento de micro conversiones como clics en botones o reproducciones de videos, hasta la configuración de variables complejas para capturar información detallada de compra.

 

Con GTM recopilar los datos que necesitas para tomar las mejores decisiones

 

 

✨ Vinculación con otras plataformas

 

GTM se integra muy bien con otras herramientas de Google como Analytics, Ads y mucho más, permitiendo una sinergia que maximiza tus esfuerzos de marketing digital. Permite un mejor rastreo de eventos en plataformas sociales como Meta, Tiktok y Linkedin.

 

 

✨ Seguridad 

 

Es una herramienta segura creada por el mismo Google. Con ella tendrás control absoluto de los cambios e instalaciones que raíces. Cuenta con un buen sistema de control de versiones, que guarda cada cambio realizado, proporciona un entorno seguro y permite revertir rápidamente a versiones anteriores si es necesario, asegurando la estabilidad de tu sitio web.

 

Al ser un producto de Google, GTM está en constante evolución, ofreciendo regularmente nuevas funciones y mejoras.

 

 

✨ ¡Es gratis!

 

¿Qué mejor que esto? Puedes usar Google Tag Manager de forma gratuita. Solo necesitas tener un correo electrónico de Gmail para poder abrirte una cuenta

 

 

Consejos para utilizar de forma eficaz Tag Manager

 

Usar Google Tag Mánager es sencillo, sí. Pero para usarlo de la mejor manera te recomendamos que pongas en prácticas estos consejos:

 

 

>> Sé ordenado 

 

La gestión de etiquetas se puede complicar si no llevamos un orden en la nomenclatura. Te recomiendo siempre seguir la misma estructura a la hora de llamar tus etiquetas (Ejemplo: nombre de la acción – Plataforma:  Envio de Formulario Contacto – Google Ads). Haz lo mismo con los activadores y variables personalizadas.

 

También puedes agregar varios eventos en carpetas para una mejor clasificación.

 

 

>> Verificación constante

 

Cada vez que crees nuevas etiquetas utiliza el modo Vista Previa para comprobar su correcto funcionamiento.

 

Además, revisa nuevamente el buen funcionamiento de tus etiquetas cada cierto tiempo, ya que algunos cambios internos en la web pueden afectar a tus activadores, y por ende dejar de disparar tus etiquetas.

 

 

>> Mantente actualizado

 

Como todo en el mundo online, Google Tag Manager es un ser vivo que muta y cambia constantemente. Te recomendamos mantenerte actualizado sobre las innovaciones de la herramienta ya que pueden cambiar algunas configuraciones comunes.

 

Para esto puedes seguir en Youtube los canales que te hemos recomendado, o seguir nuestro perfil de Instagram @oinkmygod para no perderte ningún avance importante en esta plataforma. Si tienes alguna consulta también puedes contactarnos en página de contacto

 

Y así llegamos al final de nuestro tutorial de Google Tag Manager (GTM). Si te ha gustado comparte y comenta aquí debajo, que me encantará leerte