Instalación de Google Tag Manager y primera etiqueta
Le explicamos cómo instalar el contenedor de Google Tag Manager y crear la primera etiqueta de GA4, la lógica de activadores y variables, el envío de eventos con la capa de datos y la publicación segura.
Aurora YazılımEquipo editorial
6 min de lectura
Para instalar Google Tag Manager, cree una cuenta y un contenedor web en tagmanager.google.com y añada los dos fragmentos de código que le dan a las secciones head y body de su sitio. Después, en el panel, cree la primera etiqueta (por ejemplo, la etiqueta de Google para GA4), conéctela a un activador, pruébela en modo Vista previa y publíquela con el botón Enviar.
¿Qué es GTM y para qué sirve?
Google Tag Manager (GTM) es un sistema gratuito de gestión de etiquetas que le permite administrar desde un único panel los códigos de analítica, publicidad y medición que se añaden a su sitio. En el sitio solo se añade una vez el código del contenedor; los demás códigos, como GA4, Google Ads o el píxel de Meta, se ejecutan desde dentro de ese contenedor.
Su mayor ventaja es no depender del desarrollador ni de una publicación de código cada vez que surge una nueva necesidad de medición. El equipo de marketing prepara una nueva etiqueta de conversión en el panel, la prueba en la vista previa y la publica. Como cada publicación se guarda como una versión, un cambio erróneo puede revertirse con un clic.
GTM también conlleva una responsabilidad: cualquiera con acceso al contenedor puede añadir código al sitio. Por eso hay que repartir los permisos con cuidado y limpiar con regularidad las etiquetas innecesarias.
Etiqueta, activador y variable
La clave para entender GTM son tres conceptos básicos. Toda instalación consiste en conectar entre sí estas tres piezas.
| Concepto | ¿Para qué sirve? | Ejemplo |
|---|---|---|
| Etiqueta (tag) | El código que se ejecutará | Evento de GA4, conversión de Google Ads, píxel de Meta |
| Activador (trigger) | Cuándo se ejecutará la etiqueta | Todas las páginas, envío de formulario, un clic concreto |
| Variable (variable) | La información que se pasa a la etiqueta y al activador | Dirección de la página, enlace pulsado, importe del pedido |
¿Qué es la capa de datos?
La capa de datos (data layer) es una matriz de JavaScript compartida mediante la cual su sitio transmite información a GTM. Aquí escribe datos que no se ven en la página, como el número de pedido, la información del producto o el nombre del formulario; GTM lee esos datos como variables y los pasa a las etiquetas. Así la medición se asienta sobre una base sólida que no se rompe cuando cambia el diseño de la página.
Crear la cuenta y el contenedor
Entre en tagmanager.google.com con la cuenta de Google de la empresa. La cuenta y el contenedor deben crearse a nombre del negocio y a la agencia solo se le debe dar permiso de usuario; así, cuando acabe la colaboración, su infraestructura de medición sigue siendo suya.
- Pulse el botón Crear cuenta, escriba como nombre de cuenta el de su empresa y elija el país.
- Escriba como nombre del contenedor la dirección de su sitio y elija Web como plataforma de destino.
- Acepte las condiciones del servicio; en pantalla aparecerán los códigos de instalación.
- Anote el ID del contenedor, que empieza por GTM-.
Añadir el código del contenedor al sitio
GTM ofrece dos fragmentos de código. El primero debe ir en la sección head de cada página, lo más arriba posible. El segundo es un respaldo para los navegadores con JavaScript desactivado y se añade justo después de la etiqueta body de apertura. Si usa una plantilla común o un archivo de cabecera, basta con añadir el código en un solo lugar para cubrir todas las páginas.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager --><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Añadirlo desde el panel de la plataforma
Muchos sistemas ya preparados ofrecen un campo específico para el ID del contenedor y colocan ellos mismos el código en los lugares correctos. En la plataforma e-commerce de Aurora, el código de Google Tag Manager se añade desde el panel y la pantalla de control en vivo muestra si el código funciona realmente.
Primera etiqueta: la etiqueta de Google para GA4
Una vez cargado el contenedor, lo primero suele ser iniciar la medición de GA4 a través de GTM. Si aún no tiene propiedad de GA4, obtenga primero el ID de medición siguiendo los pasos de la instalación de Google Analytics 4.
La etiqueta de Google recopila las visualizaciones de página y los eventos de la medición mejorada. Para eventos adicionales, cree etiquetas independientes de Evento de GA4, escriba el ID de medición y el nombre del evento, y conéctelas al activador adecuado. Para las conversiones de Google Ads rige la misma lógica: basta con crear una etiqueta de seguimiento de conversiones de Google Ads con el ID de conversión y la etiqueta que obtiene del panel de Google Ads y conectarla a la página de agradecimiento o al evento de compra. Mantener en los nombres de las etiquetas el orden de herramienta, tipo y finalidad le permite encontrar fácilmente lo que busca a medida que crece el contenedor.
- En el menú Etiquetas, pulse el botón Nueva y dé a la etiqueta un nombre claro (por ejemplo, GA4 - Etiqueta de Google).
- En la configuración de la etiqueta, elija el tipo Etiqueta de Google y escriba su ID de medición, que empieza por G-.
- En la sección de activación, elija el activador Initialization - All Pages (Inicialización - Todas las páginas); así la etiqueta se carga antes que las demás.
- Guarde. La etiqueta todavía no está en producción; ahora toca la vista previa y la publicación.
Enviar eventos con la capa de datos
Que el sitio escriba un evento en la capa de datos en momentos importantes, como el envío de un formulario o una compra, es el método de medición más fiable. Los activadores basados en elementos visibles, como un clic o la dirección de la página, pueden romperse en silencio cuando cambia el diseño.
En el ejemplo siguiente, cuando el formulario se envía correctamente se escribe un evento llamado form_gonderildi. En GTM crea un activador de tipo Evento personalizado cuyo nombre de evento sea form_gonderildi y conecta a él la etiqueta de Evento de GA4. Para leer el nombre del formulario, define también una variable de tipo Variable de capa de datos llamada form_adi.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'form_gonderildi',
form_adi: 'teklif_formu'
});En las aplicaciones de una sola página (SPA)
En las aplicaciones de una sola página escritas con React o Vue, los cambios de página no recargan el navegador. En ese caso puede usar el activador Cambio en el historial (History Change) o hacer que el enrutador escriba un evento en la capa de datos cada vez que cambia de página. La configuración del proyecto la explicamos en la guía de instalación de React con Vite.
Vista previa, pruebas y publicación
No publique ningún cambio sin probarlo. El botón Vista previa de la esquina superior derecha abre Tag Assistant; al escribir la dirección de su sitio, este se abre en modo de depuración y puede ver una a una qué etiqueta se ejecuta y cuál no en cada página o evento.
Si está conforme con la prueba, pulse el botón Enviar y escriba un nombre descriptivo y una nota breve para la versión. Anotar en el nombre de la versión qué ha cambiado le facilitará, meses después, averiguar qué cambio provocó un problema de medición.
- En GA4, compruebe también en la pantalla DebugView que los eventos están llegando.
- Si surge un problema, puede volver a publicar la versión anterior desde el menú Versiones.
- En los equipos grandes, abra áreas de trabajo independientes para evitar que los cambios se mezclen entre sí.
Errores frecuentes y buenas prácticas
Con el tiempo se acumulan en el contenedor etiquetas sin usar, y cada una se suma a la carga de la página. Revisar el contenedor cada tres meses y pausar las etiquetas que no se usan reduce tanto el desorden de la medición como la carga sobre la velocidad de la página; este tema es también una parte habitual de nuestro trabajo de gestión de velocidad y rendimiento.
Las etiquetas de publicidad y de medición no deben ejecutarse sin el consentimiento del visitante. Los ajustes de consentimiento de GTM y la configuración del Consent Mode gestionan este flujo. Este artículo ofrece información general; para su estructura de consentimiento de cookies, consulte la normativa vigente y a su asesor jurídico.
| Problema | Solución |
|---|---|
| Los datos se cuentan dos veces | GA4 se ha cargado tanto con gtag.js como con GTM; elimine uno de los dos. |
| La vista previa no puede conectarse al sitio | Bloqueador de anuncios o ajustes del navegador; pruebe en una ventana sin extensiones. |
| La etiqueta funciona en la vista previa pero no en producción | Los cambios no se han publicado; complete el paso Enviar. |
| El activador de clics no funciona | Las variables de clic integradas necesarias no están activadas; actívelas desde el menú Variables. |
Preguntas frecuentes
01¿GTM ralentiza el sitio?
Como el código del contenedor se carga de forma asíncrona, por sí solo no provoca una lentitud apreciable. La carga real procede del número y del peso de las etiquetas que se añaden dentro del contenedor; por eso es importante eliminar las etiquetas innecesarias.
02¿Puedo instalar el píxel de Meta con GTM?
Sí. Puede añadir el código base del píxel con una etiqueta de HTML personalizado o con una de las plantillas de la comunidad, y conectar los eventos a activadores de la capa de datos. Los detalles están en nuestra guía de instalación del píxel de Meta.
03¿Qué es GTM del lado del servidor?
Un contenedor del lado del servidor envía primero las solicitudes de medición a un servidor que usted gestiona, y desde allí las reenvía a las plataformas de analítica y publicidad. Da más control sobre los datos, pero requiere coste de alojamiento y mantenimiento técnico; para la mayoría de los sitios pequeños basta con el contenedor web.
Un Tag Manager bien instalado le permite gestionar la medición publicitaria y analítica sin depender de publicaciones de código, de forma comprobable y reversible. Para montar el seguimiento de conversiones de principio a fin y gestionar las campañas con esos datos, conozca nuestro servicio de marketing digital; para los informes y su interpretación, nuestras soluciones de SEO y analítica. También puede contactarnos para un diseño de landing page con los códigos de medición planificados desde el principio.
