Cómo bloquear scripts hasta que se da el consentimiento: tres métodos comparados
El problema: etiquetas que se disparan demasiado pronto
Un banner de consentimiento solo funciona si las etiquetas que hay detrás respetan la elección del visitante. El fallo más habitual es simple: aparece el banner, pero los scripts de analítica y publicidad ya se han cargado y han establecido identificadores antes de que nadie hiciera clic. Arreglarlo implica bloquear los scripts hasta que se da el consentimiento. Hay tres formas prácticas de hacerlo.
Método 1: reescribir el tipo del script
Los navegadores solo ejecutan un elemento script cuando su tipo es un tipo de JavaScript. Si cambias el tipo a text/plain, el navegador ignora el script. Después añades un atributo data que registra a qué categoría de consentimiento pertenece el script:
- Cambia
type="text/javascript"portype="text/plain". - Añade un atributo como
data-category="analytics". - Cuando el visitante consiente esa categoría, un pequeño cargador restaura el tipo e inserta el script para que se ejecute.
Ideal para: un puñado de scripts conocidos, en línea o externos, en tus plantillas. Cuidado con: los scripts inyectados por otros scripts, que nunca pasan por tus plantillas y por tanto nunca se reescriben.
Método 2: controlar las etiquetas en un gestor de etiquetas
Si tus etiquetas están en Google Tag Manager o una herramienta similar, puedes dejar el contenedor en la página y controlar el disparo con activadores que tengan en cuenta el consentimiento. A cada etiqueta se le asigna un requisito de consentimiento, y el gestor de etiquetas solo la dispara cuando se concede el estado de consentimiento correspondiente. La gran ventaja es el control centralizado: marketing puede añadir etiquetas sin tocar las plantillas, y la regla viaja con la etiqueta.
Ideal para: sitios con muchas etiquetas de marketing. Cuidado con: los scripts codificados directamente fuera del contenedor y las etiquetas HTML personalizadas que cargan sus propios scripts adicionales.
Método 3: cargar los scripts dinámicamente con el consentimiento
Aquí eliminas por completo las etiquetas script de la página y escribes una función que las inyecta solo después de un evento de consentimiento. Es la opción más limpia para aplicaciones de página única y para desarrolladores que quieren control total:
- Escucha el callback de consentimiento de tu CMP.
- Comprueba qué categorías se concedieron.
- Crea un elemento script, establece su origen y añádelo al documento.
- Ejecuta cualquier código de inicialización en el manejador de carga del script.
Ideal para: aplicaciones modernas con paso de compilación. Cuidado con: olvidar gestionar al visitante recurrente, cuya elección guardada debe activar la carga al cargar la página sin un nuevo clic.
Gestionar la retirada del consentimiento
Bloquear antes del consentimiento es solo la mitad del trabajo. Si un visitante retira después su consentimiento, deja de llamar a las herramientas y asegúrate de que no sigan leyendo ni escribiendo identificadores. Quitar un script de la página no elimina el código que ya está en memoria, así que recargar tras la retirada suele ser el enfoque fiable más sencillo.
¿Cuál deberías elegir?
- Pocos scripts, plantillas renderizadas en el servidor: método 1.
- Muchas etiquetas de marketing, editadas por personas no desarrolladoras: método 2.
- Aplicación de página única o front-end a medida: método 3.
- Los entornos mixtos suelen combinar dos de ellos. Solo asegúrate de que ninguna etiqueta quede sin cubrir por ninguno.
Cómo probarlo
- Abre una ventana privada con la caché borrada.
- Abre las herramientas de desarrollo del navegador en las pestañas Network y Application antes de cargar la página.
- Carga la página y no toques el banner. Confirma que no se envían solicitudes de analítica ni de publicidad y que no aparecen cookies ni entradas de almacenamiento relacionadas.
- Acepta solo una categoría y confirma que únicamente se cargan los scripts correspondientes.
- Rechaza todo, recarga y repite la primera comprobación.
- Retira el consentimiento y verifica el comportamiento descrito arriba.
Dónde encaja FlexyConsent
FlexyConsent es compatible con IAB TCF 2.4 y Google Consent Mode v2, y es una CMP certificada por Google (CMP ID 317). Elijas el método de bloqueo que elijas, el trabajo del banner es dar a tu código una señal clara de lo que eligió el visitante. Tu trabajo es asegurarte de que cada script la obedezca.
Conclusiones clave
- Los scripts que se cargan antes de que el visitante elija anulan el propósito del banner.
- La reescritura del tipo, los activadores del gestor de etiquetas y la carga dinámica encajan cada uno con un tipo de sitio distinto.
- Los scripts inyectados por otros scripts son la fuga más habitual.
- Gestiona a los visitantes recurrentes y la retirada del consentimiento, no solo la primera visita.
- Prueba en una ventana privada limpia con las herramientas de desarrollo abiertas antes de tocar el banner.