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

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

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;">