DSGVO: Google Analytics mit Opt-In implementieren

Im Rahmen der Vorbereitung auf die DSGVO beschäftigen sich viele Webseitbetreiber mit der Frage, ob sie für Web Analyse Tools wie Google Analytics ein „Opt-Out“ oder ein „Opt-In“ benötigen. Die rechtliche Seite dieser Frage überlasse ich den Juristen. An dieser Stelle möchte ich eine technische Lösung vorstellen, wie Sie Google Analytics mit Opt-In implementieren können. Einen praktischen Überblick über die DSGVO sowie eine Checkliste für die eigene Website finden Sie zum Beispiel bei den Kollegen von AdBox24.

Update Mai 2018: Einen interessanten Beitrag zum Thema Opt-In-Pflicht für Cookies gibt es zum Beispiel beim RA Dr. Thomas Schwenke unter https://drschwenke.de/dsgvo-tracking-cookies-online-marketing-gluecksspiel/.

Update Oktober 2019: Ein Opt-In für Google Analytics (und andere Cookies) wird Pflicht. Nachzulesen unter anderem unter https://datenschutz-generator.de/eugh-cookie-einwilligung-banner-detailinformationen-pflicht/ oder https://www.wbs-law.de/it-und-internet-recht/datenschutzrecht/eugh-cookies-aktive-einwilligung-c-673-17-45473/.

Grundidee

Bei einem „Opt-Out“ können die Website-Besucher nachträglich sich dafür entscheiden, dass sie nicht „getrackt“ werden wollen. Bei einem „Opt-In“ soll das Tracking gar nicht erst erfolgen, bis die Nutzer dies explizit eingewilligt haben. Das heißt also, dass kein Tracking-Code und auch kein anderer Code vom verwendeten Tracking-Tool geladen werden darf, solange der Nutzer dies nicht erlaubt hat. Die Lösung sieht also folgendermaßen aus:

  1. Lade generell kein Tracking-Code (in diesem Fall: Google Analytics) auf der Website.
  2. Ermögliche dem Nutzer, das Tracking mit Google Analytics explizit zu erlauben.
  3. Lade dann dynamisch den Analytics-Code nach.
  4. Stelle sicher, dass auch bei allen weiteren Seitenaufrufen der Analytics-Code nur dann geladen wird, wenn die Erlaubnis vom Nutzer noch besteht.
  5. Im Sinne von DSGVO gib dem Nutzer die Möglichkeit, seine Erlaubnis („Einwilligung“) für da Tracking zu widerrufen.

Schauen wir im Folgenden die Technik hinter diesen Schritt im Einzelnen an. Dabei betrachten wir vor allem die Umsetzung für Google Analytics. Doch auch andere Tools wie der Google Tag Manager (GTM) lassen sich damit ähnlich steuern. Wir schauen auch die Lösung für den GTM an. Und auch die „Do-Not-Track“ Anweisung vom Webbrowser kann auf diese berücksichtigt werden.

Bonus: Zum Schluss schauen wir, wie diese Lösung auch ohne Plugins in WordPress eingebaut werden kann.

Schritt 1: Kein Tracking-Code ohne Einwilligung

Dieser Schritt ist recht einfach: Wir sollen einfach keinen Tracking-Code einbauen. Dieser soll erst bei Vorliegen einer Einwilligung durch den Website-Besucher dynamisch geladen werden. Wie genau dies funktioniert schauen wir in den Schritten 3 und 4 an.

Schritt 2: Hole ein „Opt-In“ vom Nutzer ein

Das beliebte Cookie Consent Script von insites.com (früher bekannt als „Cookie Consent von Silktide“) bietet auch eine Möglichkeit, Opt-in zu erstellen. Diese Variante setzen wir in dieser Lösung auch ein.

Zu beachten ist, dass der Script nur einen Cookie setzt, der das „Einverständnis“ des Nutzers speichert. Ob dies rechtlich auch als eine „Einwilligung“ einzusehen ist, ist zumindest fraglich. Zudem ist es für Website-Betreiber schwierig nachzuweisen, dass und wann ein Nutzer das Cookie-Banner bestätigt hat. Um ganz sicher zu sein, müsste die Lösung also ggf. noch erweitert werden. Wir bleiben bei der einfachen Version.

Der „Cookie Consent“ kann auf https://cookieconsent.insites.com/download/ direkt heruntergeladen werden. Sie haben gleich die Möglichkeit, das Aussehen der Cookie-Leiste und die Texte anzupassen. Wählen sie auf jeden Fall bei „5. Complience Type“ die Variaten „Ask users to opt into cookies (Advanced)”. Der Generator auf der Download-Seite erzeugt gleich den Aufruf-Code. Hierzu sind zwei Punkte zu beachten:

  1. Den Hinweis, dass wir erweiterte Optionen für den Opt-In umsetzen müssen gehen wir in diesem Beitrag im Schritt 5 an.
  2. Ich rate den Quellcode des „Cookie Consent“ unter https://github.com/insites/cookieconsent/ herunterzuladen, um den Basis-JavaScript und die CSS lokal abzulegen, statt diese von Cloudfire-CDN abzurufen (was weitere Datenschutz-rechtliche Fragen aufwerfen kann).

Hier ist der Aufruf-Code inklusive eines Beispiel-Textes auf Deutsch im „Classic“-Design:

<link rel="stylesheet" type="text/css" href="/PFAD-ZU/cookieconsent.min.css" />
<script src="/PFAD-ZU/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
	window.cookieconsent.initialise({
		"palette": {
			"popup": { "background": "#000"},
			"button": { "background": "#f1d600"}
		},
		"theme": "classic",
		"type": "opt-in",
		"content": {
			"message": "Wir nutzen Cookies und Google Analytics, um diese Website für Sie so interessant wie möglich zu gestalten. Sind Sie damit einverstanden? (Sie können diese Entscheidung jederzeit widerrufen)",
			"deny":"Ablehnen",
			"allow": "OK, gerne!",
			"link": "Datenschutzerklärung",
			"href": "www.IhreDomain.de/datenschutz.html"
		}
	})
});
</script>

Passen Sie auf jeden Fall den Pfad zu den .js und .css Dateien. Sie können diesen Code entweder vor dem schließenden </head> Tag oder  auch vor dem </body> Tag einfügen.

Weitere Anpassungen betrachten wir, wie gesagt, im Schritt 5.

Schritt 3: Analytics-Code dynamisch nachladen

Nun geht es darum, Google Analytics Tracking Code (GATC) dynamisch innerhalb einer JavaScript Funktion zu laden. Nachfolgende Lösung basiert darauf, dass Sie Universal Analytics mit analytics.js verwenden. Google bietet auf seiner Developer-Website eine Alternative Version des Codes, die asynchron aufgerufen werden kann. Diese modifizieren wir ein wenig und ergänzen natürlich um den „anonymizeIp“ Aufruf:

function loadGAonConsent(){
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-X', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
  var gascript = document.createElement("script");
  gascript.async = true;
  gascript.src = "https://www.google-analytics.com/analytics.js";
  document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);               
}

HINWEIS: Diese Lösung basiert auf Universal Analytics und nicht auf dem neueren Global Site Tag (gtag.js).

Nun können wir Google Analytics bei Bedarf bzw. nur bei einer Einwilligung ausführen, indem wir die Funktion loadGAonConsent(); aufrufen. Schauen wir im nächsten Schritt an, wie wir das machen bei einer Einwilligung (engl.: „consent“) machen können.

Schritt 4: Analytics-Code auf allen Seiten laden

Liegt eine Einwilligung des Nutzers vor, können wir den Tracking-Code natürlich auf allen Seiten direkt laden. Dazu müssen wir zuerst überprüfen, ob die Einwilligung vorliegt und dann den Analytics Code laden. Wir erweitern also die bisherige Lösung wie folgt.

Der „Cookie Consent“ Script speichert in einem Cookie („cookieconsent_status“), wofür sich der Website-Besucher entschieden hat. Für die Opt-In Variante gibt es drei Möglichkeiten: Der Nutzer hat sich noch nicht entschieden (kein Cookie), der Nutzer hat die Cookies abgelehnt (Cookie-Wert: „deny“) oder der Nutzer das eingewilligt (Cookie-Wert: „allow“). Nur im letzten Fall dürfen wir den Google Analytics Code auch ausführen. Wir prüfen also, ob der Cookie gesetzt und den richtigen Wert hat und rufen den GATC nur dann auf:

if (document.cookie.split(';').filter(function(item) {
    return item.indexOf('cookieconsent_status=allow') >= 0
}).length) {
    loadGAonConsent();
}

Schritt 5: GATC bei Einwilligung laden

Hat der Nutzer seine Einwilligung erteilt, kann der Analytics-Code ja direkt nachgeladen werden. Genau hier kommen die erweiterten Funktionen des Cookie-Consent Scripts ins Spiel. Die einfachste Lösung wäre, den Aufruf-Code um folgende Konfiguration zu erweitern:

onStatusChange: function(status, chosenBefore) {
	var type = this.options.type;
	var didConsent = this.hasConsented();
	if (type == 'opt-in' && didConsent) {
		// enable cookies
		loadGAonConsent();
	}
}

Damit wird der Google Analytics nachgeladen und direkt ein „PageView“ erfasst. Weitere Möglichkeiten (auch für einen Opt-Out), finden Sie in der Dokumentation des Cookie Consent Scripts unter https://cookieconsent.insites.com/documentation/disabling-cookies/.

Schritt 6: Der komplette Code

Die finden Sie den kompletten Code der Lösung. Bitte achten Sie darauf, die Google Analytics ID durch Ihre eigene zu ersetzen.

<link rel="stylesheet" type="text/css" href="/PFAD-ZU/cookieconsent.min.css" />
<script src="/PFAD-ZU/cookieconsent.min.js"></script>
<script>
function loadGAonConsent(){
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-X', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
  var gascript = document.createElement("script");
  gascript.async = true;
  gascript.src = "https://www.google-analytics.com/analytics.js";
  document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);               
}

if (document.cookie.split(';').filter(function(item) {
    return item.indexOf('cookieconsent_status=allow') >= 0
}).length) {
    loadGAonConsent();
}

window.addEventListener("load", function(){
	window.cookieconsent.initialise({
		"palette": {
			"popup": { "background": "#000"},
			"button": { "background": "#f1d600"}
		},
		"theme": "classic",
		"type": "opt-in",
		"content": {
			"message": "Wir nutzen Cookies und Google Analytics, um diese Website für Sie so interessant wie möglich zu gestalten. Sind Sie damit einverstanden? (Sie können diese Entscheidung jederzeit widerrufen)",
			"deny": "Ablehnen",
			"allow": "OK, gerne!",
			"link": "Datenschutzerklärung",
			"href": "www.IhreDomain.de/datenschutz.html"
		},
		onStatusChange: function(status, chosenBefore) {
			var type = this.options.type;
			var didConsent = this.hasConsented();
			if (type == 'opt-in' && didConsent) {
				// enable cookies
				loadGAonConsent();
			}
		}
	})
});
</script>

Ergänzung: Do-Not-Track Einstellung berücksichtigen

Sendet der Webbrowser eines Website-Besuchers den „Do Not Track“ (DNT) Header, muss dieser natürlich auch beachtet werden. Eine reine JavaScript-Lösung könnte zum Beispiel so aussehen:

<script>
if (navigator.doNotTrack != 1 && navigator.doNotTrack != "yes" && window.doNotTrack != 1 && navigator.msDoNotTrack != 1) {
	// DNT is off
}
</script>

Damit müssen die die Abfrage des Einwilligungs-Cookie im Schritt 4 erweitern und den Analytics Code nur dann per loadGAonConsent(); laden, wenn sowohl der Cookie gesetzt als auch DNT nicht gesetzt ist.

Fazit

Mit dem “Cookie Consent” Script für die Darstellung des Cookie-Banners und wenigen Zeilen Code lässt sich also recht einfach eine Opt-In Lösung für den Google Anayltics Tracking Code (GATC) bauen. Zu beachten ist dabei, dass hier nur eine Basis-Implementierung des Tracking-Codes vorgestellt wurde. Erweiterte Funktionen, wie zum Beispiel Event-Tracking, müssen entsprechend angepasst werden. Sie dürfen nur dann ausgeführt werden, wenn der GATC auch geladen wurde.

Auch eine PHP-Lösung für Aufruf des Tracking-Codes ist möglich. Hier muss nur der Cookie-Wert ausgelesen werden.

Bonus: Implementierung in WordPress

Um die Lösung in eine WordPress Installation einzufügen, müssen nur entsprechende Skripte und die CSS-Datei von „Cookie Consent“ in das verwendete Theme eingefügt werden. Die CSS lässt sich meisten über den Theme-Editor hinzufügen. Für die JavaScripts empfehle ich den Plugin Insert Headers and Footers. Damit lassen sich eigene Scripts (und nicht nur) in den Head-Bereich sowie im unteren Bereich im Body-Tag der Website einfügen.

"Insert Headers and Footers" Plugin Screenshot
„Insert Headers and Footers“ Plugin

Natürlich gibt es auch mehrere WP-Plugins, die diese Implementierung auch etwas einfacher machen, zum Beispiel das Google Analytics Germanized.

Wie können wir Ihnen helfen?

Benötigen Sie Unterstützung bei der Einrichtung vom Google Analytics? Wir helfen Ihnen gerne!

Web Analytics Beratung »

Hat Ihnen der Artikel gefallen? Teilen Sie ihn bitte.

9 Gedanken zu „DSGVO: Google Analytics mit Opt-In implementieren“

  1. Eine der wenigen guten Anleitungen, die ich zum aktuellen Thema Opt-In für Google Analytics gefunden habe. Schön wäre gewesen, in Schritt 4 den Do-Not-Track Code gleich zu integrieren. Das wäre für mich und sicher für viele andere sehr hilfreich.

    • Vielen Dank, Gerhard! Die Ergänzung um Do-not-Track ist ja im Artikel weiter unten erwähnt. Es müssen alle Bedienungen der if-Abfrage mit in die bestehende Abfrage im Schritt 4 integriert werden. Damit es etwas übersichtlicher wird, lässt sich das wie folgt kombinieren:

      if (document.cookie.split(';').filter(function(item) {
      return item.indexOf('cookieconsent_status=allow') >= 0
      }).length) {
      if (navigator.doNotTrack != 1 && navigator.doNotTrack != "yes" && window.doNotTrack != 1 && navigator.msDoNotTrack != 1) {
      loadGAonConsent();
      }
      }

  2. Vielen Dank, Alexander! Das sieht eigentlich nicht so kompliziert aus, ich hätte es aber ohne diese Hilfestellung doch eher nicht richtig implementiert.

  3. Wirklich die beste Beschreibung bisher für das CookieConsent Plugin!
    Leider wird mir nicht noch ganz klar wo genau ich z.B. mein Analytics Code einfügen soll oder allgemein meine Cookies und wie das beim Analytics Code z.B. aussehen würde?
    Vielen Dank!

    • Hallo Martin,
      vielen Dank!
      Der Analytics-Code ist ja im Schritt 3 enthalten. Hier muss noch „UA-XXXXX-X“ durch die eigene ID ersetzt werden. Schwieriger wird es, wenn außer den reinen Pageviews noch weitere Google Analytics Funktionen genutzt werden sollen (z.B. Events). hier ist dann mehr Handarbeit angesagt. Im Beitrag wollte ich nur die Grundidee aufzeigen, jedoch nicht direkt eine Lösung für alles erstellen.
      Vieles geht auch mit dem Google Tag Manager viel einfacher. Und dort lässt sich steuern, ob Tags ausgeführt werden dürfen oder nicht, abhängig vom Einverständnis der Nutzer. Ein Blog-Beitrag dazu folgt noch.

  4. Richtig toller Beitrag.
    Leider hat sich mittlerweile etwas am Google Analytics Code geändert, weshalb der Code im Beitrag nicht mehr funktioniert.
    Ein Update wäre schön.
    MfG

    • Das ist natürlich richtig!
      Ich würde dann allerdings keine gaOptout() Funktion nutzen, die von Google oder einigen Datenschutzerklärung-Generatoren vorgeschlagen wird, sondern eine ähnlich gestaltete Variante, die den Aufruf von GA-Code abhängig vom Cookie macht.
      Die klassische Version, die derzeit auf vielen Websites zu finden ist, „sagt“ Google Analytics, dass keine Daten erfasst werden dürfen. Um diese Einstellung überhaupt auszuwerten, wird Google Analytics allerdings zuerst geladen. Die Grundidee des hier vorgestellten Einsatzes ist es, gar kein Tracking Code zu laden, solange kein Cookie mit dem „erlaubt“-Wert (Opt-In) bzw. kein Cookie mit dem „verboten“-Wert (Opt-Out) vorhanden ist.

Kommentare sind geschlossen.