Integración con Next.js y SPA React

El banner de FlowConsent es un único <script> autónomo: el mismo fragmento funciona en Next.js, Nuxt, SvelteKit y cualquier app de código personalizado, igual que en Webflow, Framer o WordPress. Hay un paso adicional para las apps de página única: activar el Modo SPA para que el consentimiento se vuelva a comprobar en las navegaciones del lado del cliente.

Por qué una SPA necesita un paso más

En un sitio multipágina clásico, cada navegación recarga la página por completo, por lo que el banner se vuelve a ejecutar y vuelve a bloquear los scripts de seguimiento en cada página. Una Single Page Application (Next.js, React, Vue…) navega con history.pushState — sin recargar la página — así que sin el Modo SPA, los scripts inyectados tras la primera página no se volverían a bloquear en las rutas siguientes.

El Modo SPA engancha pushState, replaceState y popstate para volver a verificar el consentimiento en cada navegación del lado del cliente.

Paso 1 — Añadir el script

El banner ya incluye los valores predeterminados de Google Consent Mode v2 dentro del bundle, por lo que el fragmento se mantiene mínimo: basta con cargar el script lo antes posible.

App Router (`app/layout.tsx`)

import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {/* FlowConsent CMP */}
        <Script
          src="https://TU-WORKSPACE.consent.flowconsent.com/cookie-manager.js?code=TU_CODIGO_DE_LICENCIA"
          strategy="beforeInteractive"
        />
      </body>
    </html>
  )
}

strategy="beforeInteractive" hace que Next.js cargue el script antes de la hidratación, de modo que el bloqueo previo esté activo antes de que se dispare cualquier seguimiento.

Pages Router (`pages/_document.tsx`)

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        {/* FlowConsent CMP — colócalo primero en <Head> */}
        <script src="https://TU-WORKSPACE.consent.flowconsent.com/cookie-manager.js?code=TU_CODIGO_DE_LICENCIA" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Encontrarás tu fragmento exacto (con tu URL de despliegue y tu código de licencia) en Builder → Despliegue → Integración, donde una pestaña Next.js genera este código por ti.

Paso 2 — Activar el Modo SPA

En el Builder, abre la pestaña Ajustes y activa el Modo SPA. Vuelve a desplegar tu banner para aplicar el cambio.

Con el Modo SPA activado, FlowConsent hará lo siguiente:

Interceptar history.pushState y history.replaceState
Escuchar los eventos popstate
Volver a bloquear los scripts de seguimiento no cubiertos en cada navegación
Emitir un evento flowconsent:navigation al que puedes suscribirte

Paso 3 — Deja que FlowConsent gestione los scripts de seguimiento

No cargues los scripts de seguimiento (Google Analytics, Meta Pixel…) con next/script. En su lugar, decláralos en Builder → Services y deja que FlowConsent los inyecte una vez otorgado el consentimiento.

// Evitar — script de seguimiento fuera del control de FlowConsent
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX" strategy="afterInteractive" />
 
// Preferir — configura Google Analytics en Builder → Services

Opcional — Reaccionar al consentimiento en tu app

FlowConsent emite eventos a los que puedes suscribirte:

import { useEffect } from 'react'
 
export function useConsentListener() {
  useEffect(() => {
    const onConsent = (event) => {
      const { preferences } = event.detail
      if (preferences?.analytics) {
        // consentimiento de analytics otorgado — inicializa tu propio analytics
      }
    }
    window.addEventListener('flowconsent:consent', onConsent)
    return () => window.removeEventListener('flowconsent:consent', onConsent)
  }, [])
}

Lista de verificación

El script está en app/layout.tsx (App Router) o pages/_document.tsx (Pages Router)
El App Router usa strategy="beforeInteractive"
El Modo SPA está activado en el Builder y el banner está redesplegado
Sin next/script para los scripts de seguimiento — están configurados en Services
El banner aparece en la primera carga
Sin peticiones de seguimiento en la pestaña Red antes de hacer clic en Aceptar
El consentimiento persiste a través de las navegaciones del lado del cliente