Klaro Cookie Consent Manager

[gebeer]

Hello all,

I'm in the process of updating some websites to comply to the new GDPR opt-in regulations. Doing some resarch, I found this open source tool: https://klaro.kiprotect.com/

It looks quite promising and implementation seems quite easy.

Have you used this tool? What is your experience so far?

I saw that @Jens Martsch - dotnetic made some comments to the klaro GH issues. Did you implement this with PW?

[bernhard]

I haven't used it, but it looks great! Thx for sharing!

[dotnetic]

Yes it is good and in use on the site https://www.p-jentschura.com/ 

I added this directly in the HTML so it has nothing to do with ProcessWire in general, but I am thinking about developing a module for it to set the options.
But thats only for the far future and next website project.

[AndZyk]

Hello all,

sorry for getting off-topic, but I am curious:

16 hours ago, gebeer said:

I'm in the process of updating some websites to comply to the new GDPR opt-in regulations.

I have read about those new regulations but my understanding was, that this was just about a special case (a gambling website), so that nothing would change for normal websites. But now everybody seems to jump on the train just to be safe, even though it is not necessary.

Could somebody please explain to me, why you have to add this new cookie banner to your website? Are you saving personal informations of users in cookies?

Or could somebody please point me to a reliable source, that explains or states that you have to add this new cookie banner?

I only have cookies from ProcessWire and Google Analytics (with anonymized IPs). I have never read a clear statement, that I have to add a cookie banner and never has somebody complaint that I don't have a banner.

In my opinion, everybody adds those banners because they are not sure and jump on the bandwagon. But I am no lawyer, so maybe I am completely wrong. But those new banners are really worse. I saw some that covered the whole website before you could get to the content. Its like we are back in the 90s, where you have a start page for the homepage. ?

Thank god there a browser extensions like I don't care about cookies.

Regards, Andreas

Edited January 15, 2020 by AndZyk
Typo

[szabesz]

1 hour ago, AndZyk said:

Could somebody please explain to me, why you have to add this new cookie banner to your website?

Hello @AndZyk

We have a brief discussion on this issue over here: https://processwire.com/talk/topic/15270-session-storage-and-lifetime/?do=findComment&comment=168200

You can also google something like: GDPR cookie "legitimate interest"

 

[gebeer]

5 hours ago, AndZyk said:

In my opinion, everybody adds those banners because they are not sure and jump on the bandwagon. But I am no lawyer, so maybe I am completely wrong. But those new banners are really worse

So true. I share your frustration. If it was for me, I wouldn't care (as you can see on my website, if you speak German). But what to do if clients are pushing?

5 hours ago, AndZyk said:

Or could somebody please point me to a reliable source, that explains or states that you have to add this new cookie banner?

I'd like to see a reliable source for that, too. The thread @szabesz linked to, contains a link to Art. 6 GDPR. But like with all legal texts, as a layman it is hard to interpret them correctly. And even if you ask 3 lawyers you might get 3 different answers...

In this thread @ceberlin links to an article on a well known German site for legal advice. I'm no subscriber to that site, so cannot access that information.

The whole topic remains mysterious and frustrating. At least clients pay for cookie consent implementation. But I'd rather spend my time with more thrilling tasks...

[LostKobrakai]

The GDPR doesn't actually handle cookies specifically. GDPR is about processing personal data. A cookie is processed by a webserver when a user accesses your website, so GDPR is applicable IF there is personal data involved in regards to the cookie. Even a simple session cookie is personal data, because it identifies a certain browser session, which in turn likely identifies a person. There are a few things GDPR demands you to provide to users in such a case, like what the data is used for (Art. 13/14) and it needs to have a legitimate reason (Art. 6) for you to be allowed to do so. This is even more complex if it's not a cookie set by your website, but by a third party. There it's the shared responsibility between your and the third party that everything is handled correctly. This is usually done with DPA (data processing agreement) which is a binding contract where both parties essentially guarantee each other GDPR compliance.

The GDPR gives users the right to deny consent wherever you cannot use Art. 6 1.f) as legitimate reason. Therefore cookie-banners with the option to not have certain cookies set. The GDPR also says you may not auto opt people into giving consent, therefore the default for optional cookies should be unset.

Besides the GDPR there's afaik a law in Germany for cookies specifically, which has been the kinda predecessor for the long overdue EU wide ePrivacy directive. I'm not as well versed with this one. It was essentially the law, which started all the cookie banner stuff.

[AndZyk]

Thank you for your answers.

My understanding is, that you don't need a cookie banner for a session cookie, because there is no personal information in that cookie. If that would be case, every website with a CMS would need a cookie banner.

I can understand that you would maybe need a banner if you track analytics of users. But even for that there is no clear requirement that I know of.

I hope this trend goes away again soon, because there is no real benefit in my opinion.

Regards, Andreas

 

[LostKobrakai]

The session cookie is unique to a browser session, and seldom used without you holding more information about the user, which by my impression does fall in the definition of personal data how gdpr defines it:

Quote

‘personal data’ means any information relating to an identified or identifiable natural person (‘data subject’); an identifiable natural person is one who can be identified, directly or indirectly, in particular by reference to an identifier such as a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person;

https://gdpr-info.eu/art-4-gdpr/

But as I said the gdpr doesn‘t explicitly demand banners. It demands that users are informed about the usage of the data (privacy documents).

[Pixrael]

An elegant way to do this is how the Intuit company does it in the footer of the sites, see: https://www.intuit.com/ they have a link to a page for the explanation (intuit-cookies-policy) and other link to configure cookie management. Will be interesting if we have a module that do both: create the page for the blah blah.. and show the modal to admin the behavior.. then output the markup for this links (About cookies | Manage cookies) ?

[dotnetic]

One disadvantage of Klaro:

Custom styling is possible, but takes some effort, and also overhead because the default styles are embedded in the script. It would be better if the default CSS is optional. You can override the custom styles if you apply a data-attribute to the klaro script.

Here is what I did. Cloned the git repo and removed including the SCSS file in the script. Then compiled the SCSS with my customizing as a separate file.

[kaz]

On 1/15/2020 at 8:03 PM, Jens Martsch - dotnetic said:

Yes it is good and in use on the site https://www.p-jentschura.com/ 

I added this directly in the HTML so it has nothing to do with ProcessWire in general, but I am thinking about developing a module for it to set the options.
But thats only for the far future and next website project.

Under the GDPR it is not allowed to activate the options, they must be set inactive! Only essential cookies are allowed to stay active. Klaro is great, I use it also.

[dotnetic]

On 2/2/2020 at 1:35 PM, Jens Martsch - dotnetic said:

Custom styling is possible, but takes some effort, and also overhead because the default styles are embedded in the script

The newest version of Klaro gives you the option if the CSS is included or you provide your own CSS. This is based on my PR.

[gebeer]

11 hours ago, Jens Martsch - dotnetic said:

The newest version of Klaro gives you the option if the CSS is included or you provide your own CSS. This is based on my PR.

How do you actually build a version without css? I cloned the repo and added this to the scripts section of package.json and then run npm run makenocss

    "makenocss": "cross-env APP_ENV=production cross-env APP_VERSION=$(git tag --points-at HEAD) cross-env APP_COMMIT=$(git rev-parse HEAD) cross-env SEPARATE_CSS=true webpack --config webpack.config.js"

This will build a klaro-no-css.js inside dist.

Is there a simpler way passing the SEPARATE_CSS flag to the make script?

[dotnetic]

@gebeer The non CSS version is included in the dist directory. You should ask such specific questions in the github issues: https://github.com/KIProtect/klaro/issues

Besides of that, your command looks good. They expect the node environment variable SEPARATE_CSS to generate the script.

[gebeer]

2 minutes ago, Jens Martsch - dotnetic said:

Besides of that, your command looks good

It is working ok. I was just curious how you create the non-css version.

[Fuzzy]

I know it's not a PW issue, but maybe someone can help me anyway!

I managed to implement Klaro! on my website for all relevant scripts except for Google Maps. The script gets blocked successfully but when accepting cookies/other services, the script doesn't get called. I guess that the callback function is the reason for this. But I'm not able to fix it and can't find example code.

This is what I've tried:

{
name: 'googleMap',
title: 'Google Maps',
purposes: ['externaltracker'],
description: ['styling'],
callback : function(consent, app){
},
},

And also the code below doesn't work:

{
name: 'googleMap',
title: 'Google Maps',
purposes: ['externaltracker'],
description: ['styling'],
callback: function(consent, app) {
// This is an example callback function.
  console.log(
  	'User consent for app ' + app.name + ': consent=' + consent
  );
},
},

Appreciate any help!

[gebeer]

Guess you need to initialise the map in your callback function to make it render.

I'm using Openstreetmaps with this code

        {
            name: 'openstreetmaps',
            default: false,
            title: 'Open Street Maps',
            purposes: ['localityinfo'],
            cookies: [],
            callback: function (consent, app) {
                if(consent && window.initMap !== undefined) {
                    setTimeout(function() {
                        window.initMap();
                    }, 1000);
                }
            }
        }

You see that window initMap() gets called here.

You need to make sure that you can call your init function code for your Google map from the global namespace.

I have a function initMap() that sets aup the map

function initMap() {
    // console.log(window.L);
    if (window.L === undefined) return false;
    const mapcontainer = document.getElementById('map');
    const latlng = JSON.parse(mapcontainer.getAttribute('data-latlng'));
    const address = JSON.parse(mapcontainer.getAttribute('data-address'));

    mapcontainer.removeChild(mapcontainer.getElementsByTagName('img').item(0));
    var mymap = window.L.map('map').setView(latlng, 10);

    window.L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'xxx' // get from https://account.mapbox.com/access-tokens/
    }).addTo(mymap);

    var marker = window.L.marker(latlng).addTo(mymap);
    marker.bindPopup(address)/* .openPopup() */;
}

and attach it in my JS to the global namespace

addEventListener('DOMContentLoaded', () => {
    if (document.getElementById('map')) {
        window.initMap = initMap;
    }
});

 

[Fuzzy]

Thanks @gebeer for the detailed description and code snipets. Managed to get a workaround as my knowledge of js is too limited to get the callbacks working. Nevertheless, thanks a lot for your help!