{"id":431,"date":"2018-05-11T14:02:07","date_gmt":"2018-05-11T12:02:07","guid":{"rendered":"https:\/\/www.dair-media.net\/blog\/?p=431"},"modified":"2021-01-11T14:51:34","modified_gmt":"2021-01-11T13:51:34","slug":"google-analytics-mit-optin-implementieren","status":"publish","type":"post","link":"https:\/\/www.dair-media.net\/blog\/google-analytics-mit-optin-implementieren\/","title":{"rendered":"DSGVO: Google Analytics mit Opt-In implementieren"},"content":{"rendered":"

Im Rahmen der Vorbereitung auf die DSGVO besch\u00e4ftigen sich viele Webseitbetreiber mit der Frage, ob sie f\u00fcr Web Analyse Tools wie Google Analytics ein \u201eOpt-Out\u201c oder ein \u201eOpt-In\u201c ben\u00f6tigen. Die rechtliche Seite dieser Frage \u00fcberlasse ich den Juristen. An dieser Stelle m\u00f6chte ich eine technische L\u00f6sung vorstellen, wie Sie Google Analytics mit Opt-In implementieren k\u00f6nnen. Einen praktischen \u00dcberblick \u00fcber die DSGVO sowie eine Checkliste f\u00fcr die eigene Website<\/a> finden Sie zum Beispiel bei den Kollegen von AdBox24.<\/p>\n

Update Mai 2018<\/strong>: Einen interessanten Beitrag zum Thema Opt-In-Pflicht f\u00fcr Cookies gibt es zum Beispiel beim RA Dr. Thomas Schwenke unter https:\/\/drschwenke.de\/dsgvo-tracking-cookies-online-marketing-gluecksspiel\/<\/a>.<\/p>\n

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

Grundidee<\/h2>\n

Bei einem \u201eOpt-Out\u201c k\u00f6nnen die Website-Besucher nachtr\u00e4glich sich daf\u00fcr entscheiden, dass sie nicht \u201egetrackt\u201c werden wollen. Bei einem \u201eOpt-In\u201c soll das Tracking gar nicht erst erfolgen, bis die Nutzer dies explizit eingewilligt haben. Das hei\u00dft 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\u00f6sung sieht also folgenderma\u00dfen aus:<\/p>\n

    \n
  1. Lade generell kein Tracking-Code (in diesem Fall: Google Analytics) auf der Website.<\/li>\n
  2. Erm\u00f6gliche dem Nutzer, das Tracking mit Google Analytics explizit zu erlauben.<\/li>\n
  3. Lade dann dynamisch den Analytics-Code nach.<\/li>\n
  4. Stelle sicher, dass auch bei allen weiteren Seitenaufrufen der Analytics-Code nur dann geladen wird, wenn die Erlaubnis vom Nutzer noch besteht.<\/li>\n
  5. Im Sinne von DSGVO gib dem Nutzer die M\u00f6glichkeit, seine Erlaubnis (\u201eEinwilligung\u201c) f\u00fcr da Tracking zu widerrufen.<\/li>\n<\/ol>\n

    Schauen wir im Folgenden die Technik hinter diesen Schritt im Einzelnen an. Dabei betrachten wir vor allem die Umsetzung f\u00fcr Google Analytics. Doch auch andere Tools wie der Google Tag Manager (GTM) lassen sich damit \u00e4hnlich steuern. Wir schauen auch die L\u00f6sung f\u00fcr den GTM an. Und auch die \u201eDo-Not-Track\u201c Anweisung vom Webbrowser kann auf diese ber\u00fccksichtigt werden.<\/p>\n

    Bonus<\/strong>: Zum Schluss schauen wir, wie diese L\u00f6sung auch ohne Plugins in WordPress eingebaut werden kann.<\/p>\n

    Schritt 1: Kein Tracking-Code ohne Einwilligung<\/h2>\n

    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.<\/p>\n

    Schritt 2: Hole ein \u201eOpt-In\u201c vom Nutzer ein<\/h2>\n

    Das beliebte Cookie Consent Script von insites.com<\/a> (fr\u00fcher bekannt als \u201eCookie Consent von Silktide\u201c) bietet auch eine M\u00f6glichkeit, Opt-in zu erstellen. Diese Variante setzen wir in dieser L\u00f6sung auch ein.<\/p>\n

    Zu beachten ist, dass der Script nur einen Cookie setzt, der das \u201eEinverst\u00e4ndnis\u201c des Nutzers speichert. Ob dies rechtlich auch als eine \u201eEinwilligung\u201c einzusehen ist, ist zumindest fraglich. Zudem ist es f\u00fcr Website-Betreiber schwierig nachzuweisen, dass<\/u> und wann<\/u> ein Nutzer das Cookie-Banner best\u00e4tigt hat. Um ganz sicher zu sein, m\u00fcsste die L\u00f6sung also ggf. noch erweitert werden. Wir bleiben bei der einfachen Version.<\/p>\n

    Der \u201eCookie Consent\u201c kann auf https:\/\/cookieconsent.insites.com\/download\/<\/a> direkt heruntergeladen werden. Sie haben gleich die M\u00f6glichkeit, das Aussehen der Cookie-Leiste und die Texte anzupassen. W\u00e4hlen sie auf jeden Fall bei \u201e5. Complience Type\u201c die Variaten \u201eAsk users to opt into cookies (Advanced)\u201d. Der Generator auf der Download-Seite erzeugt gleich den Aufruf-Code. Hierzu sind zwei Punkte zu beachten:<\/p>\n

      \n
    1. Den Hinweis, dass wir erweiterte Optionen f\u00fcr den Opt-In umsetzen m\u00fcssen gehen wir in diesem Beitrag im Schritt 5 an.<\/li>\n
    2. Ich rate den Quellcode des \u201eCookie Consent\u201c unter https:\/\/github.com\/insites\/cookieconsent\/<\/a> herunterzuladen, um den Basis-JavaScript und die CSS lokal abzulegen, statt diese von Cloudfire-CDN abzurufen (was weitere Datenschutz-rechtliche Fragen aufwerfen kann).<\/li>\n<\/ol>\n

      Hier ist der Aufruf-Code inklusive eines Beispiel-Textes auf Deutsch im \u201eClassic\u201c-Design:<\/p>\n

      <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/PFAD-ZU\/cookieconsent.min.css\" \/>\r\n<script src=\"\/PFAD-ZU\/cookieconsent.min.js\"><\/script>\r\n<script>\r\nwindow.addEventListener(\"load\", function(){\r\n\twindow.cookieconsent.initialise({\r\n\t\t\"palette\": {\r\n\t\t\t\"popup\": { \"background\": \"#000\"},\r\n\t\t\t\"button\": { \"background\": \"#f1d600\"}\r\n\t\t},\r\n\t\t\"theme\": \"classic\",\r\n\t\t\"type\": \"opt-in\",\r\n\t\t\"content\": {\r\n\t\t\t\"message\": \"Wir nutzen Cookies und Google Analytics, um diese Website f\u00fcr Sie so interessant wie m\u00f6glich zu gestalten. Sind Sie damit einverstanden? (Sie k\u00f6nnen diese Entscheidung jederzeit widerrufen)\",\r\n\t\t\t\"deny\":\"Ablehnen\",\r\n\t\t\t\"allow\": \"OK, gerne!\",\r\n\t\t\t\"link\": \"Datenschutzerkl\u00e4rung\",\r\n\t\t\t\"href\": \"www.IhreDomain.de\/datenschutz.html\"\r\n\t\t}\r\n\t})\r\n});\r\n<\/script><\/pre>\n
      Passen Sie auf jeden Fall den Pfad zu den .js und .css Dateien. Sie k\u00f6nnen diesen Code entweder vor dem schlie\u00dfenden <\/head> Tag oder \u00a0auch vor dem <\/body> Tag einf\u00fcgen.<\/p>\n
      Weitere Anpassungen betrachten wir, wie gesagt, im Schritt 5.<\/p>\n
      Schritt 3: Analytics-Code dynamisch nachladen<\/h2>\n
      Nun geht es darum, Google Analytics Tracking Code (GATC) dynamisch innerhalb einer JavaScript Funktion zu laden. Nachfolgende L\u00f6sung basiert darauf, dass Sie Universal Analytics mit analytics.js verwenden. Google bietet auf seiner Developer-Website<\/a> eine Alternative Version des Codes, die asynchron aufgerufen werden kann. Diese modifizieren wir ein wenig und erg\u00e4nzen nat\u00fcrlich um den „anonymizeIp<\/a>“ Aufruf:<\/p>\n
      function loadGAonConsent(){\r\n  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;\r\n  ga('create', 'UA-XXXXX-X', 'auto');\r\n  ga('set', 'anonymizeIp', true);\r\n  ga('send', 'pageview');\r\n  var gascript = document.createElement(\"script\");\r\n  gascript.async = true;\r\n  gascript.src = \"https:\/\/www.google-analytics.com\/analytics.js\";\r\n  document.getElementsByTagName(\"head\")[0].appendChild(gascript, document.getElementsByTagName(\"head\")[0]);               \r\n}<\/pre>\n
      HINWEIS<\/strong>: Diese L\u00f6sung basiert auf Universal Analytics und nicht auf dem neueren Global Site Tag (gtag.js).<\/p>\n
      Nun k\u00f6nnen wir Google Analytics bei Bedarf bzw. nur bei einer Einwilligung ausf\u00fchren, indem wir die Funktion loadGAonConsent(); aufrufen. Schauen wir im n\u00e4chsten Schritt an, wie wir das machen bei einer Einwilligung (engl.: \u201econsent\u201c) machen k\u00f6nnen.<\/p>\n
      Schritt 4: Analytics-Code auf allen Seiten laden<\/h2>\n
      Liegt eine Einwilligung des Nutzers vor, k\u00f6nnen wir den Tracking-Code nat\u00fcrlich auf allen Seiten direkt laden. Dazu m\u00fcssen wir zuerst \u00fcberpr\u00fcfen, ob die Einwilligung vorliegt und dann den Analytics Code laden. Wir erweitern also die bisherige L\u00f6sung wie folgt.<\/p>\n
      Der \u201eCookie Consent\u201c Script speichert in einem Cookie („cookieconsent_status“), wof\u00fcr sich der Website-Besucher entschieden hat. F\u00fcr die Opt-In Variante gibt es drei M\u00f6glichkeiten: 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\u00fcrfen wir den Google Analytics Code auch ausf\u00fchren. Wir pr\u00fcfen also, ob der Cookie gesetzt und den richtigen Wert hat und rufen den GATC nur dann auf:<\/p>\n
      if (document.cookie.split(';').filter(function(item) {\r\n    return item.indexOf('cookieconsent_status=allow') >= 0\r\n}).length) {\r\n    loadGAonConsent();\r\n}<\/pre>\n
      Schritt 5: GATC bei Einwilligung laden<\/h2>\n
      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\u00f6sung w\u00e4re, den Aufruf-Code um folgende Konfiguration zu erweitern:<\/p>\n
      onStatusChange: function(status, chosenBefore) {\r\n\tvar type = this.options.type;\r\n\tvar didConsent = this.hasConsented();\r\n\tif (type == 'opt-in' && didConsent) {\r\n\t\t\/\/ enable cookies\r\n\t\tloadGAonConsent();\r\n\t}\r\n}<\/pre>\n
      Damit wird der Google Analytics nachgeladen und direkt ein \u201ePageView\u201c erfasst. Weitere M\u00f6glichkeiten (auch f\u00fcr einen Opt-Out), finden Sie in der Dokumentation des Cookie Consent Scripts unter https:\/\/cookieconsent.insites.com\/documentation\/disabling-cookies\/<\/a>.<\/p>\n
      Schritt 6: Der komplette Code<\/h2>\n
      Die finden Sie den kompletten Code der L\u00f6sung. Bitte achten Sie darauf, die Google Analytics ID durch Ihre eigene zu ersetzen.<\/p>\n
      <link rel=\"stylesheet\" type=\"text\/css\" href=\"\/PFAD-ZU\/cookieconsent.min.css\" \/>\r\n<script src=\"\/PFAD-ZU\/cookieconsent.min.js\"><\/script>\r\n<script>\r\nfunction loadGAonConsent(){\r\n  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;\r\n  ga('create', 'UA-XXXXX-X', 'auto');\r\n  ga('set', 'anonymizeIp', true);\r\n  ga('send', 'pageview');\r\n  var gascript = document.createElement(\"script\");\r\n  gascript.async = true;\r\n  gascript.src = \"https:\/\/www.google-analytics.com\/analytics.js\";\r\n  document.getElementsByTagName(\"head\")[0].appendChild(gascript, document.getElementsByTagName(\"head\")[0]);               \r\n}\r\n\r\nif (document.cookie.split(';').filter(function(item) {\r\n    return item.indexOf('cookieconsent_status=allow') >= 0\r\n}).length) {\r\n    loadGAonConsent();\r\n}\r\n\r\nwindow.addEventListener(\"load\", function(){\r\n\twindow.cookieconsent.initialise({\r\n\t\t\"palette\": {\r\n\t\t\t\"popup\": { \"background\": \"#000\"},\r\n\t\t\t\"button\": { \"background\": \"#f1d600\"}\r\n\t\t},\r\n\t\t\"theme\": \"classic\",\r\n\t\t\"type\": \"opt-in\",\r\n\t\t\"content\": {\r\n\t\t\t\"message\": \"Wir nutzen Cookies und Google Analytics, um diese Website f\u00fcr Sie so interessant wie m\u00f6glich zu gestalten. Sind Sie damit einverstanden? (Sie k\u00f6nnen diese Entscheidung jederzeit widerrufen)\",\r\n\t\t\t\"deny\": \"Ablehnen\",\r\n\t\t\t\"allow\": \"OK, gerne!\",\r\n\t\t\t\"link\": \"Datenschutzerkl\u00e4rung\",\r\n\t\t\t\"href\": \"www.IhreDomain.de\/datenschutz.html\"\r\n\t\t},\r\n\t\tonStatusChange: function(status, chosenBefore) {\r\n\t\t\tvar type = this.options.type;\r\n\t\t\tvar didConsent = this.hasConsented();\r\n\t\t\tif (type == 'opt-in' && didConsent) {\r\n\t\t\t\t\/\/ enable cookies\r\n\t\t\t\tloadGAonConsent();\r\n\t\t\t}\r\n\t\t}\r\n\t})\r\n});\r\n<\/script><\/pre>\n
      Erg\u00e4nzung: Do-Not-Track Einstellung ber\u00fccksichtigen<\/h2>\n
      Sendet der Webbrowser eines Website-Besuchers den \u201eDo Not Track<\/a>\u201c (DNT) Header, muss dieser nat\u00fcrlich auch beachtet werden. Eine reine JavaScript-L\u00f6sung k\u00f6nnte zum Beispiel so aussehen:<\/p>\n
      <script>\r\nif (navigator.doNotTrack != 1 && navigator.doNotTrack != \"yes\" && window.doNotTrack != 1 && navigator.msDoNotTrack != 1) {\r\n\t\/\/ DNT is off\r\n}\r\n<\/script>\r\n<\/pre>\n
      Damit m\u00fcssen 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.<\/p>\n
      Fazit<\/h2>\n
      Mit dem \u201cCookie Consent\u201d Script f\u00fcr die Darstellung des Cookie-Banners und wenigen Zeilen Code l\u00e4sst sich also recht einfach eine Opt-In L\u00f6sung f\u00fcr 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\u00fcssen entsprechend angepasst werden. Sie d\u00fcrfen nur dann ausgef\u00fchrt werden, wenn der GATC auch geladen wurde.<\/p>\n
      Auch eine PHP-L\u00f6sung f\u00fcr Aufruf des Tracking-Codes ist m\u00f6glich. Hier muss nur der Cookie-Wert ausgelesen werden.<\/p>\n
      Bonus: Implementierung in WordPress<\/h2>\n
      Um die L\u00f6sung in eine WordPress Installation einzuf\u00fcgen, m\u00fcssen nur entsprechende Skripte und die CSS-Datei von \u201eCookie Consent\u201c in das verwendete Theme eingef\u00fcgt werden. Die CSS l\u00e4sst sich meisten \u00fcber den Theme-Editor hinzuf\u00fcgen. F\u00fcr die JavaScripts empfehle ich den Plugin Insert Headers and Footers<\/a>. Damit lassen sich eigene Scripts (und nicht nur) in den Head-Bereich sowie im unteren Bereich im Body-Tag der Website einf\u00fcgen.<\/p>\n
      \""Insert<\/a>
      „Insert Headers and Footers“ Plugin<\/figcaption><\/figure>\n
      Nat\u00fcrlich gibt es auch mehrere WP-Plugins, die diese Implementierung auch etwas einfacher machen, zum Beispiel das Google Analytics Germanized<\/a>.<\/p>\n
      Wie k\u00f6nnen wir Ihnen helfen?<\/h2>\n
      Ben\u00f6tigen Sie Unterst\u00fctzung bei der Einrichtung vom Google Analytics? Wir helfen Ihnen gerne!<\/p>\n
      Web Analytics Beratung \u00bb<\/a><\/p>\n
      Hat Ihnen der Artikel gefallen? Teilen Sie ihn bitte.<\/div>