# Integración con Webflow: instale FlowConsent correctamente

Instale FlowConsent en Webflow: pegue el fragmento de código en Site settings → Custom code, publique y elimine el Measurement ID de GA de Apps & Integrations.

> Canonical: https://www.flowconsent.com/es/doc/webflow-integration
> Last updated: 2026-07-30
Instalar FlowConsent en Webflow son dos pasos: pegue su fragmento de código en **Site settings → Custom code → Head code** y publique, después **elimine cualquier Measurement ID de Google Analytics de Site settings → Apps & Integrations**. Ese segundo paso no es opcional: Webflow inyecta su integración nativa de GA por encima de su custom code, donde ninguna herramienta de consentimiento puede bloquearla.

## Paso 1: Pegue el fragmento de código en Head code

Copie su fragmento de código desde **Builder → Despliegue → Integración**: una pestaña **Webflow** lo genera en su lugar. Tiene dos partes, y su orden importa:

```html title="Site settings → Custom code → Head code"
<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>
```

El primer bloque es el **stub de Consent Mode**: registra valores por defecto `denied` para las cuatro señales de consentimiento de Google en el mismo momento del parseo del HTML. El segundo carga el banner. El stub va primero porque el script del banner se carga de forma asíncrona: el stub, inline, siempre gana la carrera a cualquier etiqueta de Google cargada después.

En Webflow: **Site settings → Custom code → Head code**, pegue el fragmento de código al principio del todo, guarde y **publique** el sitio. El custom code solo se sirve al publicar: la vista previa del Designer no lo ejecuta.

## Paso 2: Elimine el Measurement ID de GA de Apps & Integrations

> [!WARNING]
> Si hay un Measurement ID de Google Analytics configurado en **Site settings → Apps & Integrations**, Webflow inyecta su propio cargador de GA **por encima de su custom code**. Su `gtag('config')` entra entonces en el dataLayer antes que sus valores por defecto de consentimiento, Google lo procesa sin ninguna restricción y las cookies de analítica se colocan haga lo que haga el banner. **Ninguna CMP puede ganar esta carrera**: la única solución es eliminar el Measurement ID de ese panel y declarar Google Analytics en **Builder → Servicios**, para que el banner solo lo inyecte tras el consentimiento.

No es teórico: los valores por defecto de Consent Mode solo se aplican a las etiquetas que entran en el dataLayer **después** de ellos. Un `gtag('config', 'G-XXXX')` encolado antes se procesa como si el rechazo nunca hubiera existido.

## Cómo detecta FlowConsent la carrera perdida

No tiene que descubrirlo auditando cookies a mano. Al arrancar, el banner inspecciona el dataLayer: si una entrada `gtag('config')` precede a los valores por defecto de consentimiento, registra un error explícito en la consola del navegador y envía un evento `ConsentDefaultRaceLost` a la telemetría de FlowConsent, con los identificadores de las etiquetas afectadas. Si ve ese error, hay una etiqueta inyectada por encima del fragmento de código: en Webflow, casi siempre es el panel Apps & Integrations.

## Verifique la instalación

El **asistente de instalación** (Builder → Integración) comprueba la página publicada en su lugar, en el orden en que las cosas fallan de verdad:

1. el cargador de FlowConsent está presente, con **su** código de licencia;
2. el stub de Consent Mode está presente;
3. el stub **precede** a toda etiqueta de Google, y señala específicamente una etiqueta inyectada por los ajustes del sitio de Webflow.

> [!TIP]
> Termine con un escaneo de rechazo desde la pestaña **Conformidad**: carga su sitio publicado en un navegador real, rechaza el consentimiento y confirma que nada se dispara. Esa es la prueba de que la instalación es correcta, no el hecho de que el banner sea visible.

## Hacerlo desde un agente de IA (MCP)

FlowConsent cuenta con 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 y las instrucciones de colocación (herramientas `get_banner_snippet` y `get_setup_instructions`), verifica la instalación con un escaneo real (`verify_consent_compliance`) y puede programar una vigilancia periódica (`monitor_compliance`). No modifica el sitio Webflow: pegar el fragmento sigue siendo un paso manual.

Ejemplo de petición: «Dame el fragmento de código de mi banner para mi sitio Webflow y comprueba que está bien instalado en https://misitio.es».

Ver la [guía del servidor MCP](/es/doc/mcp-server) y la página [FlowConsent MCP](/es/mcp).