Das ist eine Demo-Seite, wie der Klaro! Consent Manager zusammen mit Google Tag Manager (GTM) eingerichtet werden kann.
Google Analytics (GA) wird über den Google Tag Manager in die Seite eingebunden. Nun soll die Verwendung von GA davon abhängig gemacht werden, ob der Website-Besucher damit auch einverstanden ist. Dazu kommt ein Consent Manager Tool - in diesem Fall Klaro! - als das so genannte »Cookie-Banner« zum Einsatz.
Der Google Tag Manager (GTM) soll ganz normal nach Anleitung von Google eingebunden werden. D.h. es muss mindestens dieser Code im <head> Bereich eingebunden werden:
<!-- 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!
Ergänzen Sie am Besten die Definition vom dataLayer vor dem GTM-Code:<!-- init dataLayer --> <script> window.dataLayer = window.dataLayer || []; </script> <!-- End init dataLayer -->
Der komplette Code sollte dann also wie folgt aussehern:
<!-- 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 -->
Das Tool Klaro! erhalten Sie auf dessen Website: https://klaro.kiprotect.com/.
WICHTIG: Verändern Sie nicht den Code vom Google Tag Manager! Auch wenn die Anleitung von Klaro! hier eine Ergänzung von Opt-In Parametern empfiehlt.
Konfigurieren Sie Google Analytics in Klaro (klaro-config.js). hier ist ein Auszug aus unserer Beispiel-Konfiguration:
{
name: 'googleAnalytics',
default: false,
title: 'Google Analytics',
purposes: ['analytics'],
cookies: [
[/^_ga.*$/i, '/', '.dair-media.net'],
['_gid', '/', '.dair-media.net'],
[/^_dc_gtm.*$/i, '/', '.dair-media.net'],
],
callback: function(consent, app) {
console.log(
'User consent for app ' + app.name + ': consent=' + consent
);
if(consent !== false){
window.dataLayer.push({'event' : 'loadgtm-analytics'});
}
},
required: false,
optOut: false,
},
Ersetzen Sie die Domain bei den beiden Cookies gegen Ihre eigene Domain!
Ganz wichtig ist hier die Callback-Funktion. Damit wird dem GTM mitgeteilt, ob der Website-Besucher die Nutzung von Google Analytics erlaubt oder nicht.
Im Google Tag Manager (GTM) müssen alle Google Analytics Tag nur dann ausgeführt werden können, wenn der Consent (also Einverständnis des Nutzers) vorliegt. Dazu wird ein benutzerdefiniertes Ereignis mit dem Namen 'loadgtm-analytics' als Trigger erstellt. Alle Google analytics Tags werden dann nur mit diesem Trigger ausgelöst.