Configure Klaro replicating the common usage of EU Cookie Compliance

What is Klaro

As by Klaro Readme

Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).

What is Klaro Cookie & Consent Management

Klaro Cookie & Consent Management is a Drupal contrib module that integrate Klaro JS library in Drupal

What is wrong with EU Cookie Compliance (GDPR Compliance)

Nothing is wrong with the module EU Cookie Compliance (GDPR Compliance), however, as b y the project page

Replaced by: 
Klaro Cookie & Consent Management
The Klaro! module has been chosen for Drupal CMS.
Klaro! is offers different and more up to date features than EU Cookie Compliance.
If you feel you would like to change, we do have a klaro migrator.
drush en klaro_migrator. Please do try this in a non-production environment first

Why matter to start using Klaro

EU Cookie Compliance provides a basic handling of consent and it is now minimally maintained.

Klaro uses a solid, flexible and reliable library. The module already contains preconfigured services for the most common 3rd party that can set tracking cookies. It allow to creates categories and services, and any service that is not already covered by the module pre configuration, can be likely found through the Klaro resources and easily imported in Drupal as a service.
Additionally Klaro module soon will support the Klaro library's callback "onAccept", "onDecline" which will allow easily to attach custom code to the events, for example to implement Google consent mode v2.

How to configure Klaro (To replicate the commonly used configuration in BBD)

If you need to migrate, EU Cookie Compliance provides a drush command that try to do it, give it a try.

If Klaro must be configured from scratch to achieve the common result we have with EU Cookie compliance, follow these steps:

Configure access to the banner

Klaro uses the Drupal permissiong, so open admin/people/permissions/module/klaro and assing the permission Use Klaro! UI to anonymous and authenticated users; assing the permission Administer Klaro! according to every site need.

Configure consent for processing of personal information

In UE Cookie Compliance we usually set the Opt-in option, open /admin/config/user-interface/klaro, inside the General tab, select as Klaro! Dialog Mode: Notice dialog
In the same tab disable Autofocus Klaro! Dialog and Link to open consent dialog; enable Accept all
 

Prevent Klaro to run on admin pages

Open the tab Advanced in /admin/config/user-interface/klaro and fill the textarea Disable Klaro! element and dont block attributed resources on following url patterns with the value below 

\/admin\/
\/batch\/
\/node\/add*
\/node\/*\/*
\/user\/*\/*

Configure the dialog styling

Open the tab Styling in /admin/config/user-interface/klaro and set the field Override Klaro css variables to "light,wide,top"; enable all the toggles Hide "powered by Klaro!", Show title in notice dialog., Allow HTML in texts, Adjust the UI to Drupal themes

Setup the dialog texts

Open /admin/config/user-interface/klaro/texts and set the field as follow (or according to needs)

Title: "Cookies on our website"

Description: "We've put some small files called cookies on your device to make our site work.<br /><br />
We'd also like to use analytics cookies. These collect feedback and send information about how our site is used to a service called Google Analytics. We use this information to improve our site.<br /><br />
Let us know if this is OK. We'll use a cookie to save your choice. You can {privacyPolicy} before you choose."

Privacy policy -> URL: "internal:/cookies"
Privacy policy -> Title: "privacy policy"

Operations -> Accept all label: "I'm OK with analytics cookies"
Operations -> Decline label: "Do not use analytics cookies"

How to block Google Analytics and Tag Manager without consent

Open /admin/config/user-interface/klaro/services , a list of services are preconfigured, enable the services:

  • Google Analytics
  • Google Tag Manager

Further customisations

Styling can be further customised from the custom theme, a complete example can be found on Github looking for _klaro.scss file. Note that Klaro append the dialog to the body at the end, if the dialog HTML need to be moved to the top of the page, the following snippet just do the trick.
 

/**
 * Implements hook_page_top().
 */
function bbd_custom_page_top(array &$page_top) {
  // Move Klaro element to the top of the page.
  $id = Drupal::config('klaro.settings')->get('library')['element_id'] ?? FALSE;

  if ($id) {
    $page_top['klaro'] = [
      '#markup' => "<div id='{$id}'></div>",
    ];
  }
}

References