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 (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 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:
<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.tsxopages/_document.tsx, ver la guía de Next.js y SPA con React. - Astro: el layout base, con
is:inline, ver Instalar en Astro. - React (Vite, Create React App):
index.html, ver Instalar en 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:
- En la interfaz de Netlify, ir a Project configuration → Developer settings → Post processing.
- En la sección Snippet Injection, seleccionar Add Snippet.
- Elegir la inyección antes de la etiqueta de cierre
</head>, poner un nombre (por ejemploFlowConsent) y pegar el fragmento de código completo, etiquetas<script>incluidas. - Seleccionar Save.
Según la documentación de Netlify, el fragmento se inyecta de inmediato, sin necesidad de volver a desplegar.
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).
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
- Abrir el sitio publicado en una ventana privada: el banner aparece.
- Ver el código fuente de la página: el fragmento de código aparece antes que cualquier otro script del
<head>. - En la pestaña Red, ninguna petición de terceros sale antes de Aceptar.
- Lanzar el asistente de instalación (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.
- 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). 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 y FlowConsent para agentes de IA.
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.