En Astro, el fragmento de código de FlowConsent se pega al principio del <head> del layout base (a menudo src/layouts/Layout.astro), con la directiva is:inline en cada etiqueta <script> para que Astro no las procese. La instalación consta de dos pasos, más un tercero si el sitio usa View Transitions (<ClientRouter />): en ese caso la navegación se hace sin recargar la página y hay que activar el modo SPA.
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.
- Acceso al código fuente del proyecto Astro.
Paso 1: copiar el fragmento de código
En Builder → Despliegue → Integración, copiar el fragmento de código de la pestaña HTML / No-code. Tiene dos partes, en este orden: el stub de Google Consent Mode v2 (valores denied por defecto) y el cargador del banner.
Paso 2: pegarlo en el layout base con is:inline
Abrir el componente de layout que genera el <html> y el <head> de todas las páginas. Los proyectos Astro suelen guardar los layouts en src/layouts/, aunque no es obligatorio: hay que localizar el archivo que comparten las páginas. El fragmento de código va justo después de la apertura de <head>, antes de cualquier otro script, con is:inline en las dos etiquetas <script>:
<html lang="es">
<head>
<script is:inline>
// 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 is:inline src="https://SU-CODIGO-LICENCIA.consent.flowconsent.com/cookie-manager.js?code=SU_CODIGO_LICENCIA"></script>
<meta charset="utf-8" />
<title>{title}</title>
<!-- las demás etiquetas y scripts van después -->
</head>
<body>
<slot />
</body>
</html>¿Por qué is:inline? Por defecto, Astro procesa las etiquetas <script>: las transforma, las agrupa y las mueve. Con is:inline, el script se renderiza en el HTML exactamente tal como está escrito, en el lugar elegido. Es imprescindible aquí: el stub de Consent Mode debe ejecutarse de inmediato, al principio de la página, antes de cualquier etiqueta de seguimiento.
Si no todas las páginas usan el mismo layout, se repite la operación en cada layout raíz. Después, reconstruir y volver a desplegar el sitio.
Paso 3: activar el modo SPA si se usa ClientRouter
Durante una navegación, Astro conserva los scripts del <head> que también existen en la nueva página: el fragmento de código, idéntico en todas las páginas, permanece sin volver a ejecutarse. No conviene añadir data-astro-rerun a sus etiquetas. El modo SPA se explica en detalle en la guía de Next.js y SPA con React.
Sin <ClientRouter />, un sitio Astro es un sitio multipágina clásico: cada clic recarga la página y el modo SPA no es necesario.
Los scripts de seguimiento se declaran en Servicios
No hay que pegar Google Analytics, Meta Pixel ni otros rastreadores directamente en el layout: se dispararían antes de la elección del visitante. Se declaran en Builder → Servicios y el banner los carga solo tras el consentimiento. Con Google Tag Manager, FlowConsent no se carga desde GTM (llegaría demasiado tarde): el fragmento de código va por encima del contenedor de GTM, en el mismo <head>. Detalles en la guía de Google Consent Mode.
Verificar la instalación
- Abrir el sitio publicado en una ventana privada: el banner aparece.
- En la pestaña Red de las herramientas de desarrollo, ninguna petición a un servicio de terceros sale antes de hacer clic en Aceptar.
- Con
<ClientRouter />, navegar por varias páginas y comprobar que tampoco se dispara nada. - Lanzar el asistente de instalación (Builder → Integración): comprueba la página publicada (cargador presente con el código de licencia correcto, stub de Consent Mode presente y colocado antes de 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. La conexión se hace por OAuth 2.0 con 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 edición del layout corre a cargo del equipo o de su agente de código: el servidor MCP aporta el fragmento, las instrucciones y la verificación.
Ejemplo de petición:
Necesito el fragmento de código de mi banner para mi sitio Astro, dónde colocarlo en el layout 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
¿Por qué deja de funcionar el banner tras una navegación?
Lo más probable es que el sitio use <ClientRouter /> y la página no se recargue. Hay que activar el modo SPA en Builder → Ajustes, volver a desplegar el banner y probar de nuevo en una ventana privada.
¿Se puede usar un <script> normal sin is:inline?
No. Sin is:inline, Astro procesa el script y ya no garantiza que quede al principio del <head> ni que se ejecute de inmediato. El bloqueo previo exige que el fragmento de código se ejecute antes que cualquier rastreador.
¿Hace falta un adaptador o una integración de Astro concreta?
No. El fragmento de código es HTML estándar: funciona en modo estático y con renderizado en servidor, sea cual sea el alojamiento (Vercel, Netlify, Cloudflare…).
El sitio Astro usa islas de React o Vue. ¿Cambia algo?
No, mientras la navegación entre páginas recargue la página. Solo <ClientRouter /> exige el modo SPA. Las islas interactivas no necesitan cargar FlowConsent por su cuenta.