En una aplicación React, el fragmento de código de FlowConsent se pega al principio del <head> del archivo HTML de la aplicación: index.html en la raíz del proyecto con Vite, public/index.html con Create React App, o el componente Layout de app/root.tsx con React Router en modo framework. Bastan dos pasos, y el segundo es obligatorio: activar el modo SPA, porque una aplicación React navega sin recargar la página. La trampa principal es cargar el script desde un componente React o un useEffect: llega demasiado tarde.
Antes de empezar
- Una cuenta en app.flowconsent.com (plan Free gratuito, sin tarjeta de crédito, hasta 25 000 sesiones al mes).
- Un banner creado y desplegado. En el plan Free, el despliegue se hace con la propia cuenta de Cloudflare (guía de Cloudflare); en Pro y Enterprise, con un clic.
- ¿Se trata de Next.js? En ese caso, conviene seguir la guía de Next.js y SPA con React.
Paso 1: pegar el fragmento de código en el HTML de la aplicación
Copiar el fragmento de código desde Builder → Despliegue → Integración, pestaña HTML / No-code. Después, abrir el archivo HTML que actúa como punto de entrada:
- Vite:
index.html, en la raíz del proyecto (no enpublic/). Vite lo trata como el punto de entrada de la aplicación. - Create React App:
public/index.html. Create React App está obsoleto para proyectos nuevos desde febrero de 2025, pero las aplicaciones existentes funcionan igual.
El fragmento de código va justo después de la apertura de <head>, antes de cualquier otro script:
<!doctype html>
<html lang="es">
<head>
<script>
// FlowConsent Loader - COLOCAR ANTES de cualquier otro script en el <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
'ad_storage':'denied',
'analytics_storage':'denied',
'ad_user_data':'denied',
'ad_personalization':'denied',
'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA"></script>
<meta charset="UTF-8" />
<title>Mi aplicación</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>No hay que añadir type="module" a las dos etiquetas de FlowConsent: un script de módulo se ejecuta de forma diferida, y estos scripts deben ejecutarse de inmediato. Después, reconstruir y volver a desplegar la aplicación.
React Router en modo framework
En modo framework (React Router v7), el documento HTML lo genera el componente Layout de app/root.tsx. El fragmento de código va en primer lugar dentro de su <head>, con el stub a través de dangerouslySetInnerHTML:
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<head>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{'ad_storage':'denied','analytics_storage':'denied','ad_user_data':'denied','ad_personalization':'denied','wait_for_update':500});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);`,
}}
/>
{/* FlowConsent CMP */}
<script src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA" />
<meta charSet="utf-8" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}En modo declarativo o data (con Vite), React Router no tiene root.tsx: se usa index.html como arriba.
Paso 2: activar el modo SPA (obligatorio)
Una aplicación React cambia de página con history.pushState, sin recarga. Sin el modo SPA, el banner no vuelve a comprobar el consentimiento en las navegaciones siguientes. En el Builder, abrir la pestaña Ajustes, activar el modo SPA y volver a desplegar el banner. FlowConsent intercepta entonces pushState, replaceState y popstate en cada navegación del lado del cliente.
La trampa: cargar FlowConsent desde un componente
Del mismo modo, Google Analytics o Meta Pixel no deben cargarse desde los componentes: se declaran en Builder → Servicios para que el banner los inyecte solo tras el consentimiento. Para reaccionar a la elección del visitante en el código, basta con escuchar el evento flowconsent:consent (ejemplo en la guía de Next.js y SPA con React). Con Google Tag Manager, el fragmento de código va por encima del contenedor de GTM, nunca dentro (guía de Google Consent Mode).
Verificar la instalación
- Abrir la aplicación publicada en una ventana privada: el banner aparece.
- En la pestaña Red, ninguna petición de terceros sale antes de Aceptar, ni siquiera tras varios cambios de ruta.
- Lanzar el asistente de instalación (Builder → Integración): comprueba que el cargador está presente con el código de licencia correcto y que el stub de Consent Mode precede a cada etiqueta de Google.
- Terminar con un escaneo de rechazo desde la pestaña Conformidad (verificación de conformidad).
Hacerlo desde un agente de IA (MCP)
FlowConsent dispone de un servidor MCP oficial, https://mcp.flowconsent.com, utilizable desde Claude, ChatGPT o cualquier cliente MCP, con conexión OAuth 2.0 a la cuenta de FlowConsent (sin clave de API). El agente obtiene el fragmento de código y las instrucciones de colocación (get_banner_snippet, get_setup_instructions), verifica la instalación con un escaneo real (verify_consent_compliance) y puede programar una vigilancia periódica (monitor_compliance). La modificación de index.html sigue en manos del equipo o de su agente de código.
Necesito el fragmento de código de mi banner para mi aplicación React (Vite), dónde colocarlo y, después, comprobar que está bien instalado en https://misitio.es
Más información: servidor MCP y FlowConsent para agentes de IA.
Preguntas frecuentes
¿Hace falta instalar un paquete npm para React?
No: el banner es un script autónomo que va en el HTML. Un paquete importado en el bundle se ejecutaría demasiado tarde para el bloqueo previo.
¿El modo SPA es realmente obligatorio?
Sí, en cuanto la aplicación usa un enrutador del lado del cliente (React Router, TanStack Router…). Sin él, los scripts inyectados después de la primera página no se vuelven a bloquear en las navegaciones siguientes.
La aplicación está alojada en Vercel o Netlify. ¿Dónde va el fragmento?
Igualmente en index.html (o app/root.tsx). El alojamiento no cambia nada. Ver Vercel y Netlify.
El banner aparece, pero Google Analytics se dispara antes de la elección. ¿Por qué?
Probablemente se carga un script de GA por encima del fragmento de código o desde un componente. Hay que retirarlo y declarar Google Analytics en Builder → Servicios.