Die evanto Cookie Consent Lösung.

Die evanto Cookie Consent Lösung.

Einführung

Hintergrund zur Notwendigkeit einer erweiterten Cookie-Einwilligungsmöglichkeit für Webseitenbesucher

Am 1.10.2019 hat der EuGH Grundsatzentscheidungen zur Verwendung von Tracking- und Marketing Cookies getroffen (Fälle "Planet 49", "Fashion ID") also z.B. bezüglich von Facebook Like Button, Google Analytics oder Google Tag Manager Cookies. Folgendes wurde festgelegt

  • Webseitenbetreiber sind mitverantwortlich für Datenschutzverstöße.
  • Die ungefragte Übermittlung von Daten an Dritte (Facebook, Google etc.) verstößt gegen Datenschutzrecht.
  • Abmahnungen gegen fehlende Einwilligungsmöglichkeiten bezüglich dieser ungefragten Datenübermittlung sind zulässig (und kostenpflichtig)
  • Cookie-Hinweisbanner sind nicht ausreichend, es ist eine echte Einwilligung des Webseitenbesuchers erforderlich.

Daher müssen Website Betreiber folgende Maßnahmen ergreifen

  • Es muss gewährleistet werden, dass der Benutzer einer Website VOR dem Setzen irgendeines Cookies die Möglichkeit hat, eine entscodechende Einwilligung zu erteilen oder eben abzulehnen.
  • Dabei muss eine Einwilligungsmöglichkeit zu jedem verwendeten Cookie vorhanden sein. Eine Klassifizierung z.B. in notwendige ("First Party"), Statistik, Marketing und Komfort-Cookies ist dabei zulässig.
  • Ausschließlich bei notwendigen ("First Party") Cookies darf die Zustimmung vorselektiert sein (also z.B. für Login (Session)-, Warenkorb, Sprachauswahl oder Consent Cookies ohne die eine korrekte Funktion der Website nicht gewährleistet werden kann). Bei allen anderen Cookies, also z.B. Tracking und Marketing Cookies darf die Auswahlmöglichkeit für den Benutzer nicht vorselektiert sein.
  • Der Webseiten Betreiber hat dafür zu sorgen, dass Cookies nur entscodechend der Benutzereinwilligung gesetzt werden.
  • Die Cookieeinwilligung muss vom Benutzer jederzeit widerrufen oder geändert werden können.

Daher haben wir uns entschieden, Interessierten die genannten Einwilligungsmöglichkeiten in Form einer "evConsent" Single Page Anwendung zur Verfügung zu stellen. Diese gewährleistet, dass vor der Zustimmung eines webseitenbesuchers keinerlei Cookies gesetzt werden. Diese können diese Konfigurationsseite auch jederzeit über https://www.websystem.de/consent.html aufrufen um Ihre persönlichen Cookieeinstellungen anzupassen.

Weitere Informationen zum Thema erhalten Sie z.B. über eRecht24. Urteil zum Planet49 Fall. Pressemitteilung

Funktionsweise

Um zu gewährleisten, dass die Cookieeinwilligung vor Setzen des ersten Cookies erfolgt, wird von evConsent folgender Weg beschritten

Einbindung eines Consent-Scripts in den Head-Bereich der Startseite des Zielwebsystems welches automatisch ausgeführt wird und folgende Funktionen ausführt

  1. Prüfen ob bereits eine Einwilligung in Form eines Consent-Cookies vorliegt, falls nein:
  2. Prüfen ob der Aufrufer eine Suchmaschine ist (Bot), falls nein:
  3. Optional prüfen, ob sich aus der IP Adresse des Aufrufers eine Herkunft außerhalb der EU ableiten lässt, falls nein (Aufruf aus EU)
  4. Weiterleitung auf eine Consent - HTML Seite, auf welcher der Benutzer seine Einwilligung zur Verwendung von Cookies verschiedener Klassen erteilen oder ablehnen kann

Nach der Bestätigung der persönlichen Cookie-Konfiguration durch den Webseiten-Benutzer wird durch die Consent-Website

  1. ein Cookie gesetzt, dass diese Cookie-Konfiguration für den Benutzer erhält,
  2. auf die Startseite des Zielwebsystems weitergeleitet, wo jetzt durch das eingebundene Consent-Skript erneut die obigen Prüfungen ausgeführt werden

Jetzt existiert ein Consent Cookie, daher

  1. wird die Cookie-Konfiguration des Benutzers in einem globalen JavaScript Objekt abgelegt (window.evconsent) und
  2. obliegt es dem Zielwebsystem, diese Cookie-Konfiguration auszuwerten und die Skripts von Tracking und Marketinganbietern (Google Analytics, Facebook, etc.) dynamisch entsprechend der vorhandenen Einwilligung des Benutzers zu laden.

Integration in Website

Die evConsent Cookie-Einwilligungslösung besteht aus

  • einer HTML Seite consent.html (Single Page JavaScript-Anwendung) und
  • einem Verzeichnis evconsent mit Konfigurationsdaten und Skripten

HTML Seite und Verzeichnis müssen im Wurzelverzeichnis des Zielwebsystems abgelegt werden, so dass die Webseite unter https://zielsystem.de/consent.html zu erreichen ist. Auf HTML Seite und Verzeichnis müssen Leserechte für den Webserver Account vergeben werden.

Das Verzeichnis evconsent enthält die Skriptdatei ev-consent.js die im Head-Bereich des Zielwebsystems einzubinden ist

    <head>
    	:
    	<script type="text/javascript" src="evconsent/ev-consent.js"></script>
    	:
    </head>

Verzögertes (defer) und asynchrones (async) Laden wird hier nicht empfohlen, um eine schnellstmögliche Ausführung des Skripts zu erreichen.

Basis-Konfiguration

Die Konfiguration des Skripts "ev-consent.js" erfolgt über ein globales JavaScript Objekt im Head-Bereich der Startseite des Zielwebsystems

    <head>
    	:
    	<script>
    	window.evConfig = {
			consentCookieName: 'evconsent',
			consentUrl: '/consent.html',
			ipifyApiKey: '',
			log: false,
			ignoreLocalHost: true
		};
    	</script>
    	<script type="text/javascript" src="evconsent/ev-consent.js"></script>
    	:
    </head>

Die einzelnen Variablen des Konfigurationsobjekts haben folgende Bedeutung:

consentCookieName
Name des Cookies für die Speicherung der Cookie-Konfiguration des Benutzers
consentUrl
Name der HTML Seite mit der SPA für die Einholung der Cookie-Zustimmung seitens des Benutzers
ipifyApiKey
Optionaler API Key des Anbieters "ipify.org". Dieser Anbieter wird benutzt, um aus der IP Adresse das Herkunftsland des Webseiten-Benutzers zu ermitteln. Die Cookie-Consent Einwilligung wird dann nur angezeigt, wenn dieses Herkunftsland in der EU liegt. ipify.org bietet bei bis zu 1000 Aufrufen pro Monat einen kostenfreien Tarif an. Nähere Informationen unter https://geo.ipify.org/pricing.
log
Wenn der Wert auf true gesetzt wird, werden in der Browser Konsole Debug-Informationen des ev-consent.js Skripts angezeigt.
ignoreLocalHost
Wenn der Wert auf true gesetzt wird, erfolgt keine Weiterleitung auf die evConsent Cookie-Einwilligung in lokalen Entwicklungsumgebungen.

Übersicht evConsent SP Anwendung

Die Benutzeroberfläche der evConsent SP Anwendung ist in 5 Tabs aufgeteilt:

Nutzungsbedingungen
Nutzungsbedingungen für Zielwebsystem und Cookie-Einwilligung
Details
Erläuterung der verschiedenen Cookie-Kategorien
Datenschutzerklärung
Datenschutzerklärung des Zielwebsystems
Impressum
Impressum des Zielwebsystems
Warum?
Erläuterung für den Besucher des Zielwebsystems warum die Cookie-Einwilligungsseite ("consent.html") angezeigt wird

Benutzeroberfläche evConsent

Konfiguration der SP Anwendung zur Cookie-Einwilligung

Die Konfiguration der SP Anwendung erfolgt über sprachspezifische Konfigurationsdateien im JSON Format und über sprachspezifische HTML Dateien. hier am Beispiel einer zweisprachigen Konfiguration (DE, EN):

config.de.json
Konfigurationsdatei deutsch (DE)
config.en.json
Konfigurationsdatei englisch (EN)
details.de.html
HTML Inhalt für Tab Details (deutsch)
details.en.html
HTML Inhalt für Tab Details (englisch)
imprint.de.html
HTML Inhalt für Tab Impressum (deutsch)
imprint.en.html
HTML Inhalt für Tab Impressum (englisch)
privacy.de.html
HTML Inhalt für Tab Datenschutzerklärung (deutsch)
privacy.en.html
HTML Inhalt für Tab Datenschutzerklärung (englisch)
why.de.html
HTML Inhalt für Tab Warum? (deutsch)
why.en.html
HTML Inhalt für Tab Warum? (englisch)

Die sprachspezifischen Konfigurationsdateien bieten folgende Einstellmöglichkeiten:

log
true für Log-Ausgaben in der JavaScript-Konsole des Browsers
title
Text für das <title>-Tag im Head-Bereich (wird z.B. im Browser als Tab-Text verwendet)
bypassIfConsentCookieIsSet
Wenn true wird direkt wieder zum Websystem zurückgeroutet (ohne Anzeige der Cookie Einwilligungs-SP Anwendung) wenn das Consent-Cookie bereits gesetzt ist.
deleteCookiesOnStart
Wenn true, werden alle Cookies der Website beim Aufruf von consent.html gelöscht. Wichtig "Third Party" Cookies (Google etc. können hier nicht gelöscht werden. Dies ist nur über die entsprechenden Einstellungen des jeweiligen Web-Browsers möglich.
expirationDays
Anzahl der Tage, in denen das Consent-Cookie für den Benutzer gespeichert bleibt (und in denen die "consent.html" nicht angezeigt wird. Nach Erreichen der Verfallsdauer des Cookies wird erneut die Cookie-Einwilligungs-SP Anwendung (consent.html) angezeigt.
cookieName
Name des Consent Cookies
webSystemUrl
Startseite des Zielwebsystems (Standard "/")
welcomeHeader
Überschrift im Tab "Nutzungsbedingungen"
welcomeText
Text im Tab "Nutzungsbedingungen"
welcomeTerms
Begriff für Datenschutzerklärung
fallbackLocale
Standardsprache
cookieClasses
Array mit den verfügbaren Cookie-Kategorien
language
Array mit den verfügbaren Sprachen
accentColor
Farbwert (Farbname oder Code #abcdef) für Links, Tab-Hervorhebung, Schaltflächen
backColor
Farbwert (Farbname oder Code #abcdef) für Hintergrundfarbe,
foreColor
Farbwert (Farbname oder Code #abcdef) für Schriftfarbe
borderColor
Farbwert (Farbname oder Code #abcdef) für Rahmenfarbe,
ipifyApiKey
API Key für geo.ipify.org (Anbieter zum Ermitteln des Herkunftslandes der IP Adresse des Webseitenbesuchers,
backgroundImage
URL Hintergrundbild,
backgroundOpacity
Transparenz ("Durchsichtigkeit") des Hintergrundbildes
fontWeight
Schrift-"Stärke" (100..900)

Beispiel für eine vollständige Konfigurationsdatei:

{
  "log": true,
  "title": "Cookie-Einwilligung für evanto.de",
  "bypassIfConsentCookieIsSet" :  false,
  "deleteCookiesOnStart": false,
  "expirationDays": 14,
  "cookieName": "evconsent",
  "webSystemUrl": "/",
  "welcomeHeader": "Willkommen bei der evanto media AG!",
  "welcomeText": "Wir verwenden Cookies, um Ihnen ein optimales Webseiten-Erlebnis zu bieten. Dazu zählen Cookies, die für den Betrieb der Seite und für die Steuerung unserer kommerziellen Unternehmensziele notwendig sind, sowie solche, die lediglich zu anonymen Statistikzwecken, für Komforteinstellungen oder zur Anzeige personalisierter Inhalte genutzt werden. Sie können selbst entscheiden, welche Kategorien Sie zulassen möchten. Bitte beachten Sie, dass auf Basis Ihrer Einstellungen womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen. Weitere Informationen finden Sie in unserer ",
  "welcomeTerms": "Datenschutzerklärung",
  "fallbackLocale": "de",
  "cookieClasses": [{
    "id": "necessary",
    "label": "Notwendig"
  }, {
    "id": "statistics",
    "label": "Statistik"
  }, {
    "id": "comfort",
    "label": "Komfort (nicht verwendet)",
    "disabled": true
  }, {
    "id": "personalization",
    "label": "Personalisierung (nicht verwendet)",
    "disabled": true
  }],
  "languages": [{
    "label": "DE",
    "locale": "de-DE"
  }, {
    "label": "EN",
    "locale": "en-US"
  }],
  "accentColor": "red",
  "backColor": "#111",
  "foreColor": "white",
  "borderColor": "#999",
  "ipifyApiKey": "at_Yh7b1BurLlTPGyzB2ANHSsEqA8Uu1",
  "backgroundImage": "images/bg2.jpg",
  "backgroundOpacity": 0.3,
  "fontWeight": 100
}

Alle HTML Dateien müssen gültiges HTML enthalten (siehe Muster) und können beliebig angepasst werden.

Transparenzfarbe Hintergrundbild

Das Hintergrundbild kann mit einer transparenten Deckfarbe "abgedeckt" werden. Diese wird im <body>-Tag der Datei "consent.html" eingestellt:

    <body style="background: black;">

oder z.B.

    <body style="background: white;">