Klaro

https://klaro.org/docs
Admin
Klaro is a privacy and security tool that helps you to manage user consent and protects sensitive...
Tokens:10,823
Snippets:58
Trust Score:8.4
Update:11 months ago
Show doc for...
Tokens:
Raw
### Load Klaro Config and Script in HTML

Source: https://klaro.org/docs/getting-started

This HTML snippet loads the Klaro configuration file and the main Klaro script from a CDN or local source, ensuring deferral for performance. It initializes Klaro with the config. Dependencies are the config.js file and Klaro.js; inputs are script sources; outputs are loaded scripts that enable consent management on the page.

```html
<script defer type="application/javascript"
src="config.js"></script>
<script 
    defer
    data-config="klaroConfig"
    type="application/javascript"
    src="https://cdn.kiprotect.com/klaro/v0.7/klaro.js">
</script>
```

--------------------------------

### Configure Klaro Apps in JavaScript

Source: https://klaro.org/docs/getting-started

This snippet defines the Klaro configuration object in JavaScript, specifying third-party apps and trackers. It initializes the window.klaroConfig variable with an apps array. Dependencies include access to the Klaro library; inputs are app definitions; outputs are the configuration object used by Klaro to manage consents.

```javascript
window.klaroConfig = {
    apps : [...],
}
```

--------------------------------

### Modify Inline Scripts for Consent in HTML

Source: https://klaro.org/docs/getting-started

This HTML snippet modifies inline third-party scripts to prevent execution without consent by changing the type to 'text/plain' and adding metadata. It includes placeholders for script content and requires Klaro to be loaded for functionality. Inputs are the original script; outputs are a non-executed script element managed by Klaro.

```html
<script type="text/plain"
data-type="application/javascript"
data-name="google-analytics">
//...
</script>
```

--------------------------------

### Modify External Scripts for Consent in HTML

Source: https://klaro.org/docs/getting-started

This HTML snippet adjusts external third-party scripts by renaming 'src' to 'data-src' and setting type to 'text/plain' to block loading without consent. It adds a data-name attribute linking to the config. Dependencies include Klaro library; inputs are the script URL and name; outputs are a deferred script element.

```html
<script type="text/plain"
data-type="application/javascript"
data-src="https://analytics.7scientists.com/matomo.js"
data-name="matomo">
</script>
```

--------------------------------

### Klaro Configuration with Google Tag Manager (JavaScript)

Source: https://klaro.org/docs/tutorials/google_tag_manager

This code snippet illustrates a Klaro configuration in JavaScript. It defines services like Google Tag Manager, Google Analytics, and Google Ads, along with event handlers (`onInit`, `onAccept`, `onDecline`) to manage user consent and update Google Tag Manager accordingly. This setup is designed to work with Google Tag Manager and consent mode V2.

```javascript
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', {\n                    'analytics_storage': 'granted',\n                })
            ',
            onDecline: `
                // we deny analytics storage
                gtag('consent', 'update', {\n                    'analytics_storage': 'denied',\n                })
            ',
        },
        {
            name: 'google-ads',
            cookies: [],
            onAccept: `
                // we grant ad storage and personalization
                gtag('consent', 'update', {\n                    'ad_storage': 'granted',\n                    'ad_user_data': 'granted',\n                    'ad_personalization': 'granted'\n                })
            ',
            onDecline: `
                // we decline ad storage and personalization
                gtag('consent', 'update', {\n                    'ad_storage': 'denied',\n                    'ad_user_data': 'denied',\n                    'ad_personalization': 'denied'\n                })
            ',
            purposes: ['marketing'],
        }
    ]
}
```

--------------------------------

### Klaro Configuration for Contextual Services

Source: https://klaro.org/docs/tutorials/contextual_consent

This JavaScript configuration object sets up Klaro services for contextual consent, with acceptAll enabled and specific purposes like marketing. The 'demo-youtube' service requires explicit consent via contextualConsentOnly: true, while 'demo-twitter' loads on global acceptance. It defines services array for integration; no direct inputs/outputs but controls consent flow, limited to defined purposes and names matching data attributes.

```javascript
var klarConfig = {
    acceptAll: true,
    services: [
        {
            purposes: ['marketing'],
            name: "demo-youtube",
            contextualConsentOnly: true,
        },
        {
            purposes: ['marketing'],
            name: "demo-twitter",
        }
    ]
}

```

--------------------------------

### YouTube Video Embed with Contextual Consent

Source: https://klaro.org/docs/tutorials/contextual_consent

This HTML snippet embeds a YouTube video iframe using data-src and data-name attributes to trigger Klaro's contextual consent prompt. It requires a matching service in Klaro config named 'demo-youtube' with contextualConsentOnly set to true. The video loads only after user consent; inputs are video URL and dimensions, outputs a playable iframe upon approval, limited to services defined in config.

```html
<iframe
    width="560"
    height="315"
    data-name="demo-youtube"
    data-src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    frameborder="0"
    allow="accelerometer;
           autoplay;
           clipboard-write;
           encrypted-media;
           gyroscope;
           picture-in-picture"
    allowfullscreen>
</iframe>

```

--------------------------------

### Load Klaro with Asynchronous Scripting (HTML)

Source: https://klaro.org/docs/integration/overview

Integrates Klaro by loading its script asynchronously in the background. The script executes as soon as it's downloaded, which can happen at any time. This requires using event handlers (e.g., `onload`) to ensure dependent scripts execute only after Klaro is ready.

```html
<script async src=".../klaro.js"></script>

```

--------------------------------

### Twitter Follow Button with Contextual Consent

Source: https://klaro.org/docs/tutorials/contextual_consent

This HTML snippet creates a Twitter follow button using a div and script tag with data-name and data-src for contextual consent. It depends on a Klaro service named 'demo-twitter' in the config for automatic loading on global consent. Inputs include Twitter handle URL, outputs a functional widget after consent; supports lazy loading but requires internet for external script.

```html
<div data-name="demo-twitter">
    <a
    href="https://twitter.com/kiprotect?ref_src=twsrc%5Etfw"
    class="twitter-follow-button"
    data-show-count="false">Follow @kiprotect</a>
</div>
<script
    data-type="application/javascript"
    async
    data-name="demo-twitter"
    data-src="https://platform.twitter.com/widgets.js"
    charset="utf-8">
</script>

```

--------------------------------

### Load Klaro with Deferred Scripting (HTML)

Source: https://klaro.org/docs/integration/overview

Integrates Klaro by deferring its script execution until after the page has been parsed. This method prevents blocking page rendering and ensures proper script execution order, making it the preferred approach for performance.

```html
<script defer src=".../klaro.js"></script>

```

--------------------------------

### Load Klaro with Synchronous Scripting (HTML)

Source: https://klaro.org/docs/integration/overview

Integrates Klaro by loading and executing its script synchronously, pausing page parsing until the script is ready. This method can cause minor loading delays and is generally not recommended, but may be useful if Klaro needs to intercept other scripts immediately.

```html
<script src=".../klaro.js"></script>

```

--------------------------------

### Klaro Multi-Language and Service Configuration

Source: https://klaro.org/docs/integration/annotated-configuration

Defines translations for German (de) and English (en) languages, including privacy policy URL and consent modal descriptions. Specifies purposes like analytics, security, and advertising. Configures the Matomo service with default enabled state, translations, purposes, cookie rules for deletion, and a consent callback function. Supports self-hosted analytics without external dependencies beyond Klaro library; inputs are user consents, outputs manage cookie settings and service states; limitations include inability to delete HTTPOnly or third-party domain cookies.

```javascript
                analytics: {
                    title: 'Besucher-Statistiken'
                },
                security: {
                    title: 'Sicherheit'
                },
                livechat: {
                    title: 'Live Chat'
                },
                advertising: {
                    title: 'Anzeigen von Werbung'
                },
                styling: {
                    title: 'Styling'
                },
            },
        },
        en: {
            privacyPolicyUrl: '/privacy',
            consentModal: {
                description:
                    'Here you can see and customize the information that we collect about you. ' + 
                    'Entries marked as "Example" are just for demonstration purposes and are not ' + 
                    'really used on this website.',
            },
            purposes: {
                analytics: {
                    title: 'Analytics'
                },
                security: {
                    title: 'Security'
                },
                livechat: {
                    title: 'Livechat'
                },
                advertising: {
                    title: 'Advertising'
                },
                styling: {
                    title: 'Styling'
                },
            },
        },
    },

    /*
    Here you specify the third-party services that Klaro will manage for you.
    */
    services: [
        {

            /*
            Each service must have a unique name. Klaro will look for HTML elements with a
            matching 'data-name' attribute to identify elements that belong to this service.
            */
            name: 'matomo',

            /*
            If 'default' is set to 'true', the service will be enabled by default. This
            overrides the global 'default' setting.
            */
            default: true,

            /*
            Translations belonging to this service go here. The key `zz` contains default
            translations that will be used as a fallback if there are no translations
            defined for a given language.
            */
            translations: {
                zz: {
                    title: 'Matomo/Piwik'
                },
                en: {
                    description: 'Matomo is a simple, self-hosted analytics service.'
                },
                de: {
                    description: 'Matomo ist ein einfacher, selbstgehosteter Analytics-Service.'
                },
            },
            /*
            The purpose(s) of this service that will be listed on the consent notice. Do not
            forget to add translations for all purposes you list here.
            */
            purposes: ['analytics'],

            cookies: [
                /*
                you an either only provide a cookie name or regular expression (regex) or a list
                consisting of a name or regex, a path and a cookie domain. Providing a path and
                domain is necessary if you have services that set cookies for a path that is not
                "/", or a domain that is not the current domain. If you do not set these values
                properly, the cookie can't be deleted by Klaro, as there is no way to access the
                path or domain of a cookie in JS. Notice that it is not possible to delete
                cookies that were set on a third-party domain, or cookies that have the HTTPOnly
                attribute: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#new-
                cookie_domain
                */

                /*
                This rule will match cookies that contain the string '_pk_' and that are set on
                the path '/' and the domain 'klaro.kiprotect.com'
                */
                [/^_pk_.*$/, '/', 'klaro.kiprotect.com'],

                /*
                Same as above, only for the 'localhost' domain
                */
                [/^_pk_.*$/, '/', 'localhost'],

                /*
                This rule will match all cookies named 'piwik_ignore' that are set on the path
                '/' on the current domain
                */
                'piwik_ignore',
            ],

            /*
            You can define an optional callback function that will be called each time the
            consent state for the given service changes. The consent value will be passed as
            the first parameter to the function (true=consented). The `service` config will
            be passed as the second parameter.
            */
            callback: function(consent, service) {
                console.log(
                    'User consent for service ' + service.name + ': consent=' + consent
                );
            },

            /*
            If 'required' is set to 'true', Klaro will not allow this service to be disabled
```

--------------------------------

### Configure Klaro Services with Privacy Settings

Source: https://klaro.org/docs/integration/annotated-configuration

Defines Klaro service configurations with privacy compliance settings. Includes required/optional service flags, opt-out behavior controls, and one-time execution settings. Features a consent change callback for audit logging.

```javascript
required: false,

            /*
            If 'optOut' is set to 'true', Klaro will load this service even before the user
            has given explicit consent. We strongly advise against this.
            */
            optOut: false,

            /*
            If 'onlyOnce' is set to 'true', the service will only be executed once
            regardless how often the user toggles it on and off. This is relevant e.g. for
            tracking scripts that would generate new page view events every time Klaro
            disables and re-enables them due to a consent change by the user.
            */
            onlyOnce: true,
        },
        {
            name: 'youtube',
            /*
            [no translation for key annotated-config.services.contextualConsentOnly]
            */
            contextualConsentOnly: true,
        },
    ],

    /*
    You can define an optional callback function that will be called each time the
    consent state for any given service changes. The consent value will be passed as
    the first parameter to the function (true=consented). The `service` config will
    be passed as the second parameter.
    */
    callback: function(consent, service) {
        console.log(
            'User consent for service ' + service.name + ': consent=' + consent
        );
    },

};
```

--------------------------------

### Configuring Klaro Consent Manager in JavaScript

Source: https://klaro.org/docs/integration/annotated-configuration

This JavaScript code defines the klaroConfig object used to configure the Klaro consent manager, enabling customization of consent notices, storage methods, and user interactions. It does not take inputs but outputs consent decisions to browser storage like cookies or localStorage. The configuration includes options for testing modes, HTML text rendering, and multi-language support, with limitations on cookie domain matching and default consent states.

```JavaScript
/*
By default, Klaro will load the config from a global 'klaroConfig' variable. You
can change this by specifying the 'data-klaro-config' attribute on your script:
<script src="klaro.js" data-klaro-config="myConfigVariableName"
*/
var klaroConfig = {
    /*
    Setting 'testing' to 'true' will cause Klaro to not show the consent notice or
    modal by default, except if a special hash tag is appended to the URL (#klaro-
testing). This makes it possible to test Klaro on your live website without
    affecting normal visitors.
    */
    testing: false,

    /*
    You can customize the ID of the DIV element that Klaro will create when starting
    up. By default, Klaro will use 'klaro'.
    */
    elementID: 'klaro',

    /*
    You can customize how Klaro persists consent information in the browser. Specify
    either cookie' (the default) or 'localStorage'.
    */
    storageMethod: 'cookie',

    /*
    You can customize the name of the cookie or localStorage entry that Klaro will
    use for storing the consent information. By default, Klaro will use 'klaro'.
    */
    storageName: 'klaro',

    /*
    If set to `true`, Klaro will render the texts given in the
    `consentModal.description` and `consentNotice.description` translations as HTML.
    This enables you to e.g. add custom links or interactive content.
    */
    htmlTexts: false,

    /*
    You can change the cookie domain for the consent manager itself. Use this if you
    want to get consent once for multiple matching domains. By default, Klaro will
    use the current domain. Only relevant if 'storageMethod' is set to 'cookie'.
    */
    cookieDomain: '.example.com',

    /*
    You can also set a custom expiration time for the Klaro cookie. By default, it
    will expire after 30 days. Only relevant if 'storageMethod' is set to 'cookie'.
    */
    cookieExpiresAfterDays: 30,

    /*
    Defines the default state for services in the consent modal (true=enabled by
    default). You can override this setting in each service.
    */
    default: false,

    /*
    If 'mustConsent' is set to 'true', Klaro will directly display the consent
    manager modal and not allow the user to close it before having actively
    consented or declined the use of third-party services.
    */
    mustConsent: false,

    /*
    Setting 'acceptAll' to 'true' will show an "accept all" button in the notice and
    modal, which will enable all third-party services if the user clicks on it. If
    set to 'false', there will be an "accept" button that will only enable the
    services that are enabled in the consent modal.
    */
    acceptAll: true,

    /*
    Setting 'hideDeclineAll' to 'true' will hide the "decline" button in the consent
    modal and force the user to open the modal in order to change his/her consent or
    disable all third-party services. We strongly advise you to not use this
    feature, as it opposes the "privacy by default" and "privacy by design"
    principles of the GDPR (but might be acceptable in other legislations such as
    under the CCPA)
    */
    hideDeclineAll: false,

    /*
    Setting 'hideLearnMore' to 'true' will hide the "learn more / customize" link in
    the consent notice. We strongly advise against using this under most
    circumstances, as it keeps the user from customizing his/her consent choices.
    */
    hideLearnMore: false,

    /*
    You can overwrite existing translations and add translations for your service
    descriptions and purposes. See `src/translations/` for a full list of
    translations that can be overwritten:
    https://github.com/KIProtect/klaro/tree/master/src/translations
    */
    translations: {
        /*
        The `zz` key contains default translations that will be used as fallback values.
            This can e.g. be useful for defining a fallback privacy policy URL.
        */
        zz: {
            privacyPolicyUrl: '/privacy',

        }
        de: {
            /*
            You can specify a language-specific link to your privacy policy here.
            */
            privacyPolicyUrl: '/datenschutz',
            consentNotice: {
                description: 'Dieser Text wird in der Einwilligungsbox erscheinen.',
            },
            consentModal: {
                description:
                    'Hier können Sie einsehen und anpassen, welche Information wir über Sie ' + 
                    'sammeln. Einträge die als "Beispiel" gekennzeichnet sind dienen lediglich ' + 
                    'zu Demonstrationszwecken und werden nicht wirklich verwendet.',
            },
            /*
            You should also define translations for every purpose you define in the
            'services' section. You can define a title and an (optional) description.
            */
            purposes: {
```

--------------------------------

### Embed Google Tag Manager script with Klaro consent handling

Source: https://klaro.org/docs/tutorials/google_tag_manager

This snippet shows how to embed the Google Tag Manager container in a web page while using Klaro to control its loading based on user consent. The script tag is set to type="text" and named "google-tag-manager" so Klaro can replace it with the actual GTM code after consent. It also includes a noscript iframe fallback for users without JavaScript.

```HTML
<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().Time(),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>
```
Tokens:
Raw