Add Google Tag Manager and other third-party providers to the Klaro Cookie Consent Manager

In our template for TYPO3, we have provided the open source script "Klaro" as Cookie Consent Manager (CCM) since version 10. We have already preconfigured this for common tools such as Matomo, Google Analytics, Facebook Pixel, X and Youtube / Vimeo and from our template version 13.2.0 also for the Google Tag Manager. However, if other third-party providers are required, these can be added relatively easily.

In this guide, we integrate a sample code of the Google Tag Manager into our template for TYPO3, as it has a special position among the tracking tools. However, the principle is basically the same for every other service.

What is the Google Tag Manager?

Google Tag Manager (GTM) is a free tool from Google that can be used to centrally manage various tracking codes (so-called tags) on a website - without having to touch the source code directly (at least after the initial setup). This means that you no longer have to integrate Google Analytics, Google Ads or Facebook Pixel as code directly on your website, for example, but can manage them in your GTM account. This makes sense if you use several services or want to adjust your selection more frequently.

Integrating third-party providers into our template for TYPO3 works in two steps:

Include the code snippet on the website (in the <head> and/or <body> tag, depending on requirements)
Add query in the Klaro CCM

1. embed code snippet on the website

To integrate the GTM on a website, two code snippets should be placed in the source code according to the instructions: one in the <head> of the website and one within the <body> tag. The code snippet in the <body> tag (a <noscript> block with an <iframe> in it) is a fallback for the snippet in the <head>, which loads the container even if the browser does not support JavaScript or if JavaScript is blocked. However, since we use Klaro, a cookie consent manager that only works with JavaScript, the <noscript> block should be omitted in this case. Without JavaScript, the CCM would not be loaded and the user would have no chance to refuse tracking. However, the Google Tag Manager is also fully functional without this snippet as long as JavaScript is available.

Therefore, add the snippet in the TypoScript, for example in the file

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

As page.headerData object, only insert the code snippet that is intended for the <head>:

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

Please note the following:

Give the "page.headerData" object a freely selectable number that has not yet been assigned on the website. The higher the number, the later the script will be loaded. If you have several scripts, make sure they are in a suitable order.
The value of the type attribute in the <script> tag must be replaced by text/plain (this prevents the browser from executing the script) the original type must be added as data-type="...", e.g. data-type="application/javascript".
A data-name attribute must also be added to the <script> tag, which corresponds to the name of the given application in the configuration (see below), in our example data-name="googleTagManager".

For a better overview

In our template for TYPO3, the code snippets for the already preconfigured third-party providers are located in the directory:

Configuration/TypoScript/AddOns/KlaroConsentManager

For more clarity, you can also create a new subdirectory "GoogleTagManager/Setup" analogous to the existing ones, create the file "gtm.typoscript" and insert the TypoScript code "page.headerData..." there.

The newly created TypoScript file may not yet be automatically integrated on the website. The integration is done via an import:

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

for example in the file:

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

You can check whether the new TypoScript is integrated in the TYPO3 backend in the "TypoScript Object Browser" or under "Active TypoScript", or in the source code of your website.

2. add query in Klaro Consent Manager

Now the option for the Google Tag Manager must be added in the Klaro CCM.

To do this, we go to the directory

/Partials/KlaroModules

where the Klaro modules of the preconfigured third-party providers are already located.

Create the file "GoogleTagManager.html" and insert the following configuration code (source: 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)
`,
    },
);

It is important here that the name name : 'googleTagManager' matches the data-name in the code snippet in the <head>. Only then can the code be switched on and off later via the Klaro Consent Manager.

The event handlers "onAccept" and "onInit" are used to ensure that the Google Tag Manager is informed of the user's consent and can load the corresponding integrated tags.

We now need to add this new partial to the file

/Partials/Klaro.html

file in the lower section, where the partials for the other third-party providers are already integrated.

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

We can save the condition "<f:if condition="{settings...", as this is only there so that you as the administrator can switch the module on and off via the constants editor or via the site settings editor in the backend. The variable queried in the condition would also have to be created first.

Integrate managed services into Klaro via GTM

The Google Tag Manager is now set up on your website. You can now manage the services that you want to manage with the GTM via your GTM account. However, for these to appear in the Klaro Consent Manager, they must be added in the configuration.

For Google Analytics, for example, this has already been done in our template for TYPO3. You can find the configuration in the file

Partials/KlaroModules/GoogleAnalytics.html

Expand it as follows (source: 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',
		})
		`,
    },
);

In Google Tag Manager, a user-defined event trigger of the form klaro-[service-name]-accepted must now be created for Google Analytics, where [service-name] is the name of the service in the Klaro configuration. In our example:

klaro-googleAnalytics-accepted

By adding "klaro-[service-name]-accepted", i.e. always the "name" in the Klaro configuration preceded by "klaro-" and followed by "-accepted", the Google Tag Manager is informed whether this service has been accepted or not.

If you add a service via the Google Tag Manager that is already preconfigured in our template for TYPO3, you must remove the associated code snippet from the template, or ensure that it is not output (in our example, the Google Analytics code. This is located in the file Configuration/TypoScript/AddOns/KlaroConsentManager/GoogleAnalytics/Setup/ga.typoscript. You can, for example, comment out this code or leave the field for the Google Analytics tracking ID empty in the constants editor or in the site settings editor).

Testing

You have now integrated the Google Tag Manager on your website, added the option to accept or reject it in the Klaro banner, and you have added a first service, namely Google Analytics. You still need to test whether the whole thing works. Google provides the Tag Assistant for this purpose.

You can test the setting of cookies on a website in general by calling up the webmaster tools of your browser and switching to the "Application" tab (in Chrome). You will then see the "Cookies" element in the left-hand column under "Storage". If you expand this, at least the URL of your website will be listed there. If you click on the URL, you can see in the table on the right whether cookies are set and, if so, which ones.

Further links

Further information on integrating internal and external scripts on your website in conjunction with Klaro can be found in the official Klaro documentation under "Getting started"
Instructions for integrating the Google Tag Manager into the Klaro Cookie Consent Manager can be found here.
Set up a Google Tag Manager account

Updated: 27.06.2025