print

TRUENDO CMP Integration Guide for Next.js Applications

This guide walks you through the steps to integrate the TRUENDO Consent Management Platform (CMP) into a Next.js application. By following these instructions, you'll ensure that your site correctly loads and initializes the TRUENDO CMP script.

Prerequisites#

  • An active TRUENDO account and access to the TRUENDO dashboard.
  • A Next.js project set up (v13+).
  • Basic familiarity with React, Next.js, and configuring ESLint.

Step 1: Create or Log In to Your TRUENDO Account#

  1. Access the TRUENDO Console:

  2. Create an Account or Log In:

    • New Users: Click on “Create Account” and follow the registration prompts.
    • Existing Users: Enter your credentials and click “Log In.”

Step 2: Retrieve Your Integration Script#

  1. Navigate to Banner Settings:

    • In the TRUENDO Console dashboard, locate the left sidebar.
    • Click on “Banner” to open banner customization and integration options.

  2. Scroll to Integration via Script:

    • Scroll down to the Integration via Script section.

  3. Copy Your Script Snippet:

    <!-- TRUENDO Privacy Center -->
<script
  id="truendoAutoBlock"
  type="text/javascript"
  src="https://cdn-geo.priv.center/YOUR-SITE-ID/?id=YOUR-SITE-ID"
></script>
<!-- End TRUENDO Privacy Center -->

    Note: YOUR-SITE-ID is just a placeholder. The script you copy from the TRUENDO dashboard will contain your actual site-id.

Step 3: Update ESLint Configuration Update ESLint Configuration#

Next.js flags synchronous <script> tags in the <head> by default. To disable this warning:

  1. Open (or create) your ESLint configuration file (e.g., .eslintrc.js or .eslintrc.json).
  2. Add the following rule:
module.exports = {
  // ... existing config ...
  rules: {
    '@next/next/no-sync-scripts': 'off',
    // ... other rules ...
  },
};

This turns off the no-sync-scripts warning, allowing you to include the CMP script.

Step 4: Locate the Root layout.tsx File#

In a Next.js App Router project, the root layout file is typically at:

app/layout.tsx

Open this file in your code editor. This is where you'll insert the CMP script.

For Projects Using the Pages Router

If your Next.js project uses the Pages Router instead of the App Router, follow these steps:

  1. Create or open pages/_document.tsx in your project root.

  2. Extend Next.js Document:

    import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en" suppressHydrationWarning={true}>
        <Head>
          <script
            suppressHydrationWarning={true}
            id="truendoAutoBlock"
            type="text/javascript"
            src="https://cdn-geo.priv.center/YOUR-SITE-ID/?id=YOUR-SITE-ID"
          />
          {/ other head elements /}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

  3. Ensure that YOUR-SITE-ID is not present in the script but rather your actual Site ID from your TRUENDO Console is present.

With either router configured, you can now proceed to Step 5 for inserting the CMP script in the App Router (or skip if you completed it here in Pages Router).

Step 5: Insert the TRUENDO Script into <head> Insert the TRUENDO Script into <head>#

  1. In app/layout.tsx, locate the <head> section inside the returned JSX:

    export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/ ... other head elements ... /}
      </head>
      <body>{children}</body>
    </html>
  );
}

  2. Paste the TRUENDO <script> snippet as the first element inside <head>:

    <head>
  <script
    id="truendoAutoBlock"
    type="text/javascript"
    src="https://cdn-geo.priv.center/YOUR-SITE-UD/?id=YOUR-REGION-ID"
  />
  {/ other head elements /}
</head>

Step 6: Add suppressHydrationWarning Attributes#

To prevent React hydration mismatches caused by this external script, you need to suppress warnings both on the <html> tag and the script itself.

  1. Update the opening <html> tag to include suppressHydrationWarning={true}:

    <html lang={locale} suppressHydrationWarning={true}>

  2. Add suppressHydrationWarning={true} to the <script> tag:

    <script
  suppressHydrationWarning={true}
  id="truendoAutoBlock"
  type="text/javascript"
  src="https://cdn-geo.priv.center/YOUR-SITE-UD/?id=YOUR-REGION-ID"
/>

Final Implementation Example#

Your root layout.tsx should resemble the following:

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale } = params;

  return (
    <html lang={locale} suppressHydrationWarning={true}>
      <head>
        <script
          suppressHydrationWarning={true}
          id="truendoAutoBlock"
          type="text/javascript"
          src="https://cdn-geo.priv.center/YOUR-SITE-UD/?id=YOUR-REGION-ID"
        />
        {/ other scripts and meta tags... /}
      </head>
      <body>{children}</body>
    </html>
  );
}

Verification#

  1. Deploy your Next.js application (e.g., npm run build && npm run start).
  2. Open your site in the browser and inspect the <head> to confirm the CMP script is present.
  3. Check the console for any hydration warnings or errors.
  4. Trigger a consent prompt to ensure the CMP loads correctly and displays as expected.

Troubleshooting#

  • Script not found: Verify your YOUR-SITE-UD and YOUR-REGION-ID values in the script src.
  • Hydration warnings persist: Ensure both suppressHydrationWarning attributes are present.
  • ESLint errors: Confirm that the @next/next/no-sync-scripts rule is disabled.

That’s it! Your Next.js application is now integrated with the TRUENDO CMP.

×