Instalar FlowConsent en un sitio a medida (HTML)

En un sitio desarrollado a medida, el fragmento de código de FlowConsent se pega una sola vez, al principio del <head> de la plantilla que comparten todas las páginas (layout, cabecera incluida, plantilla base), antes que cualquier otro script. La instalación son dos pasos: copiar el fragmento y colocarlo en esa plantilla común. Los dos problemas habituales: una Content-Security-Policy que bloquea el banner y una navegación del lado del cliente que requiere el Modo SPA.

Antes de empezar

• Una cuenta en app.flowconsent.com (el plan Free es gratuito, sin tarjeta de crédito y cubre hasta 25.000 sesiones al mes).
• Un banner creado y desplegado. En el plan Free, el despliegue pasa por su propia cuenta de Cloudflare (guía de Cloudflare); en Pro y Enterprise se hace con un clic.
• Acceso al código fuente del sitio y a su proceso de publicación.

Paso 1: Copie el fragmento de código

Abra Builder → Despliegue → Integración y copie el fragmento 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.

<head>
  <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>
 
  <meta charset="utf-8">
  <!-- el resto de etiquetas y scripts van después -->
</head>

Cualquier script colocado encima de este fragmento escapa al bloqueo previo, así que debe ir antes de Google Analytics, Meta Pixel, Google Tag Manager y cualquier otro rastreador.

Paso 2: Péguelo una vez en la plantilla común

Busque el archivo que genera el <head> de todas las páginas. Según la tecnología:

• Sitio HTML estático: sin plantilla, cada archivo .html tiene su propio <head>. Pegue el fragmento en cada uno (basta con buscar y reemplazar <head>) o use una inclusión del lado del servidor si su alojamiento lo permite.
• PHP: la cabecera común, a menudo header.php, que cada página incluye con include o require.
• Laravel: el layout de Blade, por ejemplo resources/views/layouts/app.blade.php.
• Django: la plantilla base (a menudo templates/base.html) que las páginas extienden con {% extends "base.html" %}.
• Ruby on Rails: app/views/layouts/application.html.erb.
• Hugo: la plantilla base layouts/baseof.html (layouts/_default/baseof.html en versiones anteriores a Hugo 0.146) o el partial head.html al que llama. Con un tema, copie ese archivo en la carpeta layouts/ del proyecto en lugar de modificar el tema.
• Jekyll: el layout _layouts/default.html, o _includes/head.html con un tema como Minima. Para sobrescribir un archivo del tema, cópielo en la misma ruta dentro de su sitio.
• Eleventy: el layout base guardado en _includes/ (por ejemplo _includes/base.njk), que se elige con la clave layout del front matter.

El fragmento es HTML estándar: ningún motor de plantillas necesita escaparlo. Si el sitio tiene varios layouts raíz, repita el paso en cada uno. Después, vuelva a generar o a desplegar el sitio.

No pegue los rastreadores (Google Analytics, Meta Pixel…) directamente en la plantilla: declárelos en Builder → Servicios y el banner solo los cargará tras el consentimiento. Para Google Tag Manager, consulte la guía específica.

Content-Security-Policy y navegación del lado del cliente

Content-Security-Policy: script-src 'self' 'nonce-RANDOM' https://*.consent.flowconsent.com; connect-src 'self' https://*.consent.flowconsent.com

Añada entonces nonce="RANDOM" a las dos etiquetas <script> del fragmento, con un valor generado en cada respuesta. Los servicios que el banner carga tras el consentimiento también deben estar autorizados, igual que sin FlowConsent. Si algo se bloquea, la consola del navegador indica la directiva y el dominio rechazados.

Verificar la instalación

1. Abra el sitio publicado en una ventana privada: el banner aparece.
2. En la pestaña Red, no sale ninguna petición a terceros antes de hacer clic en Aceptar. La Consola no muestra ninguna infracción de CSP.
3. Lance el asistente de instalación (Builder → Integración): revisa 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).
4. Termine con un escaneo de rechazo desde la pestaña Conformidad (verificación de conformidad).

Hágalo desde su agente de IA (MCP)

FlowConsent tiene un servidor MCP oficial, https://mcp.flowconsent.com, que funciona con Claude, ChatGPT o cualquier cliente MCP. La conexión se hace por OAuth 2.0 con su cuenta de FlowConsent, sin clave de API. Su 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 supervisión recurrente (monitor_compliance). La plantilla la modifica usted o su agente de código: el servidor MCP aporta el fragmento, las instrucciones y la verificación.

Ejemplo de petición:

Deme el fragmento de código de mi banner para mi sitio HTML a medida, dígame dónde colocarlo en mi plantilla y compruebe que está bien instalado en https://misitio.es

Más información: servidor MCP y FlowConsent para agentes de IA.

Preguntas frecuentes

¿Hay que pegar el fragmento en cada página?

Debe estar presente en cada página, pero solo lo pega una vez si las páginas comparten plantilla. Únicamente un sitio en HTML puro sin plantilla obliga a añadirlo archivo por archivo.

¿Puedo colocarlo al final del <body>?

No. El stub de Consent Mode debe ejecutarse antes que cualquier rastreador: al final de la página, los scripts situados más arriba ya se habrían ejecutado. Colóquelo al principio del <head>.

El banner no aparece: ¿por dónde empiezo?

Abra la consola del navegador. Un error de CSP indica un dominio que hay que autorizar. Si no, compruebe que el fragmento está en el HTML que se sirve realmente (código fuente de la página), con su código de licencia.

Mi sitio se genera de forma estática: ¿funciona el banner sin servidor?

Sí. El fragmento se ejecuta en el navegador, así que funciona en cualquier alojamiento de archivos estáticos.