# Instalar FlowConsent en Astro

Instalar FlowConsent en Astro: pegar el fragmento de código al inicio del <head> del layout base con is:inline y activar el modo SPA si se usa ClientRouter.

> Canonical: https://www.flowconsent.com/es/doc/install-astro
> Last updated: 2026-10-01
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](https://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](/es/doc/cloudflare-deployment)); 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 title="src/layouts/Layout.astro"
<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

> [!WARNING]
> El componente `<ClientRouter />` de Astro (importado desde `astro:transitions`, y llamado `<ViewTransitions />` antes de Astro 5) sustituye la navegación clásica por un enrutador del lado del cliente: las páginas cambian **sin recarga completa**, mediante `history.pushState`. Por tanto, el banner no se vuelve a ejecutar en cada página. Activar el **modo SPA** en la pestaña **Ajustes** del Builder y volver a desplegar el banner: el consentimiento se comprueba de nuevo en cada navegación del lado del cliente.

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](/es/doc/nextjs-integration).

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](/es/doc/google-consent-mode).

## Verificar la instalación

1. Abrir el sitio publicado en una ventana privada: el banner aparece.
2. 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**.
3. Con `<ClientRouter />`, navegar por varias páginas y comprobar que tampoco se dispara nada.
4. Lanzar el [asistente de instalación](/es/doc/setup-wizard) (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).
5. Terminar con un escaneo de rechazo desde la pestaña **Conformidad** ([verificación de conformidad](/es/doc/compliance-verification)).

## 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](/es/doc/mcp-server) y [FlowConsent para agentes de IA](/es/mcp).

## 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.
