Cómo instalar el banner cuando la web usa Google Tag Manager

Si la web usa Google Tag Manager (GTM), la instalación cambia en un punto: el contenedor deja de estar en el código de la web y pasa a cargarlo el banner, solo cuando el visitante acepta. Así ninguna etiqueta del contenedor se ejecuta antes de la elección. Esta guía sirve para cualquier plataforma. Para el detalle de cada una, mira las guías de WordPress, Shopify, PrestaShop, Wix o HTML.

Antes de empezar

• Ten a mano el token de la web: lo ves en el panel, en la ficha de la web.
• Apunta el ID del contenedor. Empieza por «GTM-» y aparece en la pestaña Espacio de trabajo de Tag Manager.
• Necesitas acceso al código o al gestor de la web y permiso para publicar en el contenedor.
• Si la web tiene otro banner o plugin de cookies, desactívalo antes: dos banners se pisan.

Paso 1: quita el fragmento de GTM de la web

Google instala Tag Manager con dos bloques de código. El primero va lo más arriba posible dentro de <head>. El segundo, un <noscript>, va justo después de la etiqueta de apertura <body>.

1. Busca los dos bloques en la plantilla, en el tema o en el campo de «scripts» del gestor.
2. Busca también plugins, módulos o integraciones que añadan GTM por su cuenta. Si lo añaden, desactiva esa opción.
3. Borra los dos bloques y guarda.

Si dejas cualquiera de ellos, el contenedor se cargará dos veces y una de ellas sin consentimiento.

Paso 2: pon el ID del contenedor en el panel

1. Entra en el panel y abre la ficha de la web.
2. Ve a la pestaña Identificación.
3. En el campo ID Google Tag Manager, escribe el ID completo, con el formato GTM-XXXXXXX.
4. Guarda los cambios.

Desde ese momento, el banner carga el contenedor después de que el visitante acepte.

Paso 3: instala el banner

Pega este fragmento antes del cierre de </body> y cambia TU_TOKEN por el token de la web:

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.jQuery && typeof window.$ !== 'function') { window.$ = window.jQuery; }
  var s = document.createElement('script');
  s.async = true;
  s.id = 'cookies-token';
  s.src = 'https://cookies.sslcamaltec.com.es/cookies/cookie-loader.nojq.min.js?tokencookies=TU_TOKEN';
  document.body.appendChild(s);
});
</script>

El cargador necesita jQuery con el atajo $. Si la web no carga jQuery, añádelo antes del fragmento. Cada guía de plataforma explica cómo hacerlo.

Paso 4: usa los eventos del banner como activadores

El banner envía estos eventos a la capa de datos (dataLayer). Puedes usarlos como activadores de evento personalizado:

Para crear el activador:

1. En Tag Manager, haz clic en Activadores y luego en Nuevo.
2. Haz clic en Configuración del activador y elige Evento personalizado.
3. En Nombre de evento, escribe el nombre exacto, por ejemplo cookie_consent_statistics. Respeta minúsculas y guiones bajos.
4. Deja Este activador se activa en: Todos los eventos personalizados y guarda.
5. Asigna el activador a las etiquetas que correspondan.

Antes de asignarlos, comprueba en la vista previa qué evento aparece al aceptar cada categoría del banner.

Paso 5: configura el consentimiento de cada etiqueta

El banner envía las señales de Consent Mode v2. GTM decide qué hace cada etiqueta con ellas.

1. Abre una etiqueta y ve a Configuración avanzada > Configuración de consentimiento.
2. Las etiquetas de Google Ads, Google Analytics y Floodlight traen comprobaciones de consentimiento integradas. No tienes que tocarlas.
3. En el resto, como píxeles de otras plataformas o mapas de calor, elige La etiqueta requiere consentimiento adicional para activarse. Añade ad_storage a las de publicidad y analytics_storage a las de analítica.
4. Reserva No se requiere ningún consentimiento adicional para etiquetas que no guardan ni leen nada en el dispositivo.

Para revisarlas todas de una vez, ve a Administrador > Configuración del contenedor y, en Ajustes adicionales, marca Habilitar resumen de consentimiento. El detalle de las señales está en configurar Consent Mode.

No añadas la plantilla de otra plataforma de consentimiento ni un gtag('consent', …) propio en una etiqueta HTML personalizada. El banner ya hace ese trabajo.

Paso 6: comprueba con Tag Assistant

1. En la pestaña Espacio de trabajo, haz clic en Vista previa, arriba a la derecha.
2. Escribe la URL de la web y haz clic en Conectar.
3. En la ventana de la web, acepta en el banner. Hasta entonces no hay contenedor cargado, así que es normal que Tag Assistant no se conecte.
4. Cuando veas Conectado, vuelve a Tag Assistant. En Resumen, selecciona el evento Consentimiento más reciente.
5. En la pestaña Consentimiento, revisa la columna Valor actualizado en la página: lo aceptado debe estar concedido.
6. En la pestaña Etiquetas, mira qué se ha activado y qué ha quedado bloqueado.
7. Repite en una ventana privada pulsando «Rechazar». No debe haber peticiones a googletagmanager.com ni a google-analytics.com.

Si quieres un informe externo, pide la auditoría gratuita.

Problemas frecuentes

Para la parte de Tag Manager en profundidad, lee Consent Mode v2 en Google Tag Manager, paso a paso. Tienes el resto de guías en la ayuda.

Preguntas frecuentes

¿Puedo dejar el fragmento de Google Tag Manager en la web y poner también el ID en el panel?

No. El contenedor se cargaría dos veces y una de ellas sin consentimiento. Si pones el ID en el panel, quita de la web los dos bloques del fragmento de GTM.

¿Por qué Tag Assistant no se conecta hasta que acepto en el banner?

Porque el banner carga el contenedor después de que el visitante acepta. Antes de esa elección no hay contenedor al que conectarse, y eso es lo que quieres.

¿Tengo que añadir en GTM la plantilla de otra plataforma de consentimiento?

No. El banner ya envía el estado de consentimiento por defecto y sus actualizaciones. Una segunda plataforma o un gtag('consent') propio en una etiqueta HTML personalizada solo añade conflictos.

Fuentes

1. Instalar Tag Manager en tu web (Ayuda de Tag Manager)
2. Compatibilidad de Tag Manager con el modo de consentimiento (Ayuda de Tag Manager)
3. Activador de evento personalizado (Ayuda de Tag Manager)
4. Vista previa y depuración de contenedores (Ayuda de Tag Manager)
5. Verificar la implementación del modo de consentimiento (Ayuda de Google Ads)