Skip to main content
This page shows the simplest way to add CookieChimp to a Next.js app and check whether a specific service (e.g., “Google Analytics” in the “analytics” category) has consent to take actions.
Important Setup Notes: Before following this guide, ensure you have your correct Account ID from your CookieChimp dashboard. If you’re testing on localhost, make sure to add localhost to the Additional Domains in your Account Settings > General, otherwise the banner will not show during local development.
Looking for a complete example? Check out our Next.js example implementation on GitHub for a working reference.

​
What do I need before starting?

  • Next.js (App Router) project (app/ directory).
  • Your CookieChimp Account ID (replace YOUR_ACCOUNT_ID below).
  • If testing locally: localhost added to Additional Domains in Account Settings > General.

​
What will this guide cover?

  1. Load the CookieChimp script first in <head>
  2. Add the required trigger container
  3. Listen for consent and log if a service is allowed

​
How do I load the CookieChimp script?

Use Next.js <Script> with strategy="beforeInteractive" so CookieChimp runs before hydration. 
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* CookieChimp script MUST load first */}
        <Script
          src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>
        {/* Required container for privacy trigger */}
        <div id="cookiechimp-container" />
        {children}
      </body>
    </html>
  );
}
Replace YOUR_ACCOUNT_ID with your actual CookieChimp Account ID from your dashboard.
If you need to take actions based on user consent (such as loading analytics scripts, tracking pixels, or other third-party services), this is where you’ll implement that logic. If you’re using Google Tag Manager, you can implement the GTM setup following our Google Tag Manager integration guide for the same approach. This client component:
  • Checks if a single service is allowed (e.g., “Google Analytics” in “analytics”)
  • Logs the result on initial load and on user updates
// app/consent-logger.tsx
"use client";
import { useEffect } from "react";

export default function ConsentLogger() {
  useEffect(() => {
    function logConsent() {
      // ✅ Service-level check
      // @ts-ignore
      const allowed = window.CookieConsent?.acceptedService?.("Google Analytics", "analytics");
      if (allowed) {
        console.log("✅ Google Analytics allowed");
      } else {
        console.log("❌ Google Analytics blocked");
      }
    }

    // Run now + on changes
    logConsent();
    window.addEventListener("cc:onConsented", logConsent);
    window.addEventListener("cc:onUpdate", logConsent);

    return () => {
      window.removeEventListener("cc:onConsented", logConsent);
      window.removeEventListener("cc:onUpdate", logConsent);
    };
  }, []);

  return null;
}
Replace "Google Analytics" and "analytics" with the exact service and category names you configured in CookieChimp.

​
How do I use the consent logger on a page?

Drop the logger onto any page (or mount once in app/layout.tsx if you prefer a global listener). 
// app/page.tsx
"use client";
import ConsentLogger from "./consent-logger";

export default function HomePage() {
  return (
    <div>
      <ConsentLogger />
      <h1>Welcome to My Next.js App</h1>
      <p>Check the console to see consent status logs.</p>
    </div>
  );
}

​
How do I verify it’s working?

  1. Start your app and open the homepage.
  2. Open DevTools → Console.
  3. Interact with the Cookie banner (Accept / Deny / Update preferences).
  4. You should see logs:
    • ✅ Google Analytics allowed
    • ❌ Google Analytics blocked

​
What else should I know?

  • Service vs Category: use acceptedService("Service", "Category") for granular control.
  • Already Consented Users: the logger runs once on mount to catch prior consent, and again on cc:onConsented / cc:onUpdate.
  • Production: replace console.log with your real actions (e.g., loading pixels/SDKs) only after consent.

​
How do I set this up with Pages Router?

If you’re on the Pages Router, place the <Script> tag in pages/_document.tsx within <Head>, keep the <div id="cookiechimp-container" /> in pages/_app.tsx, and use the same ConsentLogger.

​
Pages Router Example

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://cookiechimp.com/widget/YOUR_ACCOUNT_ID.js"
          strategy="beforeInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

// pages/_app.tsx
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <div id="cookiechimp-container" />
      <Component {...pageProps} />
    </>
  )
}

​
Where can I learn more?

For more advanced integration patterns, including category-level consent checking and custom consent buttons, see our JavaScript & SPA guide and Callbacks & Events documentation.