Cómo añadir un banner de consentimiento de cookies a tu sitio web

Un banner de consentimiento de cookies es el pequeño aviso que aparece cuando alguien llega por primera vez a tu sitio y le pregunta si acepta las cookies y los rastreadores no esenciales. Bajo leyes como el GDPR, las normas del UK PECR y la DPDPA de India, el banner es solo la punta visible del sistema. El trabajo de verdad ocurre por debajo: los scripts no esenciales, como la analítica, los píxeles publicitarios y los widgets de chat, no deben ejecutarse hasta que el visitante dé su consentimiento.

Esa distinción importa porque un banner que solo muestra un mensaje pero deja que Google Analytics o el píxel de Meta se activen al cargar la página no cumple. Los reguladores han dejado claro que el consentimiento debe obtenerse antes de que se cargue el rastreador, no después. Así que añadir un banner persigue dos cosas a la vez: mostrar una opción clara y bloquear los rastreadores hasta que se tome esa decisión.

La forma más rápida de añadir un banner es insertar un único script en el head de tu HTML. Después de crear un sitio web en tu panel de ConsentX obtienes un fragmento de inserción que parece una sola línea que hace referencia a embed.js con la clave de tu sitio. Pégalo lo más arriba posible en el head para que se cargue antes que tus otros scripts.

Colócalo por encima de tus etiquetas de analítica y publicidad. El orden importa porque ConsentX necesita registrarse primero para poder retener los rastreadores que están por debajo hasta que el visitante decida. Si etiquetas correctamente tus rastreadores en el panel, el cargador los mantendrá bloqueados en la primera visita y los liberará en el momento en que se otorgue el consentimiento.

Este enfoque funciona en cualquier sitio programado a mano, generador de sitios estáticos o framework en el que controles el head HTML. Además es el método más limpio porque no hay una capa de plugins de por medio.

Si tus rastreadores ya se gestionan en Google Tag Manager, también puedes añadir ConsentX a través de GTM. Crea una nueva etiqueta de HTML personalizado, pega dentro el fragmento de inserción y configúrala para que se active con el activador Consent Initialization, de modo que se ejecute antes que todo lo demás.

El patrón más limpio es combinar el banner con Google Consent Mode. En lugar de dejar que las etiquetas de GTM se activen libremente, las condicionas al estado del consentimiento, y ConsentX actualiza ese estado cuando el visitante elige. Así es el propio GTM el que retiene las etiquetas hasta que se otorga el consentimiento, que es exactamente el comportamiento que esperan los reguladores.

Evita el error habitual de cargar ConsentX mediante GTM mientras tu etiqueta de analítica sigue activándose en All Pages sin ninguna comprobación de consentimiento. Si el rastreador no está condicionado, el banner es decorativo y sigues expuesto.

En WordPress no necesitas un plugin pesado. La vía más sencilla es añadir el fragmento de inserción a la cabecera de tu tema mediante un plugin de código para cabecera y pie o el campo de código personalizado para el head de tu tema, de modo que se cargue en el head en todo el sitio.

Si usas un plugin de SEO o de caché, coloca el fragmento donde no se elimine ni se aplace, porque aplazar el cargador de consentimiento puede permitir que algunos rastreadores se cuelen antes de que se inicialice. Después de añadirlo, vacía cualquier caché de páginas para que los visitantes reciban el nuevo marcado del head.

Los sitios de WordPress suelen cargar rastreadores a través de varios plugins a la vez, así que utiliza la detección de rastreadores del panel para encontrar todos los scripts y etiquetarlos antes de confiar en el banner.

En Shopify, añade el fragmento de inserción a tu tema editando theme.liquid y pegándolo dentro del elemento head, cerca de la parte superior. Los temas de Shopify cargan varios scripts propios y de aplicaciones, así que es importante situar el cargador bien arriba en el head.

Shopify también tiene su propia API de privacidad y consentimiento del cliente para la tienda. Siempre que sea posible, conecta ConsentX a esa señal para que los píxeles nativos de Shopify respeten la decisión del visitante junto con tus demás rastreadores. Pruébalo con un flujo de compra, porque las páginas de pago a veces cargan scripts que no cargan las páginas de tu tienda.

Probar es el paso que la mayoría de los equipos se salta, y es el que decide si de verdad cumples. Abre tu sitio en una ventana de navegación privada nueva, abre después las herramientas de desarrollo de tu navegador y observa la pestaña Network mientras se carga la página. Antes de hacer clic en nada del banner, no deberías ver ninguna petición a dominios de analítica o de publicidad.

A continuación, haz clic en Rechazar y recarga. Los rastreadores deben seguir ausentes y no debe aparecer ninguna cookie de marketing en la pestaña Application o Storage. Después haz clic en Aceptar y confirma que ahora los rastreadores se cargan y las cookies aparecen. Si los rastreadores se activan antes de que elijas, o bien el script está colocado demasiado abajo en el head, o bien el rastreador no está etiquetado para su bloqueo.

Repite la prueba en unos cuantos tipos de página clave, incluida tu página de inicio, una página de producto o de contenido y cualquier página con un widget de chat o un vídeo incrustado, ya que estas suelen incorporar scripts de terceros adicionales.