Ir al contenido
CookyCMP Docs

Next.js / React

En Next.js, el banner se agrega con el componente Script de next/script en el layout raíz, para que cargue en todas las páginas.

Tu Site ID real está en el dashboard de CookyCMP (sección Sitios → detalle del sitio).

App Router

Sección titulada «App Router»

En app/layout.tsx:

import Script from 'next/script';


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Script
          src="https://cdn.cookycmp.com/banner.js"
          data-site-id="TU-SITE-ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Sección titulada «Pages Router»

En pages/_app.tsx:

import Script from 'next/script';
import type { AppProps } from 'next/app';


export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://cdn.cookycmp.com/banner.js"
        data-site-id="TU-SITE-ID"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Verificá que el componente esté en el layout raíz (no en una página individual) para que el banner cargue en todo el sitio.

Verificación

Sección titulada «Verificación»

Abrí tu sitio en una ventana de incógnito: el banner debe aparecer en la primera visita.