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

 

 

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 

 

 

 

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 👇