Integrate Klaro Consent Management
Integrate Klaro Consent Management
Klaro is an open-source and simple consent management platform to make a website GDPR compliant. If you happen to serve traffic to European users then you should definitely check whether your website needs to be GDPR compliant as well. While this is not going to be a legal blog post we will see how we can use Klaro to enforce a high level of user privacy on a website.
Disclaimer: This blog post does not contain any legal advice. Please do consider a lawyer with experience in privacy to see if your website needs to be and is GDPR compliant once you implemented it.
Next to Klaro there are quite some alternatives which likely work equally well, such as Cookie Consent, Osano, or Cookiebot. Before implementing, I didn’t do a big comparison as Klaro fulfilled all the requiremnets I had, so this blog post focuses only on integrating Klaro.
Integrating Klaro Consent Management
Getting started with Klaro is quite straightforward. There are two things you need:
- Load the Klaro script from within your
<head>section. - Provide the configuration. I chose to serve the config directly with the HTML as inline JavaScript to not require another HTTP request.
You may check out the official documentation on integrating Klaro but essentially it boils down to the following line of code:
<script type="text/javascript">
var klaroConfig = {
// The Klaro config needs to be defined before the Klaro script is loaded
}
</script>
<script defer type="text/javascript" src="https://cdn.kiprotect.com/klaro/v0.7.11/klaro-no-css.js"></script>
As you can see I am using Klaro version 0.7.11 with a specific Klaro flavor, which is klaro-no-css.js. Klaro may be
used with the following flavors:
klaro.js: Contains everything you need out of the box, including translations and styling.klaro-no-css.js: Contains only the Klaro scripts with the translations. You need to provide Klaro styles yourself.klaro-no-translations.js: Contains only the Klaro scripts with the styles. You need to provide Klaro translations yourself.klaro-no-translations-no-css.js: The bare minimum containing the Klaro functionality. Bring your own translations and styles.
Of course, to make a website GDPR compliant translations and styles are not relevant in the first place. So if you’re
short on time do the customization later and use the klaro.js to get a head start. Find some insights on how to
customize Klaro in the section below, but first let’s dive into how to set things up properly.
Consent-only Loading of Third Party Scripts
Often times you want to load tracking, analytics or advertising scripts only if the user consented explicitly. That
means we need to take care that HTTP requests to load those <script> resources are only being run once the consent is
there. To achieve that we first need to add the service to the Klaro configuration, and then modify the
respective <script> tags to prevent automatic loading on page load.
Let’s look at the specific example of integrating Google Analytics. The first step is to add Google Analytics to the Klaro configuration:
var klaroConfig = {
// ... all other settings
services: [
{
name: 'ga',
title: 'Google Analytics',
purposes: ['analytics'],
cookies: [
[/^_ga.*$/i, '/', '.fabian-keller.de'],
['_gid', '/', '.fabian-keller.de'],
[/^_dc_gtm.*$/i, '/', '.fabian-keller.de'],
],
required: false,
},
],
translations: {
en: {
ga: {
description: 'Collecting anonymous usage data to improve the content served on this website.'
}
}
}
}
Note that we define which cookies to delete if the user rejects consent later on. This adds an extra layer of privacy, which I find really nice about Klaro.
Also note that with the translations you can provide a custom message on what for the external service is being used on the website. Makes it simple to give the user more information on how data is being processed and for what reason.
Once the configuration is in place, we can modify the script tag used to integrate Google Analytics. Klaro works by
changing two attributes. First, change the <script type="text/javascript" to <script type="text/plain" so the
browser treats it as simple text and won’t run it on page load. Then add
a data attribute
that references the Klaro service configuration name (data-name="ga"), so Klaro knows to what the script tag belongs
to. Once the user consented, Klaro will automatically change the script type and the browser loads the script.
All in all, for Google Analytics this would look something along the lines of:
<script async
data-type="application/javascript"
type="text/plain"
data-name="ga"
data-src="https://www.googletagmanager.com/gtag/js?id=<TRACKING_ID>"></script>
<script data-type="application/javascript"
type="text/plain"
data-name="ga">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<TRACKING_ID>');
</script>
Note that you should turn the src and type attribute into a data attribute with the same name so Klaro can set it
given the user expresses her consent. Klaro works on scripts regardless of whether they are supplied inline or from a
remote resource. In any case, Klaro ensures that the script is loaded, parsed and run only if the user consented and not
on page load.
Contextual Consent for Integrated Content
Nowadays websites usually have some sort of content integrated from a third party. With Klaro you can make the user consent to load these external pieces of content, for example a YouTube video.
To enable users to load the content on consent Klaro provides a contextualConsentOnly property in its configuration
definition:
var klaroConfig = {
// ... all other settings
services: [{
name: 'youtube',
purposes: ['functional'],
contextualConsentOnly: true,
}]
}
If you’re integrating with an <iframe> tag, the procedure is quite similar to that of the <script> tag:
<iframe data-name="youtube" data-src="https://www.youtube.com/embed/k1uPdlW_lP0"></iframe>
As you can see on the page of my talk on the Cloud Foundry Summit Klaro now provides a message in case the user hasn’t consented before loading the video:
What I really like about Klaro is that it provides the option for the user right at the spot where he could see the content on whetehr to load the external content once, or for the specific service in general for the website. That way, a user can always choose what providers to load or not to load.
Theming Klaro
There are two ways to theme Klaro which we will be looking at.
Customzing the Klaro Stylesheet
What we can do is integrate the stylesheet and add it to our custom build of the website styles. This gives us the most flexibility, as we can influence all SASS variables at compile time and this is what I have done for this website.
To do that we first need to install Klaro as npm dependency to be able to access the stylesheets from our build process
by running npm install klaro. Once we’ve got the files, we can then include the SCSS style sheet and apply any
customizations by setting the respective variables before including the style sheet itself:
$cm-green1: $primary;
$cm-blue1: $dark;
@import "~klaro/src/scss/klaro.scss";
In this example, we’ve adjusted some color variables to match the general theme of this website (especially for the buttons), which is a thing you will likely want to do. To see all the SCSS variables you can customize have a look at the source code on GitHub:
GitHub: Klaro vars.scssCustomizing Klaro using CSS Variables
It’s pretty cool that the Klaro style sheets actually use CSS variables to set any color values. Instead of relying on the values that Klaro provides for these variables, we can simply set them ourselves. That means we don’t even have to compile the SCSS style sheets and merely set the variables after integrating Klaro:
<script defer type="text/javascript" src="https://cdn.kiprotect.com/klaro/v0.7.11/klaro.js"></script>
<style type="text/css">
:root {
--green1: #d6a842;
--green2: #f0d38e;
--green3: #faf5ea;
}
</style>
And that’s it!
To find out all the CSS variables you can customize go to the Klaro source code on GitHub and search for usages
of var(name, default).
Allow Users to Adjust Consent Settings
Most consent implementations I have seen are “one-off” settings. On the initial page load you’re prompted with the settings and you either accept or reject, and once you’ve clicked the settings are gone and you can’t access them anymore without deleting cookies for the page.
With Klaro you can easily programmatically spawn the setings by calling klaro.show() from anywhere.
I used this to add a link to the footer so the user can later change privacy settings again.
<a onclick="klaro.show()">Privacy Consent</a>
It’s as simple as that and allows you to check or change the privacy consent settings anytime.
Wrap Up
Once you’ve got the hang of how Klaro works, it’s fairly straight forward to add to an existing site. To integrate Klaro you will definitely need access to the HTML code. If that is hidden somewhere deep down your CMS or static site generator it may be a bit more work to integrate it.
What I really enjoyed about Klaro is that it provides a nice and decluttered user interface and is super easy to setup contextual consent as well as loading resources only if consent has been provided. What privacy consent tool are you using?