# Instalar FlowConsent en Netlify

Instalar FlowConsent en Netlify: pegar el fragmento al inicio del <head> en el código del sitio, o usar Snippet injection si ningún otro script lo precede.

> Canonical: https://www.flowconsent.com/es/doc/install-netlify
> Last updated: 2026-10-01
En Netlify, lo ideal es colocar el fragmento de código de FlowConsent al principio del `<head>`, en el código del sitio, y después volver a desplegar. Netlify ofrece además la **Snippet injection** (**Project configuration → Developer settings → Post processing**), sin tocar el código y sin nuevo despliegue. Su trampa: inserta el fragmento **justo antes de `</head>`**, es decir, después de los scripts que ya están en el `<head>`, y no se aplica a las páginas renderizadas en el servidor.

## 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 del sitio o al panel de Netlify del proyecto.

## Paso 1: copiar el fragmento de código

En **Builder → Despliegue → Integración**, copiar el fragmento de código (pestaña **HTML / No-code**, o **Next.js** para una aplicación Next.js). Tiene dos partes, en este orden:

```html title="Fragmento de código de FlowConsent"
<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>
```

## Paso 2 (recomendado): pegarlo en el código del sitio

El fragmento de código va **justo después de la apertura de `<head>`**, antes de cualquier otro script, en el archivo que genera el `<head>` de todas las páginas:

- **Sitio HTML estático**: cada página HTML, o la plantilla común del generador (Hugo, Eleventy, Jekyll…).
- **Next.js**: `app/layout.tsx` o `pages/_document.tsx`, ver la [guía de Next.js y SPA con React](/es/doc/nextjs-integration).
- **Astro**: el layout base, con `is:inline`, ver [Instalar en Astro](/es/doc/install-astro).
- **React (Vite, Create React App)**: `index.html`, ver [Instalar en React](/es/doc/install-react).

Después, subir el cambio: Netlify reconstruye y publica el sitio. Es el único método que garantiza la posición al principio del `<head>`, y funciona también en las páginas renderizadas en el servidor.

## Alternativa sin código: Snippet injection

Si no es posible modificar el código, Netlify puede inyectar el fragmento en todas las páginas que sirve:

1. En la interfaz de Netlify, ir a **Project configuration → Developer settings → Post processing**.
2. En la sección **Snippet Injection**, seleccionar **Add Snippet**.
3. Elegir la inyección antes de la etiqueta de cierre `</head>`, poner un nombre (por ejemplo `FlowConsent`) y pegar el fragmento de código completo, etiquetas `<script>` incluidas.
4. Seleccionar **Save**.

Según la documentación de Netlify, el fragmento se inyecta de inmediato, sin necesidad de volver a desplegar.

> [!WARNING]
> La Snippet injection coloca el fragmento **al final del `<head>`**, no al principio. Cualquier script de seguimiento presente ya en el `<head>` de las páginas (Google Analytics, Meta Pixel, contenedor de Google Tag Manager…) queda entonces **por encima** de FlowConsent y se dispara antes de la elección del visitante. Este método solo sirve si el `<head>` del sitio no contiene ningún script de seguimiento; de lo contrario, hay que pegar el fragmento en el código (paso 2).

Otros límites documentados por Netlify: la inyección se produce cuando se sirven las páginas y **no funciona** en rutas de proxy ni en rutas gestionadas por funciones. Las páginas renderizadas en el servidor (SSR), que pasan por Netlify Functions, no reciben el fragmento. Para un sitio Next.js, Astro u otro en SSR, la vía es el código.

## Scripts de seguimiento y aplicaciones de una sola página

No debe quedar ningún rastreador escrito directamente en el `<head>`: Google Analytics, Meta Pixel y los demás servicios se declaran en **Builder → Servicios**, y el banner los carga solo tras el consentimiento. Con Google Tag Manager, el fragmento de código va **por encima** del contenedor de GTM, nunca dentro de GTM ([guía de Google Consent Mode](/es/doc/google-consent-mode)).

Si el sitio navega sin recargar la página (React, Next.js, Vue, Astro con `<ClientRouter />`), activar el **modo SPA** en la pestaña **Ajustes** del Builder y volver a desplegar el banner.

## Verificar la instalación

1. Abrir el sitio publicado en una ventana privada: el banner aparece.
2. Ver el código fuente de la página: el fragmento de código aparece antes que cualquier otro script del `<head>`.
3. En la pestaña **Red**, ninguna petición de terceros sale antes de **Aceptar**.
4. Lanzar el [asistente de instalación](/es/doc/setup-wizard) (Builder → Integración): 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, 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`). No configura Netlify por su cuenta.

> Necesito el fragmento de código de mi banner para mi sitio alojado en Netlify y 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

### ¿Snippet injection o código del sitio?

El código del sitio, siempre que sea posible: el fragmento queda al principio del `<head>` y funciona en todas las páginas, SSR incluido. La Snippet injection sirve para un sitio estático cuyo `<head>` no contiene ningún script de seguimiento.

### El banner no aparece en algunas páginas. ¿Por qué?

Probablemente esas páginas las renderiza una función (SSR) o se sirven a través de un proxy: ahí no se aplica la Snippet injection. La solución es colocar el fragmento de código en el layout del framework.

### ¿El fragmento aparece también en las Deploy Previews?

Sí, la Snippet injection se aplica a las páginas servidas por Netlify, previsualizaciones incluidas. Aun así, el asistente de instalación y el escaneo de rechazo deben usarse en el dominio de producción.

### ¿Hay que volver a desplegar tras una Snippet injection?

No, Netlify la aplica de inmediato. En cambio, un cambio en el código exige un nuevo despliegue.