Login
E-MailE-Mail
Telefon
0800-8976326 (innerhalb Deutschland) oder +49 711-94969-60

Google Tag Manager und andere Drittanbieter zum Klaro Cookie Consent Manager hinzufügen

In unserem Template für TYPO3 stellen wir seit Version 10 das Open-Source-Skript „Klaro“ als Cookie Consent Manager (CCM) zur Verfügung. Dieses haben wir schon für gängige Tools wie Matomo, Google Analytics, Facebook Pixel, X und Youtube / Vimeo und ab unserem Template Version 13.2.0 auch für den Google Tag Manager vorkonfiguriert. Sollten jedoch weitere Drittanbieter benötigt werden, lassen sich diese relativ einfach ergänzen.

In dieser Anleitung integrieren wir einen Beispiel-Code des Google Tag Managers in unser Template für TYPO3, da dieser eine besondere Stellung unter den Tracking Tools einnimmt. Das Prinzip ist aber für jeden anderen Dienst grundlegend gleich.

Was ist der Google Tag Manager?

Der Google Tag Manager (GTM) ist ein kostenloses Tool von Google, mit dem verschiedene Tracking-Codes (sogenannte Tags) auf einer Website zentral verwaltet werden können – ohne dass dafür direkt der Quellcode angefasst werden muss (zumindest nach der ersten Einrichtung). Das bedeutet, dass Sie zum Beispiel Google Analytics, Google Ads oder Facebook Pixel nicht mehr als Code direkt auf Ihrer Website integrieren müssen, sondern in Ihrem GTM-Account verwalten können. Sinn macht das dann, wenn Sie mehrere Dienste einsetzen oder Ihre Auswahl häufiger anpassen wollen.

Das Einbinden von Drittanbietern in unser Template für TYPO3 funktioniert in zwei Schritten:

  1. Code-Snippet auf der Website einbinden (je nach Anforderung im <head> und/oder im <body>-Tag)
  2. Abfrage im Klaro CCM hinzufügen

1. Code-Snippet auf der Website einbinden

Um den GTM auf einer Website zu integrieren, sollen gemäß Anleitung zwei Code-Snippets im Quellcode platziert werden: eines im <head> der Website und eines innerhalb des <body>-Tags. Der Code-Schnipsel im <body> Tag (ein <noscript>-Block mit einem <iframe> darin) ist dabei ein Fallback für den Schnipsel im <head>, der den Container auch dann lädt, wenn der Browser kein JavaScript unterstützt oder wenn JavaScript blockiert wird. Da wir aber Klaro verwenden, einen Cookie Consent Manager, der nur mit JavaScript funktioniert, sollte in diesem Fall auf den <noscript>-Block verzichtet werden. Ohne JavaScript würde der CCM nicht geladen und der Benutzer hätte keine Chance, das Tracking zu verweigern. Der Google Tag Manager ist aber auch ohne dieses Snippet voll funktionsfähig, solange JavaScript zur Verfügung steht.

Fügen Sie daher im TypoScript, zum Beispiel in der Datei

Configuration/TypoScript/General/Setup/001_page.typoscript

Als page.headerData Objekt lediglich das Code-Snippet ein, das für den <head> bestimmt ist:

page.headerData.1588597225 = TEXT
page.headerData.1588597225.value (
<script type=“text/plain” data-type=“application/javascript” data-name=“googleTagManager”>
[…]
</script>
)

Beachten Sie dabei folgendes:

  • Geben Sie dem “page.headerData” Objekt eine frei wählbare, auf der Website noch nicht vergebene Nummer. Je höher die Nummer, umso später wird das Script geladen. Achten Sie bei mehreren Scripts auf eine geeignete Reihenfolge.
  • Der Wert des type Attributs im <script>-Tag muss durch text/plain ersetzt werden (dies verhindert, dass der Browser das Skript ausführt) der ursprüngliche Typ muss als data-type="…", z.B. data-type="application/javascript" hinzugefügt werden.
  • Es muss im <script>-Tag außerdem ein data-name Attribut hinzugefügt werden, das dem Namen der gegebenen Anwendung in der Konfiguration (siehe weiter unten) entspricht, in unserem Beispiel data-name="googleTagManager".

Für mehr Übersicht

In unserem Template für TYPO3 befinden sich die Code-Snippets für die bereits vorkonfigurierten Drittanbieter im Verzeichnis:

Configuration/TypoScript/AddOns/KlaroConsentManager

Für mehr Übersichtlichkeit können Sie auch analog zu den bestehenden ein neues Unterverzeichnis “GoogleTagManager/Setup” anlegen, darin die Datei “gtm.typoscript” erstellen und den TypoScript Code “page.headerData...” dort einfügen.

Die neu erstellte TypoScript Datei wird eventuell noch nicht automatisch auf der Website eingebunden. Das Einbinden geschieht über einen Import:

@import "EXT:jwsitepackage/Configuration/TypoScript/AddOns/
KlaroConsentManager/GoogleTagManager/Setup/gtm.typoscript"
(Template Version 13)

zum Beispiel in der Datei:

Configuration/Sets/Jwsitepackage/setup.typoscript
(Template Version 13)

Ob das neue TypoScript eingebunden wird, können Sie im TYPO3 Backend im “TypoScript Object Browser” bzw. unter “Active TypoScript”, oder im Quellcode Ihrer Website überprüfen.

2. Abfrage im Klaro Consent Manager hinzufügen

Nun muss noch im Klaro CCM die Option für den Google Tag Manager ergänzt werden.

Dazu gehen wir in das Verzeichnis

/Partials/KlaroModules

wo auch schon die Klaro Module der vorkonfigurierten Drittanbieter liegen.

Erstellen Sie darin die Datei “GoogleTagManager.html” und fügen Sie den folgenden Konfigurationscode ein (Quelle: https://klaro.org/de/doku/anleitungen/google_tag_manager):

klaroConfig.services.push(
    {
        name: 'googleTagManager',
        required: false,
        purposes: ['marketing'],
        onAccept: `
for(let k of Object.keys(opts.consents)){
if (opts.consents[k]){
let eventName = 'klaro-'+k+'-accepted'
dataLayer.push({'event': eventName})
}
}
`,
        onInit: `
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)
`,
    },
);

Wichtig ist hier, dass der Name name : 'googleTagManager' mit dem data-name im Code-Snippet im <head> übereinstimmt. Nur so kann der Code später über den Klaro Consent Manager ein- und ausgeschaltet werden.

Die Event-Handler “onAccept” und “onInit” dienen dazu, dass der Google Tag Manager über die Zustimmung des Benutzers informiert wird und die entsprechenden eingebundenen Tags laden kann.

Dieses neue Partial müssen wir jetzt noch in der Datei

/Partials/Klaro.html

im unteren Bereich hinzufügen, wo auch schon die Partials für die anderen Drittanbieter eingebunden sind. 

<f:render partial="KlaroModules/GoogleTagManager"/>

Die Bedingung "<f:if condition="{settings…" können wir uns dabei sparen, da diese nur dafür da ist, dass Sie als Administrator das Modul über den Konstanten-Editor bzw. über den Site-Settings-Editor im Backend ein- und ausgeschalten können. Die in der condition abgefragte Variable müsste auch erst erstellt werden.

Über GTM Verwaltete Dienste in Klaro integrieren

Der Google Tag Manager ist nun auf Ihrer Website eingerichtet. Die Dienste, die Sie mit dem GTM verwalten wollen, können Sie jetzt über Ihren GTM-Account pflegen. Damit diese aber im Klaro Consent Manager auftauchen, müssen sie in der Konfiguration hinzugefügt werden.

Für Google Analytics zum Beispiel ist das in unserem Template für TYPO3 schon erledigt. Sie finden die Konfiguration in der Datei 

Partials/KlaroModules/GoogleAnalytics.html

Erweitern Sie diese wie folgt (Quelle: https://klaro.org/de/doku/anleitungen/google_tag_manager):

var gaPath = "{settings.gaPath}";
var gaDomain = "{settings.gaDomain}";
klaroConfig.services.push(
    {
        name : 'googleAnalytics',
        cookies: [
            /^_g(a|id|at_.*|ac_.*)$/, gaPath, gaDomain
        ],
        purposes: ['marketing'],
        onAccept: `
		gtag('consent', 'update', {
		'analytics_storage': 'granted',
		})
		`,
        onDecline: `
		gtag('consent', 'update', {
		'analytics_storage': 'denied',
		})
		`,
    },
);

Im Google Tag Manager muss jetzt noch für Google Analytics ein benutzerdefinierter Ereignisauslöser der Form klaro-[service-name]-accepted erstellt werden, wobei [service-name] der Name des Dienstes in der Klaro-Konfiguration ist. In unserem Beispiel:

klaro-googleAnalytics-accepted

Durch das Hinzufügen von “klaro-[service-name]-accepted”, also immer der “name” in der Klaro Konfiguration mit vorangehendem “klaro-” sowie angehängtem “-accepted”, wird der Google Tag Manager darüber informiert, ob dieser Dienst akzeptiert wurde oder nicht.

Wenn Sie einen Dienst über den Google Tag Manager hinzufügen, der in unserem Template für TYPO3 schon vorkonfiguriert ist, müssen Sie das zugehörige Code Snippet aus dem Template entfernen, Beziehungsweise dafür sorgen, dass es nicht ausgegeben wird (in unserem Beispiel der Google Analytics Code. Dieser befindet sich in der Datei Configuration/TypoScript/AddOns/KlaroConsentManager/GoogleAnalytics/Setup/ga.typoscript. Sie können diesen Code zum Beispiel auskommentieren oder im Konstanten-Editor bzw. im Site-Settings-Editor das Feld für die Tracking ID von Google Analytics leer lassen). 

Testen

Nun haben Sie den Google Tag Manager auf Ihrer Website eingebunden, im Klaro Banner die Option hinzugefügt, diesen zu akzeptieren oder abzulehnen, und Sie haben einen ersten Dienst, nämlich Google Analytics, hinzugefügt. Ob das ganze auch funktioniert, muss noch getestet werden. Google stellt dafür den Tag Assistent zur Verfügung.

Das Setzen von Cookies auf einer Website allgemein können Sie testen, indem Sie die Webmaster Tools Ihres Browsers aufrufen und auf den Reiter “Application” (in Chrome) wechseln. Dann sehen Sie in der linken Spalte unter “Storage” das Element “Cookies”. Wenn Sie dieses aufklappen, wird dort mindestens die URL Ihrer Website aufgelistet. wenn Sie auf die URL klicken, sehen Sie in der Tabelle rechts, ob, und wenn ja, welche Cookies gesetzt werden.

Weiterführende Links

Aktualisiert: 27.06.2025