Quick start

Install the Extension

Include the Extension configuration

The recommended way to include the configuration in TYPO3 v13 and TYPO3 v14 is the Site Set erhaweb/klaro-consent-manager; see Site Set and Settings. The Static TypoScript Include remains available as a legacy-compatible fallback for installations that still use TypoScript records.

Open the site setup module.

TYPO3 v13	TYPO3 v14
Site Management → Sites	Sites → Setup

Click Edit site configuration at the relevant Site
Select Klaro! Consent Manager [erhaweb/klaro-consent-manager] under Sets for this Site
Move it in the list above the entry for your sitepackage so that you can overwrite it later
Click Save and Close

Tip

You will notice that the constant editor can no longer be opened if the configuration was referenced via Site Set. To overwrite the default setting values of EXT:klaro_consent_manager/Configuration/Sets/KlaroConsentManager/settings.definitions.yaml, use config/sites/<site-identifier>/settings.yaml. Supported TYPO3 v13/v14 versions use flat map keys in this file. The available values are documented in the TypoScript constants reference.

Example: Configuration of the extension of the Contextual Consent Box to the entire content element instead of just the main content

config/sites/<site-identifier>/settings.yaml

plugin.tx_klaroconsentmanager.settings.contextualconsent.mainSectionOnly: false

Open the TypoScript module.

TYPO3 v13	TYPO3 v14
Site Management → TypoScript	Sites → TypoScript

Select the root of your Site in the page tree
Select Edit TypoScript Record in the module header
If no Template record exists you need to create one by clicking Create a root TypoScript record
Click the button Edit the whole TypoScript record
Switch to the tab Advanced Options
Select Klaro! Consent Manager (klaro_consent_manager) under Include TypoScript sets → Available Items
Move it in the list above the entry for your sitepackage so that you can overwrite it later
Click Save and Close

Open the records module. The complete backend path overview is available in Compatibility.

TYPO3 v13	TYPO3 v14
Web → List	Content → Records

In the page tree select the global root node (recommended) or any other storage page
For each service proceed with the following steps ...
Create a Service
1. Click Create new record in the module header of the records module
2. Select Klaro! Consent Manager → Klaro! Service to create new service
3. Select a Title under which the service will later be identified in the backend. If it is a service that is represented in the list of presets, select it from the list. Otherwise, you must select your own title
4. Select a unique Name under which the service will later be identified by Klaro. If it is a service that is represented in the list of presets, select it from the list. Otherwise, you must select your own name
  
  Tip
  
  The advantage of using a name from this list is that the associated supplied title and description texts for the frontend are used automatically. Of course, these can still be customised later. The preset fields are documented in General.
5. Under Purposes choose a purpose that best suits this service
6. Click Save
For each cookie associated with the service proceed with the following steps ...
Create a Cookie for the Service
1. In the editing mask of the service click Tab Cookies
2. Under Cookie Settings → Cookies click + Create new
3. Scroll to palette Identification and presentation of the cookie
4. Define an Identifier for later usage in Fluid
5. Define a Title for frontend display
6. Scroll to palette Technically relevant settings
7. Define a Name / Pattern to technically enable Klaro to manipulate this cookie
8. Provide a Path if the cookies path is not "/"
9. Provide a Domain if the cookies domain is not the current one
10. Scroll to palette Expiration Time
11. Enter the number of years/months/days/hours/minutes/seconds that will elapse before this cookie expires under Expiration Time
12. Enter the expiration unit to be used under Expires after unit
13. Click Save
When all cookies have been created in the service click Close
When all services have been created continue with the next steps

Note

Prerequisite for the output in the frontend is that at least one service has been assigned.
Create the main Klaro Configuration
1. Click Create new record in the module header of the records module
2. Select Klaro! Consent Manager → Klaro! Configuration to create new base configuration
3. Scroll to palette General
4. Set the Title under which this configuration can be found
5. If you attach importance to the order of purposes in the frontend output, define a series of purposes in the desired order under Purpose Order
6. Scroll to palette Services
7. Under Services select all Services that should be associated with this Configuration
8. Note the order of the services. Within a purpose, this sequence is taken into account between the services in the frontend output.
9. Click Save and Close

Reference the Klaro Configuration via the Site Configuration

Open the site setup module.

TYPO3 v13	TYPO3 v14
Site Management → Sites	Sites → Setup

Click Edit site configuration at the relevant Site
Click on tab klaro!
Select your configuration under Klaro! Configuration
Define a Privacy Policy URL, for example an internal link
Define an Imprint URL, for example an internal link

Modify your third-party scripts

To make sure that no third-party scripts are loaded without consent, you need to modify your HTML code a tiny bit. For content elements that should be blocked as a whole, use contextual consent.
1. Replace the value of the type attribute with text/plain (this keeps the browser from executing the script)
2. Add a data attribute with the original type, e.g. data-type="application/javascript"
3. Add a data-name attribute that matches the name of the given service in your config, e.g. data-name="google-analytics"
4. In the case of an external script, also replace the src attribute with data-src
The required customisation is shown below using the example of a typical gtag.js code for the integration of Google Analytics 4:

Before
```
<script
    async
    src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());
    gtag('config', 'TAG_ID', {'anonymize_ip':true});
</script>
```
Copied!
After
```
<script
    async
    data-src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"
    type="text/plain"
    data-type="application/javascript"
    data-name="google-analytics"></script>
<script
    type="text/plain"
    data-type="application/javascript"
    data-name="google-analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());
    gtag('config', 'TAG_ID', {'anonymize_ip':true});
</script>
```
Copied!
Note

This also works for other tags such as images or tracking pixels. Add a data-name attribute that matches the name of the service in your configuration so that Klaro knows which element belongs to which service.

Tip

To distinguish between script integration with and without consent management, refer to the TypoScript condition [klaroIsActive] and the Fluid ViewHelper {klaro:isActive()} depending on the context of the integration.
Finished!

Congratulations, the Klaro configuration has been successfully completed

The next frontend call of the configured Site will show you a brand new Klaro Consent Management Box. You have probably noticed that there are a few more tabs (especially in the context of the main configuration). Click through here to find out more. Each field is described in detail in the backend.