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:
- Functional: Enabled by default and required
- Consent manager: Enabled by default and required, it handle the setting of Klaro's cookie.
- Google Analytics: Disabled by default. Enable it if the site will use google analytics.
- If GA-* is added using Google Tag manager module, copy from the service Google Tag Manager the values in fields Sources and Attachments
- Google Tag Manager: Disabled by default. Enable it if the site will use google tag manager (If GA is loaded through GTM, Enable Google Analytics as well)
- Youtube: Enabled by default
- Vimeo: Enabled by default
In most of the cases Klaro is maintenance free, the services' configuration provided by the module is already enough to handle the common cases. A really full comprensive guide of Klaro module is available . Please note it is not the official documentation.
Consent mode
Starting from version 3.1.1 Klaro Cookie & Consent Management fully support Google Consent mode. The legacy Google Tag Manager and Google Analytics services are now deprecated in favour of the new ones supporting Consent Mode.
Note: Further action may be required on GTM side to add new tags. The preconfigured GTM service pushs a custom event klaro-'+k+'-accepted which can be used on GTM side to add tags conditionally to the user consent. K is replaced with the service key, e.g. cms for functional, gtm_consent_mode for GTM, and so on.
Cookie Removal
Klaro automatically delete the cookies when the user revokes the consent, however on a domain www.example.com, Klaro assumes that the cookie is set for the current domain www.example.com, but this is not always the case, for example GTM and GA uses .example.com. If any cookie uses any variation of the main domain, list the domain in /admin/config/user-interface/klaro -> Advanced -> Matching cookie domains. To test this feature on dev/staging environment using different domain, you may want to override this settings through settings.php override of config split.
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>",
];
}
}