Klaro! Consent Tool mit Google Tag Manager nutzen

Setzen Sie Tools wie Google Analytics auf der eigenen Website ein, müssen Sie nach der aktuellen Rechtslage die Website-Besucher um die Erlaubnis fragen, ob diese Tools auch Cookies setzen dürfen. Es wird in diesem Zusammenhang von einem so genannten „Opt-In“ gesprochen. In der Regel wird so eine Erlaubnis (engl.: „Consent“) über einen so genannten Cookie Banner eingeholt. Binden Sie Google Analytics (und andere Tools) über den Google Tag Manager (GTM) ein, müssen Sie den Cookie-Banner bzw. das entsprechende Consent Management Tool mit dem GTM verbinden. Denn GTM darf solche Tools erst ausführen, wenn der Website-Besucher eine solche Erlaubnis erteilt hat.

Wir haben uns das Open Source Tool Klaro! und die Einrichtung für 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ührt, wenn die Nutzer dies erlaubt haben.

Ob der Google Tag Manager selbst ohne eines Opt-In ausgeführt werden kann, ist derzeit rechtlich umstritten. In diesem Beitrag gehe ich davon aus, dass der Google Tag Manager ausgeführt wird und ein Consent nur für weitere Tools eingeholt wird, die im Tag Manager verwaltet werden.

Ich leiste keine Rechtsberatung! Im Rahmen meiner Arbeit beschäftige 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ür die Vollständigkeit, Aktualität und Richtigkeit der von mir bereitgestellten Inhalte keine Haftung übernehmen. Für alle Rechtsfragen zu diesen Themen konsultieren Sie bitte einen Rechtsanwalt Ihres Vertrauens oder Ihren Datenschutzbeauftragten.

Was ist Klaro?

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

Klaro! einrichten

Um Klaro in die eigene Website einzubinden, benötigen Sie diese zwei Zeilen Code:

<script defer type="application/javascript"src="/js/klaro-config.js"></script>
<script defer data-config="consentConfig" type="application/javascript" src="/js/klaro.js"></script>

In der Konfigurationsdatei können Sie die einzelnen Tools definieren, für die ein Consent eingeholt werden soll. Die eigentliche Applikation (klaro.js) finden Sie auf der Website des Projektes unter https://klaro.kiprotect.com/ . Dort finden Sie auch eine Beispiel-Konfiguration sowie weitere Tipps zur Einrichtung.

In unserem Beispiel richten wir Google Analytics ein.

Google Analytics in Klaro konfigurieren

In der klaro-config.js können Sie Google Analytics zum Beispiel wie folgt konfigurieren:

apps: [

        {
            name: 'googleAnalytics',
            default: false,
            title: 'Google Analytics',
            purposes: ['analytics'],
            cookies: [
                [/^_ga.*$/i, '/', '.ihredomain.de'],
                ['_gid', '/', '. ihredomain.de '],
                [/^_dc_gtm.*$/i, '/', '. ihredomain.de '],
            ],
            callback: function(consent, app) {
                if(consent !== false){
                    window.dataLayer.push({'event' : 'consent-analytics'});
                }
            },
            required: false,
            optOut: false,
        },
]

Beachten Sie hier bitte folgende zwei Abschnitte:

  1. Cookies: Hier definieren Sie die Cookies, welche Google Analytics setzt. Deaktiviert ein Website-Besucher Google Analytics im Consent-Tool, löscht Klaro! diese Cookies auch direkt. Passen Sie die Domain Ihrer Website an, damit dies korrekt funktioniert.
  2. Callback: Hier wird eine JavaScript Funktion definiert, die bei einem Wechsel des Consents (Opt-In oder Opt-Out) ausgeführt 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).

Google Tag Manager einrichten

Der Google Tag Manager (GTM) soll ganz normal nach Anleitung von Google eingebunden werden. Idealerweise definieren auch den dataLayer vor dem GTM-Code. D.h. es muss mindestens dieser Code im <head> Bereich der Website eingebunden werden:

<!-- init dataLayer -->
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- End init dataLayer -->

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Ersetzen Sie GTM-XXXXXXX durch die richtige GTM-ID!

Auf dieser Demo-Seite haben wir die Konfiguration zusammengefasst: https://www.dair-media.net/projekte/gtm-klaro-demo.html

Nun richten Sie die entsprechenden Trigger und Tags im Google Tag Manager ein:

  • Triggertyp: Benutzerdefiniertes Ereignis
  • Ereignisname: consent-analytics
Benutzerdefiniertes Ereignis für 'consent-analytics' als Trigger im Google Tag Manager
Benutzerdefiniertes Ereignis für ‚consent-analytics‘ als Trigger im Google Tag Manager

Nun müssen Sie noch den Tag für Google Analytics anpassen. Dieser soll erst dann ausgeführt werden, wenn das Ereignis „consent-analytics“ ausgelöst wurde. Also wenn der gerade eingerichtete Trigger aktiv wird:

Google Analytics Tag mit Consent Event als Trigger
Google Tag Manager: Google Analytics Tag mit Consent Event als Trigger

Sobald die Website-Besucher nun im Klaro!-Fenster eine Cookie-Einstellung ändern, bekommt das der Google Tag Manager dies mit und führt dann die jeweiligen Scripts aus. Auf die ähnliche Weise können Sie neben Google Analytics auch weitere Tools wie zum Beispiel Facebook Pixel u.a. einrichten.

Anders als im ursprünglichen Beitrag zum Thema Google Analytics mit Opt-In implementieren setzen wir auf unserer Website aktuell ebenfalls Klaro! ein, in einer optisch stark angepassten Version.

Wie können wir Ihnen helfen?

Sie haben Fragen zur Einrichtung von Klaro und Google Tag Manager sowie Opt-In Implementierung für Google Analytics? Wir helfen Ihnen gerne!

Google Tag Manager Beratung »

Hat Ihnen der Artikel gefallen? Teilen Sie ihn bitte.