Consentimiento de cookies para React,
una etiqueta y un componente

Una single-page app en React carga su analítica en main.tsx antes de que exista ninguna UI. Un componente de banner añadido después muestra una elección, pero no puede deshacer lo que ya se ejecutó.

La norma es la misma en toda la UE y en el Reino Unido: nada más allá de lo estrictamente necesario puede almacenarse en el dispositivo de un visitante ni leerse de él antes de que haya dado su consentimiento. Es el artículo 5(3) de la Directiva ePrivacy, y ese consentimiento debe cumplir la definición del RGPD: libre, específico, informado e inequívoco, con un rechazo tan fácil como la aceptación. El Reino Unido mantiene la misma norma en PECR, con exenciones limitadas para estadísticas de bajo riesgo desde el 5 de febrero de 2026. California y las demás leyes estatales de EE. UU. funcionan al revés: sin opt-in, pero con un enlace de opt-out y soporte para la señal Global Privacy Control.

De ahí se derivan tres cosas para un sitio web. Los scripts de analítica, publicidad y redes sociales tienen que esperar una decisión. La decisión tiene que registrarse de forma que puedas demostrarla después, porque el artículo 7(1) pone la carga de la prueba sobre ti. Y retirar el consentimiento tiene que ser tan fácil como darlo, lo que exige un control que vuelva a abrir el banner en cada página. Un banner que muestra dos botones y carga Google Analytics de todos modos suspende la primera prueba, y ese es justo el fallo que las autoridades están sancionando, desde las decisiones de la CNIL contra Google y SHEIN hasta las inspecciones de las autoridades neerlandesa y belga.

Una SPA en React tiene un solo archivo HTML, y ahí es donde tiene que empezar el consentimiento. El runtime va en index.html como primer script del head, antes del bundle de Vite o Webpack. Instala su interceptor de forma síncrona, antes incluso de descargar tu configuración, así que todo lo que el bundle intente inyectar después queda atrapado.

Dentro del árbol tienes dos herramientas. ConsentGate renderiza sus hijos solo cuando una categoría está concedida y muestra tu alternativa en caso contrario, que es la forma correcta de montar un widget de chat, un vídeo incrustado o un proveedor de analítica. La API del runtime en window, envuelta por @cookiecrumbs/react como hook, le dice a cualquier componente el estado actual, el régimen, el idioma y el id de consentimiento, y le da open() para reabrir el banner desde un enlace del pie.

Patrones de React populares que hacen tropezar: un proveedor de analítica en la cima del árbol que se dispara al montar, un router que envía páginas vistas en cada navegación y un useEffect que inyecta un píxel. Cada uno va dentro de un gate o comprueba isGranted("analytics") antes de hacer nada. El escaneo de tu sitio desplegado muestra cuáles siguen disparándose antes del consentimiento, con el script que lo hizo.

Las apps React que usan Google Ads suelen añadir gtag.js en index.html. Déjalo ahí, debajo del runtime, y los valores por defecto de Consent Mode ya están en «denied» cuando carga.

Google Consent Mode v2 es la capa de señales entre el banner y las etiquetas de Google. Antes de que se ejecute cualquier etiqueta, siete señales (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) se fijan en «denied» para los visitantes del EEE, el Reino Unido y Suiza. En cuanto alguien elige, el runtime las actualiza y las etiquetas de Google se ajustan. Desde el 15 de junio de 2026 Google usa ad_storage como señal determinante para los datos de Ads, así que acertar con el valor por defecto importa más que antes.

CookieCrumbs fija los valores por defecto de forma síncrona, antes que cualquier gestor de etiquetas, los actualiza con cada decisión e incluye una plantilla de Google Tag Manager para que los activadores de consentimiento existan sin listeners escritos a mano. En modo avanzado, los pings sin cookies de Google mantienen las conversiones modeladas para los visitantes que dijeron que no. Lo que no hace es fingir ser una CMP certificada por Google: para AdSense, Ad Manager o AdMob en el EEE sigues necesitando una con IAB TCF, y CookieCrumbs hoy no lo es.