Simple Consent Manager
Demo & Download
Noch sowas von Beta!

Script zum einfachen Management von Consent für die Verwendung von Cookies. Erlaubt dem Besucher die Aktivierung für ein bis drei optionale Gruppen von Cookies; zusammen mit einer weiteren Gruppe zur Beschreibung funktional erforderlicher Cookies (zur Anleitung).

Demo

Einblenden der Einstellungen; z. B. als Link im Footer oder den Datenschutzhinweisen.

Cookie-Einstellungen anzeigen

Aktuelle Berechtigungen prüfen

Consent Gruppe 1:
Consent Gruppe 2:
Consent Gruppe 3:
Aktualisieren

Stil und Optionen anpassen

Kurzanleitung

Das Script benötigt keine Bibliotheken und kann wahlweise "am Stück" oder aufgeteilt in Konfiguration und Code in zwei getrennten .js-Dateien abgelegt und geladen werden. Von den der Übersicht halber recht großzügig formatierten Einstellungen abgesehen besteht das Script im Kern aus weniger als 300 Zeilen lesbaren Codes; minimiert beträgt die Dateigröße unter 15KB.

Konfiguration

Die Einstellungen erfolgen in einem großen Array "window.mgmcConfig" am Anfang des Codes, welches als globale Variable definiert wird. Die jeweiligen Optionen sind mit Kommentaren versehen, die den Zweck und die Steuerungsmöglichkeiten der Option beinhalten.

Allgemeine Optionen

  //Anzahl der Monate f. Consent Cookie
  mgmcConsentCookieMonths : 48,
  
  //Titel des Consent-Einstellungsdialogs
  mgmcConsentDialogTitle  : "Einstellungen zur Webanalyse",

  //Titel des "Minimal-Consent"-Buttons
  mgmcConsentMinBtnTitle  : "Nur notwendige Cookies",
  
  //Titel des "Consent-Buttons" bei einfachem Dialog
  mgmcConsentOkBtnTitle   : "Webanalyse zulassen",
  
  //Darstellungstyp. Optionen: overlay ("modal", zentriert), center, top, bottom
  mgmcConsentStyle        : "overlay",
  
  //optionale Fixierung per CSS (z. B. "100px" als Wert) vom oberen Rand 
  //nur wirksam bei mgmcConsentStyle center bzw. overlay ("" = scrollbar) 
  mgmcConsentStyleFixCenterPos : "",

  //Maximale Inhaltsbreite als CSS-Angabe bei "top" oder "bottom" als Stil
  mgmcConsentContentWidth : "1200px",
  
  //Einleitungstext des Consent-Einstellungsdialogs - 
  //abstimmen mit Umfang / Gruppen!
  mgmcConsentDialogIntro  : "Diese Website nutzt Cookies. Lorem Ipsum Ypsheft in Panama.<br />",

  //URLs f. Links zu Datenschutz und Impressum
  mgmcPrivacyLink     : '/datenschutz.html',
  mgmcImprintLink     : '/impressum.html',
  
  //Parameter zum Uebergehen der Abfrage bei (neuen) Besuchern ohne Consent-Auswahl 
  //z. B. zum Abschalten der Abfrage auf Landingpages bei Paid Traffic.
  //Abschalten der automatischen Abfrage f. alle Seiten mit mgmcOverrideParam : '/';
  mgmcOverrideParam   : 'showconsentbanner=0',

  //Steuert, ob der Consent Manager auch einen ID-Key f. jeden Browser erzeugt, der zu Dokumentationszwecken 
  //mit uebergeben bzw. abgerufen werden kann. Optionen: "never" (kein Key), "consent" (erst ab erster Auswahl 
  //von Optionen), "always" (Cookie wird dann immer benoetigt) 
  mgmcManageKey       : "never",

  //Inline-CSS normale Buttons
  mgmcButtonStyle     : "color:#444; background:#fff",

  //Inline-CSS fuer Default-Button
  mgmcOkButtonStyle     : "color:#fff; background:#0f6b14",

Opt-In oder Opt-Out?

Mit der Angabe von 'enableDefault' : true in den Kopfdaten kann definiert werden, dass eine Gruppe auch ohne Consent per Default aktiv sein soll.

Marker für Consent

Es gibt in den Kopfdaten der Gruppen ein Feld marker. Unter diesem Wert wird ein Consent für die Gruppe gespeichert. Bei Anpassung des Trackingumfangs einer Gruppe kann hier also eine neue Kennung eingesetzt werden, um den Consent für die ganze Gruppe erneuern zu lassen. Alternativ kann auch ein Datumsvergleich genutzt werden; siehe unten. Wichtig bei der Anpassung von Markern ist nur, dass diese eindeutig blieben und auch nicht ein Marker ein Teil eines anderen ist, so dass die Erkennung eindeutig bleibt wie bei den Vorgaben (1, 2 und 3).

Cookies und Dienste definieren

Der größte Teil des Arrays besteht aus den Angaben zu den jeweiligen Diensten. Diese werden in Gruppen zusammengefasst. Derzeit sind neben den erforderlichen Cookies maximal drei weitere Gruppen definierbar.

Eine Gruppe besteht aus Kopfdaten wie Titel, Kurzbeschreibung etc. und den jeweiligen Tabellenzeilen für die Cookie-Übersicht im Array "items". Als Beispiel die Gruppe "trackingCookies":

window.mgmcConfig = {

  //...
  trackingCookies : {
    'enableDefault' : false, 
    'title'        : 'Statistik', 
    'description' : 'Benötigt für Webanalyse und '+
                    'quantitative Auwertung von Kampagnenergebnissen.',
    'marker'  : '1', 
    'items' : [ 
      {
        'name'    : '_ga, _gid, _gat', 
        'domain'  : 'google-analytics.com', 
        'desc'    : 'Speichert Angaben über das Gerät '+
                    '(in der Session) und eine ID des Besuchers zur '+
                    'Auswertung der Websitenutzung in Google Analytics.', 
        'expires' : 'Session bis 2 Jahre', 
      },
      {
        'name'    : 'ga_client_id', 
        'domain'  : 'analytrix.de', 
        'desc'    : 'Speichert eine Sicherung der Google Analytics '+
                    'Client Id im HTML Local Storage zum Schutz gegen '+
                    'Löschen des _ga-Cookies durch Browser-Trackingschutzmechanismen.', 
        'expires' : '2 Jahre', 
        'type'    : 'Local Storage'  
      },
    ]  
  },
  //...
}  

Nicht nur Cookies!

Bei den einzelnen Zeilen der Tabelle kann auch ein Text als 'type' angegeben werden. Dies dient dazu, auch andere Daten als nur Cookies beschreiben zu können, also z. B. HTML Local Storage, Indexed DB, Zählpixel o. Ä. Ist diese Angabe nicht vorhanden oder leer (Wert ""), wird "Cookie" als Default in den Tabellen ausgegeben.

Variante ohne Checkboxen

Wenn nur eine der Gruppen jenseits der "essenziellen Cookies" definiert wird (die Gruppe der Tracking Cookies) und die anderen beiden leer bleiben, indem dort das "item"-Array mit den Cookieangaben leer bleibt, werden statt Checkboxen nur zwei Buttons angezeigt. In diesem Fall ist es besonders wichtig, den Einleitungstext so zu gestalten, dass die beiden Klassen von erforderlichen und optionalen Cookies vernünftig (jenseits der Kurzbeschreibungen in der einblendbaren Tabelle) beschrieben sind.

Callback bei Änderungen

Die Konfiguration sieht auch eine Callback - Funktion vor, die bei Erteilen oder Ändern von Consent-Einstellungen aufgerufen wird. Damit kann z. B. nach dem Erteilen direkt ein Tracking der aktuellen Seite o. Ä. ausgelöst werden. Die Callback-Funktion ist auch ein guter Platz, um z. B. eine serverseitige "Härtung" des Consent-Cookies (Erneuerung als HTTP-Cookie) gegen Löschen durch ITP in Safari vorzunehmen.

Anpassen der Optik

Im Code werden die grundlegenden CSS-Eigenschaften der verwendeten Elemente definiert, die den groben Aufbau des Dialogs steuern - in Abhängigkeit vom gewählten Stil (Darstellung zentriert, oben oder unten). Alle wesentlichen Elemente haben aber eigene IDs oder CSS-Klassen, über die eine individuelle Gestaltung des Dialogs möglich ist.

Anpassen des Verhaltens

Alle Optionen aus der globalen Einstellungsvariable können auch nach der Initialisierung noch geändert und der Consent Manager zur Not auch per Funktion resetConsentBanner(); "reinitialisiert" werden. So kann z. B. eine unterschiedliche Platzierung erfolgen, die davon abhängt, ob der Dialog beim Aufruf der Seite aufgerufen oder zur Anpassung der Einstellungen später per Link geöffnet werden soll.

Wird der Dialog z. B. mit dem Stil "overlay" geladen, wenn er zur Auswahl beim Betreten der Site angezeigt wird und soll später beim manuellen Aufruf der Eisntellungen an anderer Position (oben) erscheinen, kann dies vor dem Aufruf der Funktion für den Einstellungsdialog abweichend definiert werden.

Ein entsprechender Link kann dann so aussehen:

<a href="#" onclick="window.mgmcConfig.mgmcConsentStyle='bottom'; showConsentInfo();return false">Cookie-Einstellungen</a>

Einbinden in die Website

Das Laden vor dem ggf. direkt verbauten Tracking ist sinnvoll - ebenso wie der möglichst frühe Aufruf der Initialisierung (s. u.), um vor dem Tracking sicherzustellen, dass die Funktionen oder Variablen zum Abfragen des Consent für die einzelnen Gruppen zur Verfügung stehen.

Anschließend muss die Initialisierung mit initConsent() aufgerufen werden. Beides kann direkt hintereinander passieren:

<script type="text/javascript" src="/js/simple_consent.js"></script>
<script>initConsent();</script>

Damit erscheint der Dialog beim Aufruf der Seite automatisch an der definierten Position, wenn noch keine Einstellungen vom Besucher vorgenommen und in einem Cookie gespeichert wurden. Ausnahmen sind die beiden Seiten unter den URLs, die als Datenschutzerklärung und Impressum definiert wurden; auf diesen Seiten wird das Banner nicht angezeigt, um das Lesen nicht zu verhindern / erschweren.

Manueller Aufruf der Einstellungen

Zum Aufruf der Einstellungen wird die Funktion showConsentInfo(); per Script aufgerufen (siehe Beispiel zur Konfigurationsanpassung der Position oben).

Abruf des Consent für einzelne Gruppen

Bevor Tags geladen oder Cookies von einzelnen Funktionen gesetzt werden, die in den hier behandelten Gruppen definiert wurden, muss angefragt werden, ob Consent besteht. Dazu kann entweder jeweils eine globale Variable oder eine Funktion verwendet werden. Beide beachten die Einstellungen enableDefault der Gruppen, wenn kein Cookie vorhanden ist (also noch keine Einstellungen vorgenommen wurden).

Abruf per Funktion

Mittels der Funktion getGroupConsent(num); kann für die Gruppen 1 (Tracking) bis 3 mit der jeweiligen Ziffer als Parameter abgefragt werden, wie der aktuelle Consent Status ist. Der Rückgabewert besteht aus einem logischen Ergebnis, mit dem bedingtes Laden von Trackingscripts etc. direkt im Code erfolgen kann.

Abruf als globale Variable

Als Alternative - vor allem praktischer beim Einsatz des GTM oder eines anderen Tag Managers - stehen für den Trackingstatus auch drei globale Variablen zur Verfügung, deren Wert jederzeit aktuell ist und z. B. für die Definition von blockierenden bzw. aktivierenden Triggern genutzt werden kann. Dazu dienen die drei globalen Variablen window.mgmcTrackingActive, window.mgmcGroup2Active und window.mgmcGroup3Active.

Consent Datum weiterverarbeiten

Auf gleiche Weise kann das Datum des erteilten Consent für eine Gruppe als globale Variable abgerufen werden. Die Variablen window.mgmcTrackingConsentDate, window.mgmcGroup2ConsentDate und window.mgmcGroup2ConsentDate sind entsprechend mit dem Datum gefüllt oder liefern einen leeren String zurück.

Das kann dann wichtig sein, wenn Tags nach der ersten Konfiguration zu bestehenden Gruppen hinzugefügt wurden - in dem Fall muss ein Ausspielen des neuen Tags ggf. verhindert werden, wenn die Zustimmung "zu alt" ist. Alternativ muss der Consent für die ganze Gruppe muss durch Anpassung des Markers (Für die Gruppe 3 also z. B. den Wert für "window.mgmcConfig.group3Cookies.marker" zurückgesetzt und vom wiederkehrenden Besucher ggf. erneuert werden.

Optionaler Schlüssel für serverseitige Historie

Ebenso wird optional ein eindeutiger Schlüssel in der Variable window.mgmcConsentKey bereitgestellt, der den Client (Browser) referenzierbar macht. Wenn z. B. eine eigene serverseitige Historie der Einstellungen anhand des Callback-Events geführt werden soll, dient dieser Schlüssel zur Identifizierung. Er kann immer, nur im Einstellungsfall oder nie vergeben werden (siehe Einstellung mgmcManageKey).

Link zum Script und ein Wort der Warnung

Das hier ist eine frühe Fassung des Consent Managers, der aktuell hier auf dieser Seite direkt im Code eingebunden und auf dem Rest der Site als separate Fassung live in Erprobung ist. Wenn Du diese Seite kennst, habe ich Dir vermutlich davon erzählt und Du hast Interesse an einem Einbau irgendwo. Das solltest Du nur mit Vorsicht tun, denn weder der Umfang noch die Namen der Funktionen etc. sind final - da wird sich noch was ändern. Relativ sicher ist daher nur die Nutzung der globalen Variablen zum Abruf des Consent, damit nich bei einem Umstieg auf eine neuere Fassung dieses Script lauter Trigger angepasst oder bedingt eingebaute Scriptblöcke noch einmal angepackt werden müssen.

Dieser Link zum Script öffnet die "live" JS-Datei hier auf analytrix.de inkl. meiner aktuellen Konfiguration in einem neuen Tab. Wenn Du diese übernommst, passe die Einstellungen bitte an und denk vor allem an die Callback Funktion. Denn was ich hier aufrufe, wird in Deinem Fall vermutlich nicht existieren und daher Fehlermeldungen erzeugen.

Achja und: Danke für Dein Interesse... und lass mich wissen, wenn es irgendwo hakt ;)