Deutsche Version

Back to overview

Klaro Cookie Consent: Storefront

Live Demo: Try this and other plugins live — no installation, no risk: demo.markus-michalski.net

Banner and dialog

If "Activate Cookie Consent" is on, the storefront loads the Klaro library and hands it the configuration built from the module settings and your shop's cookie services.

• All services are declined by default. Only services with "Default enabled" or "Required" are preselected.
• If "Must Consent" is on, a centered dialog appears that visitors have to answer. If the setting is off, a banner appears at the chosen position.
• The dialog texts and the names of the purpose groups are available in German and English. Other languages get the German texts as a fallback.
• Title and description of the services come from your entries in the admin.

Template extension and themes

The module ships the extension layout/base.html.twig for the Apex theme. It outputs in the storefront:

1. the Klaro stylesheet,
2. optionally the Google Consent Mode snippet,
3. the configuration as window.klaroConfig,
4. the Klaro script with defer.

Everything appears only when "Activate Cookie Consent" is on.

The module ships no template extension for other themes. There, no banner appears until you create your own extension of the base layout that outputs the same elements.

Footer link "Cookie Settings"

The link is not added to the footer automatically. You include the bundled widget where the link should appear, for example in the footer's service menu:

{% include "@mmd_klaroconsent/widget/klaro_settings_link.html.twig" %}

Optionally pass a CSS class and an icon:

{% include "@mmd_klaroconsent/widget/klaro_settings_link.html.twig" with {
    linkClass: 'my-custom-class',
    showIcon: true
} %}

The link reads "Cookie Settings" (German "Cookie-Einstellungen") and reopens the dialog, so visitors can change their decision at any time. If the module is deactivated, the widget outputs nothing.

Blocking scripts

The module does not change any scripts in your templates. For a service to run only after consent, you mark its script or embed using the Klaro method. data-name must match the service's Technical Name.

Script with src:

<script type="text/plain"
        data-type="text/javascript"
        data-name="google-analytics"
        data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

Inline script:

<script type="text/plain" data-type="text/javascript" data-name="google-analytics">
    // your code
</script>

Embed (iframe):

<iframe data-name="youtube" data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"></iframe>

With the option "Contextual consent only" on a service, "Accept All" does not include that service. It is then released through the placeholder on the embed.

Google Consent Mode v2

If "Enable Google Consent Mode v2" is on, the template writes this snippet into the page before the Klaro configuration:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted'
});

The module only sets these default values. After consent it sends no gtag('consent', 'update', ...) call and does not map Klaro services to Google consent types. You have to trigger updating the values yourself, for example through your Google tag setup. The help texts in the admin ("Automatically sync consent") describe more than the module does.

The snippet does not load any Google script. You include the Google scripts yourself with their own service, as described above.