DE
Kostenlos starten

Dokumentation

Alles, was Sie für die schnelle Einrichtung von Consentio wissen müssen

Eigene Website

Fortgeschrittene Consentio-Implementierung für Entwickler

Grundlegende Implementierung

Für die grundlegende Implementierung fügen Sie einfach eine einzige Codezeile ein:

HTML 
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

Das Widget initialisiert sich automatisch und zeigt den Cookie-Banner beim ersten Laden der Seite an. Ihren eindeutigen SCRIPT_KEY finden Sie im Dashboard unter Einstellungen → Installation.

Tipp: Die Website-Identifikation ist Teil der URL (SCRIPT_KEY), daher sind keine zusätzlichen Daten-Attribute erforderlich. Die Sprache wird automatisch anhand des lang-Attributs am <html>-Element oder anhand des Accept-Language-Headers des Browsers erkannt.

JavaScript-API

Sobald das Widget geladen ist, steht das globale Objekt window.Consentio für die programmatische Steuerung zur Verfügung.

Verfügbare Methoden

Methode Beschreibung
show() Zeigt den Cookie-Banner an
hide() Blendet den Cookie-Banner aus
showPreferences() Zeigt die Einstellungen für die Präferenzen an
getConsent() Gibt den aktuellen Consent-Status zurück
updateConsent(updates) Aktualisiert den Consent-Status
onConsentChange(callback) Registriert einen Listener für Consent-Änderungen
getBlockedScripts() Gibt die Anzahl der blockierten Skripte zurück
getBlockedIframes() Gibt die Anzahl der blockierten iFrames zurück

Banner anzeigen

JavaScript 
// Cookie-Banner anzeigen
Consentio.show()

// Cookie-Banner ausblenden
Consentio.hide()

// Einstellungen für die Präferenzen anzeigen
Consentio.showPreferences()

Consent-Status abrufen

JavaScript 
// Aktuellen Consent-Status abrufen
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }

// Eine bestimmte Kategorie prüfen
if (consent.analytics) {
  // Analytics-Skripte ausführen
  loadGoogleAnalytics()
}

if (consent.marketing) {
  // Marketing-Skripte ausführen
  loadFacebookPixel()
}

Consent aktualisieren

JavaScript 
// Bestimmte Kategorien aktualisieren
Consentio.updateConsent({
  analytics: true,
  marketing: false
})

Event-Listener

Reagieren Sie mit Event-Listenern auf Consent-Änderungen:

JavaScript 
// Option 1: Mit onConsentChange
Consentio.onConsentChange((consent) => {
  console.log('Consent geändert:', consent)

  if (consent.analytics) {
    loadGoogleAnalytics()
  }

  if (consent.marketing) {
    loadFacebookPixel()
  }
})

// Option 2: Mit einem Window-Event-Listener
window.addEventListener('consentio:consent', (event) => {
  const consent = event.detail
  console.log('Consent geändert:', consent)
})

Google Consent Mode v2

Consentio unterstützt Google Consent Mode v2 automatisch. Damit alles korrekt funktioniert, muss das Widget vor Google Analytics und anderen Google-Skripten geladen werden.

HTML 
<!-- 1. Zuerst Consentio -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

<!-- 2. Dann das Google-Tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Zuordnung von Kategorie zu Consent Mode

Consentio-Kategorie Google Consent Mode
necessary functionality_storage, security_storage
analytics analytics_storage
marketing ad_storage, ad_user_data, ad_personalization
functionality personalization_storage

Blockieren von Skripten

Um Skripte zu blockieren, bevor die Einwilligung erteilt wurde, verwenden Sie das Attribut type="text/plain" zusammen mit dem Daten-Attribut data-category:

HTML 
<!-- Skript läuft erst, nachdem die Einwilligung für Analytics erteilt wurde -->
<script type="text/plain" data-category="analytics">
  // Google-Analytics-Code
  gtag('config', 'G-XXXXXXX');
</script>

<!-- Skript läuft erst, nachdem die Einwilligung für Marketing erteilt wurde -->
<script type="text/plain" data-category="marketing">
  // Facebook-Pixel-Code
  fbq('init', 'XXXXXXX');
</script>

<!-- Skript läuft erst, nachdem die Einwilligung für Funktionalität erteilt wurde -->
<script type="text/plain" data-category="functionality">
  // Personalisierungs-Code
  initPersonalization();
</script>

Verfügbare Kategorien

Kategorie Beschreibung
necessary Notwendige Cookies (immer zulässig)
analytics Analyse-Cookies
marketing Marketing-Cookies
functionality Funktionale Cookies zur Personalisierung

Button zum Öffnen der Präferenzen

Platzieren Sie auf Ihrer Website einen Button, um die Cookie-Präferenzen erneut zu öffnen (nach DSGVO erforderlich):

HTML 
<!-- Im Footer der Website -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
  Cookie-Einstellungen
</a>

<!-- Oder als Button -->
<button onclick="Consentio.showPreferences()">
  Cookie-Präferenzen verwalten
</button>
Tipp: Nach der DSGVO müssen Nutzer ihre Präferenzen jederzeit ändern können. Platzieren Sie dazu einen Link im Footer der Website oder in Ihrer Datenschutzerklärung.

Single Page Applications (SPA)

Für React, Vue, Angular und andere SPA-Frameworks funktioniert das Widget automatisch. Es erkennt URL-Änderungen und aktualisiert sich bei Bedarf selbst.

JavaScript 
// Beispiel: Consent-Status bei Routenwechsel prüfen (Vue Router)
router.afterEach(() => {
  if (window.Consentio) {
    const consent = Consentio.getConsent()
    if (consent.analytics) {
      // Analytics-Skripte sind zulässig
    }
  }
})
ShoptetGoogle Tag Manager