{"id":822,"date":"2020-07-08T14:25:27","date_gmt":"2020-07-08T12:25:27","guid":{"rendered":"https:\/\/www.dair-media.net\/blog\/?p=822"},"modified":"2021-02-19T16:43:50","modified_gmt":"2021-02-19T15:43:50","slug":"klaro-consent-tool-mit-google-tag-manager-nutzen","status":"publish","type":"post","link":"https:\/\/www.dair-media.net\/blog\/klaro-consent-tool-mit-google-tag-manager-nutzen\/","title":{"rendered":"Klaro! Consent Tool mit Google Tag Manager nutzen"},"content":{"rendered":"

Setzen Sie Tools wie Google Analytics auf der eigenen Website ein, m\u00fcssen Sie nach der aktuellen Rechtslage<\/a> die Website-Besucher um die Erlaubnis fragen, ob diese Tools auch Cookies setzen d\u00fcrfen. Es wird in diesem Zusammenhang von einem so genannten \u201eOpt-In\u201c gesprochen. In der Regel wird so eine Erlaubnis (engl.: \u201eConsent\u201c) \u00fcber einen so genannten Cookie Banner eingeholt. Binden Sie Google Analytics (und andere Tools) \u00fcber den Google Tag Manager (GTM) ein, m\u00fcssen Sie den Cookie-Banner bzw. das entsprechende Consent Management Tool mit dem GTM verbinden. Denn GTM darf solche Tools erst ausf\u00fchren, wenn der Website-Besucher eine solche Erlaubnis erteilt hat.<\/p>\n

Wir haben uns das Open Source Tool Klaro!<\/a> und die Einrichtung f\u00fcr Google Analytics im Zusammenspiel mit dem Google Tag Manager angeschaut. In diesem Beitrag erfahren Sie, wie Sie Klaro! mit dem GTM verbinden, so dass der Tag Manager Google Analytics und andere eingebundenen Tools nur dann ausf\u00fchrt, wenn die Nutzer dies erlaubt haben.<\/p>\n

\n

Ob der Google Tag Manager selbst ohne eines Opt-In ausgef\u00fchrt werden kann, ist derzeit rechtlich umstritten. In diesem Beitrag gehe ich davon aus, dass der Google Tag Manager ausgef\u00fchrt wird und ein Consent nur f\u00fcr weitere Tools eingeholt wird, die im Tag Manager verwaltet werden.<\/p>\n

Ich leiste keine Rechtsberatung<\/strong>! Im Rahmen meiner Arbeit besch\u00e4ftige ich mich u.a. intensiv mit den geltenden Datenschutzbestimmungen, der DSGVO und den Cookies. Ich bin jedoch weder Rechtsanwalt noch Datenschutz-Experte. Dementsprechend kann ich f\u00fcr die Vollst\u00e4ndigkeit, Aktualit\u00e4t und Richtigkeit der von mir bereitgestellten Inhalte keine Haftung \u00fcbernehmen. F\u00fcr alle Rechtsfragen zu diesen Themen konsultieren Sie bitte einen Rechtsanwalt Ihres Vertrauens oder Ihren Datenschutzbeauftragten.<\/p>\n<\/div>\n

Was ist Klaro?<\/h2>\n

Klaro! ist ein Open-Source Cookie-Consent-Tool, welches praktisch in jede Website eingebunden werden kann. Das Tool l\u00e4sst sich per CSS an das Design der eigenen Website anpassen. Die Besucher k\u00f6nnen einzelne Apps wie Google Analytics, Matomo, Facebook Pixel etc. einzeln erlauben oder verbieten. Dabei steuert Klaro! auf Wunsch auch das Laden der einzelnen Tools.<\/p>\n

Klaro! einrichten<\/h2>\n

Um Klaro in die eigene Website einzubinden, ben\u00f6tigen Sie diese zwei Zeilen Code:<\/p>\n

<script defer type=\"application\/javascript\"src=\"\/js\/klaro-config.js\"><\/script>\r\n<script defer data-config=\"consentConfig\" type=\"application\/javascript\" src=\"\/js\/klaro.js\"><\/script><\/pre>\n
In der Konfigurationsdatei k\u00f6nnen Sie die einzelnen Tools definieren, f\u00fcr die ein Consent eingeholt werden soll. Die eigentliche Applikation (klaro.js) finden Sie auf der Website des Projektes unter https:\/\/klaro.kiprotect.com\/<\/a> . Dort finden Sie auch eine Beispiel-Konfiguration sowie weitere Tipps zur Einrichtung.<\/p>\n
In unserem Beispiel richten wir Google Analytics ein.<\/p>\n
Google Analytics in Klaro konfigurieren<\/h2>\n
In der klaro-config.js k\u00f6nnen Sie Google Analytics zum Beispiel wie folgt konfigurieren:<\/p>\n
apps: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name: 'googleAnalytics',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 default: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 title: 'Google Analytics',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 purposes: ['analytics'],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cookies: [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 [\/^_ga.*$\/i, '\/', '.ihredomain.de'],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ['_gid', '\/', '. ihredomain.de '],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 [\/^_dc_gtm.*$\/i, '\/', '. ihredomain.de '],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 callback: function(consent, app) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 if(consent !== false){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 window.dataLayer.push({'event' : 'consent-analytics'});\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 required: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 optOut: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n]<\/pre>\n
Beachten Sie hier bitte folgende zwei Abschnitte:<\/p>\n
    \n
  1. Cookies:<\/strong> Hier definieren Sie die Cookies, welche Google Analytics setzt. Deaktiviert ein Website-Besucher Google Analytics im Consent-Tool, l\u00f6scht Klaro! diese Cookies auch direkt. Passen Sie die Domain Ihrer Website an, damit dies korrekt funktioniert.<\/li>\n
  2. Callback:<\/strong> Hier wird eine JavaScript Funktion definiert, die bei einem Wechsel des Consents (Opt-In oder Opt-Out) ausgef\u00fchrt wird. In diesem Fall definieren wir, dass ein Ereignis in den dataLayer gepusht wird, wenn ein positiver Consent (Opt-In) erteilt wurde. Der Google Tag Manager kann dann darauf reagieren und den entsprechenden Code laden (oder auch nicht).<\/li>\n<\/ol>\n
    Google Tag Manager einrichten<\/h2>\n
    Der Google Tag Manager (GTM) soll ganz normal nach Anleitung von Google eingebunden werden. Idealerweise definieren auch den dataLayer vor<\/strong> dem GTM-Code. D.h. es muss mindestens dieser Code im <head> Bereich der Website eingebunden werden:<\/p>\n
    <!-- init dataLayer -->\r\n<script>\r\nwindow.dataLayer = window.dataLayer || [];\r\n<\/script>\r\n<!-- End init dataLayer -->\r\n\r\n<!-- Google Tag Manager -->\r\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\r\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\r\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\r\n'https:\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\r\n})(window,document,'script','dataLayer','GTM-XXXXXXX');<\/script>\r\n<!-- End Google Tag Manager --><\/pre>\n
    Ersetzen Sie GTM-XXXXXXX durch die richtige GTM-ID!<\/p>\n
    Auf dieser Demo-Seite haben wir die Konfiguration zusammengefasst: https:\/\/www.dair-media.net\/projekte\/gtm-klaro-demo.html<\/a><\/p>\n
    Nun richten Sie die entsprechenden Trigger und Tags im Google Tag Manager ein:<\/p>\n