Quick start

Install the Extension
Include the Extension configuration

The modern and recommended way to reference the configuration of this extension since TYPO3 v13 is via its Site Set. Alternatively, it is still possible to use the Static TypoScript Include in the template record.
Go to the Sites module under Site Management → Sites

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 a file config/sites/<site-identifier>/settings.yaml.

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: 0

Copied!
Go to the Template module under Site Management → 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
Go to the Page module under Web → List
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 Web → List
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
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 if the cookies domain is not the current one
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 Web → List
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
1. Go to the Sites module under Site Management → Sites
2. Click Edit site configuration at the relevant Site
3. Click on tab klaro!
4. Select your configuration under Klaro! Configuration
5. Define a Privacy Policy URL (possibly as an internal link)
6. Define a Imprint URL (possibly as 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.
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. Just remember to always add a data-name attribute that matches the name of the app in your config so that Klaro knows which element belongs to which service.

Tip

If the script is integrated via TypoScript and is to be used in the context of both a page requiring consent and a page not requiring consent, take a look at the klaroIsActive feature.
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.

Quick start

Site Set

Static TypoScript Include