Google Tag Manager (GTM) & Google Zustimmungsmodus v2

Diese Anleitung wurde aktualisiert, um die Änderungen zu berücksichtigen, die mit dem neuen Google Consent Mode V2 eingeführt wurden. Klaro ist jetzt vollständig mit diesem neuen Modus kompatibel!

Wenn Sie die gehostete Version von Klaro verwenden, kann die GTM-Unterstützung automatisch aktiviert werden, indem Sie den Dienst "Google Tag Manager" über die Registerkarte "Konfigurationen" oder den Einrichtungsassistenten zu Ihrer Konfiguration hinzufügen. Sie müssen jedoch weiterhin den erforderlichen Ereignisauslöser in der GTM-Web-Benutzeroberfläche erstellen.

Diese Anleitung erklärt, wie Sie Klaro in den Google Tag Manager (GTM) integrieren können, um die Zustimmung für Dienste zu verwalten, die innerhalb des GTM verwaltet werden. Die Einverständniserklärung, die Sie unten sehen, steuert eine Beispiel-GTM-Installation, die einen Google Analytics-Tag verwaltet. Klaro kann GTM-Tags vollständig verwalten und unterstützt auch den neuen "Zustimmungsmodus" von Google. Beispielsweise steuert die unten stehende Einverständniserklärung einen GTM-Tag, der auf dieser Website installiert ist und beim Laden einen Google Analytics-Tag lädt, aber nur, wenn Sie die Verwendung von Google Analytics über Klaro akzeptiert haben.

Bitte beachten Sie, dass Sie mit den neuen Änderungen des Zustimmungsmodus V2 zwei zusätzliche Datenwerte ad_user_data und ad_personalization senden müssen, die zusätzlich zu ad_storage und analytics_storage gesendet werden müssen. Sie sollten diese Berechtigungen wie in der Beispielkonfiguration unten separat anfordern.

<script type="application/javascript" type="text/plain" data-name="google-tag-manager">(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-MZTF9XR');</script>
<noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Beispiel

Nehmen wir an, wir möchten GTM verwenden, um ein Google Analytics-Tag in unsere Website einzubetten. Dazu binden wir zunächst den GTM in unsere Website ein und modifizieren ihn so, dass er von Klaro verwaltet werden kann.

<head>
    ...
    <!-- Google Tag Manager -->
    <script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(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-MZTF9XR');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
     <!-- Google Tag Manager (noscript) -->
    <noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    ...
</body>

Dann erstellen wir ein Google Analytics-Tag in der GTM-Web-UI. Als Auslöser erstellen wir einen benutzerdefinierten Ereignisauslöser [^1] mit dem Namen klaro-google-analytics-accepted. Damit stellen wir sicher, dass GTM Google Analytics nur dann lädt, wenn der Benutzer über Klaro seine Zustimmung dazu gegeben hat. Und das war's! Klaro verwaltet nun GTM und stellt sicher, dass nur Dienste geladen werden, für die der Benutzer über Klaro seine Zustimmung erteilt hat. Wichtig: Um einen weiteren Dienst über GTM hinzuzufügen, fügen Sie ihn zunächst zu Ihrer Klaro-Konfiguration hinzu und definieren dann einfach einen benutzerdefinierten Ereignisauslöser der Form klaro-[service-name]-accepted, wobei [service-name] der Name des Dienstes in der Klaro-Konfiguration ist.

[^1] https://support.google.com/tagmanager/answer/7679219?hl=de

Beispiel Config

Hier ist die Beispielkonfiguration von Klaro, die wir auf dieser Seite verwendet haben. Wir definieren sowohl einen "Google Tag Manager"-Service als auch einen "Google Analytics"-Service. Die verschiedenen Event-Handler (onInit, onAccept, onDecline) sorgen dafür, dass GTM über die vom Benutzer getroffenen Einwilligungsentscheidungen informiert wird, was wiederum GTM ermöglicht, die entsprechenden Tags zu laden.

var klarConfig = {
    acceptAll: true,
    services: [
        {
            name: 'google-tag-manager',
            required: true,
            purposes: ['marketing'],
            onAccept: `
                // we notify the tag manager about all services that were accepted. You can define
                // a custom event in GTM to load the service if consent was given.
                for(let k of Object.keys(opts.consents)){
                    if (opts.consents[k]){
                        let eventName = 'klaro-'+k+'-accepted'
                        dataLayer.push({'event': eventName})
                    }
                }
            `,
            onInit: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
        },
        {
            // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
            name: 'google-analytics',
            cookies: [
                /^_ga(_.*)?/ // we delete the Google Analytics cookies if the user declines its use
            ],
            purposes: ['marketing'],
            onAccept: `
                // we grant analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'granted',
                })
            `,
            onDecline: `
                // we deny analytics storage
                gtag('consent', 'update', {
                    'analytics_storage': 'denied',
                })
            `,
        },
        {
            name: 'google-ads',
            cookies: [],
            onAccept: `
                // we grant ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'granted',
                    'ad_user_data': 'granted',
                    'ad_personalization': 'granted'
                })
            `,
            onDecline: `
                // we decline ad storage and personalization
                gtag('consent', 'update', {
                    'ad_storage': 'denied',
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied'
                })
            `,
            purposes: ['marketing'],
        }
    ]
}

Überprüfen Ihrer Konfig.

Um Ihre Konfiguration zu überprüfen, können Sie den Tag Assistant verwenden. Geben Sie einfach die URL der Website ein, in die Sie Klaro integrieren (dies kann auch eine lokale URL sein) und GTM wird versuchen, eine Verbindung zu dieser Website herzustellen. Sie können dann die Ereignisse sehen, wenn sie ausgelöst werden. Wenn Sie zum Beispiel die Seite mit der obigen Konfiguration laden, sollten Sie sehen, dass sich alle Speichertypen im Status denied befinden. Wenn Sie sowohl Google Ads als auch Google Analytics akzeptieren, sollten Sie sehen, dass die Zustimmung aktualisiert wurde und alle Speichertypen auf granted eingestellt sind. Wenn Sie entweder Google Ads oder Google Analytics im Zustimmungsdialog umschalten, sollten Ereignisse ausgelöst werden, die den Zustimmungsstatus für diese beiden Fälle aktualisieren.

Haben Sie Fragen?

Wir wissen, dass die Integration von Klaro mit dem Google Tag Manager und dem neuen Zustimmungsmodus V2 nicht ganz einfach ist. Wenn Sie also Fragen haben, zögern Sie nicht, uns zu kontaktieren !