Lass deinen Agent Next.js integrieren

Integriere Mayicookies in diese next-app-Website. Prüfe zuerst Framework, Root-Dokument und alle Statistik-/Marketing-Loader. Nutze @supaapps/mayicookies oder den offiziellen gehosteten Loader, kein selbstgebautes Banner.

Öffentlicher Site-Key: REPLACE_WITH_YOUR_PUBLIC_SITE_KEY
API-URL: https://api.mayicookies.com/api
Laufzeit: npm; Google-Anbindung: gtm

Nutze https://mayicookies.com/de/tutorials/agent-nextjs/ und die passende Framework-Anleitung. Setze verweigerte Consent-Standardwerte vor GTM/gtag.js, niemals nur in useEffect. Nutze die direkte Google-Bridge nicht zusammen mit dem GTM-Template. Blockiere optionale Nicht-GTM-Scripts mit type="text/plain" und data-mayicookies-category. Ergänze eine dauerhaft erreichbare Schaltfläche für Cookie-Einstellungen. autoBlock fängt nicht beliebige Scripts ab.

Frage niemals nach Passwörtern, Access-Tokens oder privaten API-Zugangsdaten. Ändere weder Abrechnung noch Konten oder GTM-Berechtigungen. Liste Schritte im GTM-Konto getrennt von Code-Änderungen auf. Blockiere im Basic Consent Mode Google-Tags bis zur Zustimmung; verweigerte Standardwerte allein können cookielose Pings erlauben.

Zeige geänderte Dateien und belege in einem frischen Browser: keine optionalen Cookies vor Zustimmung; Ablehnung/nur Statistik/Akzeptieren aktualisieren korrekt; Widerruf funktioniert; ein gespeicherter Nachweis erscheint in Mayicookies; langsames Laden bleibt zunächst verweigert. Behaupte keine Rechtskonformität oder Zertifizierung.

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>
  );
}

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

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

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