Direkte Google-Tags anbinden

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

Setze frühe Standardwerte im Head. Installiere die Bridge vor der Laufzeit-Initialisierung.

1. Nutze diese Bridge oder das GTM-Template, niemals beides.
2. Lade im Basic Mode Google erst nach Zustimmung zur passenden Kategorie. Verweigerte Standardwerte allein verhindern keine cookielosen Anfragen.

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>

// assets/consent.js (bundle with your build tool)
import { Mayicookies, installGoogleConsentModeBridge } from '@supaapps/mayicookies';

installGoogleConsentModeBridge({ waitForUpdate: 500 });
await Mayicookies.init({
  siteKey: "REPLACE_WITH_YOUR_PUBLIC_SITE_KEY",
  apiUrl: "https://api.mayicookies.com/api",
  mode: 'auto',
  locale: 'auto',
  autoBlock: true,
  googleConsentMode: { waitForUpdate: 500 },
});

document.getElementById('cookie-settings')?.addEventListener('click', () => {
  Mayicookies.openPreferences();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <script type="module" src="/assets/consent.js"></script>
  </head>
  <body>
    <button id="cookie-settings" type="button">Cookie settings</button>
  </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

Ab SDK 0.1.8 gibt es eine schwebende Schaltfläche für Cookie-Einstellungen. Wähle in Consent Policy unten links, unten rechts oder deaktiviert. Füge bei deaktivierter Schaltfläche dieses dauerhaft erreichbare Element hinzu, damit Besucher ihre Auswahl ändern oder widerrufen können.

Trage unter Consent Policy → Company branding deinen Firmennamen ein und lade ein PNG/WebP-Logo hoch oder verwende eine Logo-URL. Logos dürfen höchstens 256 KiB groß und 2048 Pixel breit oder hoch sein. Die Mayicookies-Kennzeichnung bleibt sichtbar; Änderungen am Branding setzen die Einwilligung nicht zurück.

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

document.getElementById('cookie-settings')?.addEventListener('click', () => {
  Mayicookies.openPreferences();
});

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.