Configure Klaro replicating the common usage of EU Cookie Compliance

What is Klaro

As stated in the 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 comply with all relevant regulations (notably GDPR and ePrivacy).

What is Klaro Cookie & Consent Management

Klaro Cookie & Consent Management is a Drupal contrib module that integrates the Klaro JS library into Drupal.

What is wrong with EU Cookie Compliance (GDPR Compliance)

There is nothing inherently wrong with the EU Cookie Compliance (GDPR Compliance) module. However, as stated on the project page:

Replaced by: 
Klaro Cookie & Consent Management
The Klaro! module has been chosen for Drupal CMS. Klaro! offers more modern and up-to-date features than EU Cookie Compliance.
If you would like to migrate, a Klaro migrator is available:
drush en klaro_migrator
Please test this in a non-production environment first.

Why switching to Klaro makes sense

EU Cookie Compliance provides basic consent handling and is now only minimally maintained.
Klaro uses a solid, flexible, and reliable library. The module already includes preconfigured services for the most common third parties that set tracking cookies. It allows you to create categories and services, and any service not already included can usually be found in Klaro resources and easily imported into Drupal.

Additionally, the Klaro module will soon support the Klaro library callbacks onAccept and onDecline, allowing you to attach custom code to these 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 attempts to do this—feel free to try it.

If Klaro must be configured from scratch to achieve the same result as EU Cookie Compliance, follow these steps:

Configure access to the banner

Klaro uses Drupal permissions. Open:

/admin/people/permissions/module/klaro

Assign the Use Klaro! UI permission to anonymous and authenticated users. Assign the Administer Klaro! permission according to your site’s needs.

Configure consent for processing personal information

In EU Cookie Compliance, we typically use the opt-in option.

Open:

/admin/config/user-interface/klaro

In the General tab:

  • Set Klaro! Dialog Mode to Notice dialog
  • Disable Autofocus Klaro! Dialog
  • Disable Link to open consent dialog
  • Enable Accept all
     

Prevent Klaro to run on admin pages

Open the Advanced tab at:

/admin/config/user-interface/klaro 

In the field Disable Klaro! element and don’t block attributed resources on the following URL patterns, enter:

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

Configure the dialog styling

Open the Styling tab at 

/admin/config/user-interface/klaro 

  • Set Override Klaro CSS variables to: "light,wide,top"
  • Enable:
    • Hide “powered by Klaro!”
    • Show title in notice dialog
    • Allow HTML in texts
    • Adjust the UI to Drupal themes
       

Setup up the dialog texts

Open 

/admin/config/user-interface/klaro/texts 

Configure as follow (or adjust as needed):

Title: 

"Cookies on our website"

Description: 

"We've put some small files called cookies on your device to make our site work.
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.
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"
  • Title: "privacy policy"

Operations

  • Accept all label: "I'm OK with analytics cookies"
  • 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 is preconfigured. Enable:

  • Google Analytics
  • Google Tag Manager

Further customisations

Styling can be further customised within your custom theme. A complete example can be found on GitHub by searching for a _klaro.scss file.
Note that Klaro appends the dialog to the end of the <body>. If you need to move the dialog HTML to the top of the page, a small code snippet can be used to achieve this. 

/**
 * 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