Consentimiento de cookies en React: un banner que de verdad bloquea scripts
Banner de consentimiento de cookies en React
Consentimiento de cookies en React: un banner que bloquea scripts | We.Inc
Crea un banner de consentimiento de cookies en React: guarda la elección, carga la analítica solo después de Aceptar y envía actualizaciones de Consent Mode. Además, las props del paquete react-cookie-consent.
Guarda la elección del visitante en el estado de React, persístela en una cookie propia o en el almacenamiento del navegador, y renderiza los scripts de analítica o publicidad solo cuando la categoría correspondiente esté concedida. Basta con un hook pequeño y un componente de banner. Si prefieres un paquete, react-cookie-consent te da un banner listo con props para botones de rechazo, nombre de la cookie y caducidad.
Dos formas de añadir consentimiento a un sitio React
Hacerlo tú mismo
Paquete react-cookie-consent
Categorías (analítica, publicidad)
Sí, las que necesites
Un único valor de aceptar o rechazar por defecto
Botón de rechazo
Sí
Desactivado por defecto; enableDeclineButton lo activa
Dónde se guarda la elección
En la cookie o el almacenamiento que elijas
Una cookie llamada CookieConsent por defecto
Caducidad por defecto
La que tú definas
365 días
Licencia
Tu propio código
MIT
Lo difícil de un banner de consentimiento no es la caja en pantalla, sino asegurarse de que nada que no sea esencial se ejecute antes de que el visitante diga que sí. En React es un problema de estado: una única fuente de verdad para la elección y componentes que la leen antes de insertar una etiqueta script. La demo en vivo de abajo hace justo eso, así que puedes ver cómo el cargador de analítica sigue apagado hasta que aceptas.
Un hook useConsent lee cualquier elección guardada al arrancar la app y la expone junto con funciones para modificarla.
El banner se renderiza solo mientras no haya ninguna elección guardada, y ofrece Aceptar todo, Rechazar todo e interruptores por categoría que empiezan desactivados.
Los cargadores de scripts consultan el hook antes de añadir su etiqueta script, así que un rechazo significa que la etiqueta nunca se añade.
Si usas etiquetas de Google, la misma función envía una actualización de Consent Mode con las categorías concedidas.
Un enlace de Configuración de cookies en cualquier parte de la app borra la elección guardada para que el banner vuelva a aparecer.
Renderiza el banner desde tu layout raíz para que aparezca en todas las rutas, incluidas las visitas directas a páginas internas.
Con renderizado en el servidor, lee la elección guardada solo en un efecto del cliente, para que el render del servidor y el primero del cliente coincidan.
Dale al banner role=dialog o una región con etiqueta, y haz que todos los botones sean accesibles con el teclado.
Guarda un número de versión junto con la elección; cuando añadas una categoría nueva, súbelo para volver a preguntar.
Nunca escondas la opción de rechazar tras la vista de configuración; pon Rechazar todo junto a Aceptar todo.
Preguntas frecuentes
¿react-cookie-consent bloquea los scripts por mí?
No. Su README describe un banner que guarda la respuesta del visitante en una cookie e invoca onAccept u onDecline. Cargar u omitir tu analítica sigue siendo tarea tuya, por ejemplo comprobando getCookieConsentValue antes de añadir el script.
¿Cómo añado un botón de rechazo a react-cookie-consent?
Activa la prop enableDeclineButton; por defecto es false. El texto del botón es I decline por defecto y se puede cambiar con declineButtonText, y onDecline se ejecuta al pulsarlo.
¿Cómo dejo que los visitantes cambien de opinión?
Con tu propio hook, borra el valor guardado y el banner vuelve. Con el paquete, llama a resetCookieConsentValue, pasando el mismo nombre de cookie que le diste al banner si lo cambiaste del predeterminado.
¿Guardo el consentimiento en una cookie o en el almacenamiento del navegador?
Ambas opciones funcionan en el navegador. Una cookie también puede leerla tu servidor, lo que ayuda si es el servidor quien decide qué etiquetas imprimir. El almacenamiento del navegador mantiene el valor fuera de cada petición. Las dos están permitidas para recordar la propia elección.
¿Dónde van las llamadas de Consent Mode en React?
Pon el gtag consent default en el head del HTML antes de cualquier etiqueta de Google, fuera de React, para que se ejecute primero. Invoca gtag('consent', 'update', ...) desde tu manejador de Aceptar dentro de React.
Por qué bloquear es mejor que ocultar
Un banner que solo se oculta tras Rechazar, mientras el fragmento de analítica de index.html ya se ha ejecutado, registra la visita igualmente. La solución es mover el fragmento a un componente que solo se renderice después del consentimiento.
Para las etiquetas que no puedes mover, como las que una plataforma inserta por ti, usa la opción de consentimiento de esa plataforma o Consent Mode, para que la etiqueta funcione en modo restringido hasta que llegue la actualización.
Cómo probar tu banner
Abre el sitio en una ventana privada, abre las herramientas para desarrolladores del navegador y revisa el panel Network: antes de pulsar nada, no debería aparecer ninguna petición de analítica ni de publicidad. Después acepta y confirma que empiezan.
Repite con Rechazar todo y recarga una segunda página para confirmar que el rechazo se recuerda.
Hazlo tú mismo: hook, banner y script bloqueado
Tres piezas pequeñas. No usan ninguna librería, funcionan en cualquier app de React 18 o 19 y coinciden con la demo de arriba.
Hook useConsent
Lee la elección guardada una sola vez en el cliente, y guarda y difunde cada cambio.
Componente ConsentBanner
Aceptar y Rechazar están uno junto al otro; las casillas de categoría empiezan sin marcar.
Cargar un script solo tras el consentimiento
La etiqueta script solo se crea cuando la categoría está concedida, así que un rechazo significa que nunca existe.
Usar el paquete react-cookie-consent
Instálalo con npm install react-cookie-consent. Estas son las props y funciones auxiliares que documenta su README, con sus valores por defecto, a octubre de 2026.
Props y valores por defecto de react-cookie-consent
Prop o función auxiliar
Valor por defecto
Qué hace
"bottom"
Dónde se coloca la barra: top, bottom o none
buttonText
"I understand"
Texto del botón de aceptar
enableDeclineButton
Muestra un botón de rechazo
declineButtonText
"I decline"
Texto del botón de rechazo
cookieName
"CookieConsent"
Nombre de la cookie que guarda la respuesta
Días hasta que caduca la cookie
onAccept / onDecline
Ejecutan tu código cuando el visitante responde
getCookieConsentValue(name)
Lee la respuesta guardada
resetCookieConsentValue()
Borra la respuesta guardada para que la barra vuelva a aparecer
Banner con botón de rechazo
Aceptar carga la analítica; Rechazar no activa nada opcional. La comprobación en la primera carga cubre a los visitantes que vuelven.
Demo en vivo: un banner de consentimiento que bloquea scripts
Sitio web de prueba
Usamos cookies de analítica y publicidad solo si aceptas.
Aceptar todo
Rechazar todo
Elegir
Guardar elección
Analítica
Publicidad
Necesarias (siempre activas)
Qué se cargaría
{c}: script añadido
{c}: bloqueado
Aún no hay elección, así que no se carga nada opcional.
Configuración de cookies
Actualización de Consent Mode enviada
Ninguna todavía.
La demo recuerda tu elección solo en este navegador. No se envía nada a ningún sitio.