In Next.js App Router einbauen

Vor dem Start

1. Erstelle Konto und Workspace und aktiviere einen Plan. Konto erstellen
2. Füge die Site hinzu, erlaube jeden exakten Host und konfiguriere Richtlinie und Kategorien.
3. Öffne Sites → deine Site → Installation. Ersetze unten die Site-Key-Markierung durch den dort angezeigten öffentlichen Key. Dashboard öffnen

Setze jeden Teil an die richtige Stelle

Nutze app/layout.tsx und app/MayicookiesProvider.tsx. Der Provider verwendet 'use client'.

1. Rendere den Default-Denied-Bootstrap mit next/script beforeInteractive im Root-Layout.
2. Das Server-Layout bleibt eine Server-Komponente. Nur Provider und Einstellungs-Schaltfläche benötigen Client-Verhalten.

npm install @supaapps/mayicookies

<script>
window.dataLayer = window.dataLayer || [];
window.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();
window.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {
  window.__mayicookiesConsentModeListeners.add(listener);
  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };
};
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',
  analytics_storage: 'denied', functionality_storage: 'denied',
  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500
});
</script>

'use client';
import { useEffect } from 'react';
import { Mayicookies } from '@supaapps/mayicookies';

export function MayicookiesProvider() {
  useEffect(() => {
    void Mayicookies.init({
      siteKey: "REPLACE_WITH_YOUR_PUBLIC_SITE_KEY",
      apiUrl: "https://api.mayicookies.com/api",
      mode: 'auto',
      locale: 'auto',
      autoBlock: true,
      googleConsentMode: { waitForUpdate: 500 },
    });
  }, []);
  return null;
}

// app/layout.tsx
import type { ReactNode } from 'react';
import Script from 'next/script';
import { MayicookiesProvider } from './MayicookiesProvider';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script id="mayicookies-consent-defaults" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: "window.dataLayer = window.dataLayer || [];\nwindow.__mayicookiesConsentModeListeners = window.__mayicookiesConsentModeListeners || new Set();\nwindow.mayicookiesAddConsentModeListener = window.mayicookiesAddConsentModeListener || function(listener) {\n  window.__mayicookiesConsentModeListeners.add(listener);\n  return function() { window.__mayicookiesConsentModeListeners.delete(listener); };\n};\nfunction gtag(){dataLayer.push(arguments);}\ngtag('consent', 'default', {\n  ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied',\n  analytics_storage: 'denied', functionality_storage: 'denied',\n  personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500\n});" }} />
      </head>
      <body>
        <MayicookiesProvider />
        {children}
      </body>
    </html>
  );
}

Basic / Advanced Consent Mode

Basic Mode blockiert Google-Tags bis zur passenden Zustimmung. Advanced Mode lädt Tags mit verweigerten Standardwerten und kann cookielose Pings senden. Entscheide bewusst: Verweigerter Speicher ist nicht gleich keine Netzwerkanfrage. Das GTM-Template übermittelt Entscheidungen; deine Tag-Prüfungen steuern das Auslösen.

Andere optionale Scripts

<script type="text/plain" data-mayicookies-category="analytics" src="https://YOUR_ANALYTICS_HOST/script.js"></script>

Ersetze die Anbieter-URL und nutze einen Kategorie-Key deiner Site. Lasse keine zweite aktive Kopie des Anbieter-Scripts an anderer Stelle stehen.

Halte Cookie-Einstellungen erreichbar

Setze dieses Element in einen gemeinsamen Footer oder auf die Datenschutzseite, damit Besucher ihre Auswahl ändern oder widerrufen können.

'use client';
import { Mayicookies } from '@supaapps/mayicookies';

export function CookieSettings() {
  return <button type="button" onClick={() => Mayicookies.openPreferences()}>Cookie-Einstellungen</button>;
}

Mehrsprachige Websites

Setze das lang-Attribut im HTML. Die CMP folgt ihm automatisch; eigene Texte und übersetzte Datenschutz-Links konfigurierst du im Dashboard unter Consent Policy → Languages. Beim clientseitigen Sprachwechsel rufst du Mayicookies.setLocale(language) auf, statt Bannertexte im DOM zu ersetzen. Die Einwilligung bleibt erhalten. Prüfe Übersetzungen deiner eigenen Zwecke; sie werden nicht automatisch übersetzt.

Prüfe das tatsächliche Browser-Verhalten

1. Prüfe vor Consent, dass _ga und _ga_* fehlen. Prüfe im Basic Mode auch, dass keine Google-Statistik-Anfragen gesendet wurden.
2. Teste Ablehnung, nur Statistik, Marketing, Änderungen, Widerruf und GPC. Wiederhole mit langsamer Verbindung.
3. Prüfe einen gespeicherten Nachweis im Dashboard. Ein empfangener Nachweis belegt API-Aktivität, nicht die korrekte Tag-Reihenfolge.
4. Bestätige Standardwerte und Updates mit GTM Preview und Tag Assistant. Prüfe Statistik- und Werbesignale.

Häufige Fehler

403 / config

Erlaube den exakten Host, einschließlich www, falls verwendet.

404 / config

Prüfe Site-Key und API-URL aus Installation.

Google-Cookies vor Consent

Prüfe Tag-Reihenfolge, doppelte Loader und Consent-Prüfungen. Ein verzögertes Banner löst das Problem nicht.

Kein gespeicherter Nachweis

Prüfe Consent-POST, Abrechnungsstatus und verbleibendes Kontingent. Eine lokal gespeicherte Auswahl belegt keinen erfolgreichen Server-Nachweis.

Mayicookies verwaltet Consent, ersetzt aber keine rechtliche Prüfung. Es scannt nicht nach Cookies und fängt nicht automatisch unkonfigurierte Scripts ab. Consent-Mode-Unterstützung ist keine Google-CMP-Zertifizierung. Prüfe deine Hinweise und jedes optionale Tag.