Skip to content

Instantly share code, notes, and snippets.

@bacanu
Created August 30, 2019 14:12
Show Gist options
  • Save bacanu/e153615f9185f4a89b7bf1ff41d86dd2 to your computer and use it in GitHub Desktop.
Save bacanu/e153615f9185f4a89b7bf1ff41d86dd2 to your computer and use it in GitHub Desktop.
klaro required apps not working as expected
// By default, Klaro will load the config from a global "klaroConfig" variable.
// You can change this by specifying the "data-config" attribute on your
// script take, e.g. like this:
// <script src="klaro.js" data-config="myConfigVariableName" />
// You can also disable auto-loading of the consent notice by adding
// data-no-auto-load=true to the script tag.
var klaroConfig = {
// You can customize the ID of the DIV element that Klaro will create
// when starting up. If undefined, Klaro will use 'klaro'.
elementID: 'klaro',
// You can customize the name of the cookie that Klaro uses for storing
// user consent decisions. If undefined, Klaro will use 'klaro'.
cookieName: 'klaro',
// You can also set a custom expiration time for the Klaro cookie.
// By default, it will expire after 120 days.
cookieExpiresAfterDays: 365,
// You can customize the name of the cookie that Klaro will use to
// store user consent. If undefined, Klaro will use 'klaro'.
// Put a link to your privacy policy here (relative or absolute).
privacyPolicy: '/#privacy',
// Defines the default state for applications (true=enabled by default).
default: true,
// If "mustConsent" is set to true, Klaro will directly display the consent
// manager modal and not allow the user to close it before having actively
// consented or declines the use of third-party apps.
mustConsent: false,
// You can define the UI language directly here. If undefined, Klaro will
// use the value given in the global "lang" variable. If that does
// not exist, it will use the value given in the "lang" attribute of your
// HTML tag. If that also doesn't exist, it will use 'en'.
//lang: 'en',
// You can overwrite existing translations and add translations for your
// app descriptions and purposes. See `src/translations.yml` for a full
// list of translations that can be overwritten:
// https://github.com/DPKit/klaro/blob/master/src/translations.yml
// Example config that shows how to overwrite translations:
// https://github.com/DPKit/klaro/blob/master/src/configs/i18n.js
translations: {
en: {
consentModal: {
description:
'Here you can see and customize the information that we collect about you. Entries marked as "Example" are just for demonstration purposes and are not really used on this website.',
},
inlineTracker: {
description: 'Example of an inline tracking script',
},
externalTracker: {
description: 'Example of an external tracking script',
},
adsense: {
description: 'Displaying of advertisements (just an example)',
},
matomo: {
description: 'Collecting of visitor statistics',
},
camera: {
description:
'A surveillance camera (just a silly example for an IMG tag)',
},
cloudflare: {
description: 'Protection against DDoS attacks',
},
intercom: {
description:
'Chat widget & collecting of visitor statistics (just an example)',
},
mouseflow: {
description: 'Real-Time user analytics (just an example)',
},
googleFonts: {
description: 'Web fonts hosted by Google',
},
purposes: {
analytics: 'Analytics',
security: 'Security',
livechat: 'Livechat',
advertising: 'Advertising',
styling: 'Styling',
},
},
},
// This is a list of third-party apps that Klaro will manage for you.
apps: [
// The apps will appear in the modal in the same order as defined here.
{
name: 'inlineTracker',
title: 'Inline Tracker',
purposes: ['analytics'],
cookies: ['inline-tracker'],
required: true,
},
{
name: 'externalTracker',
title: 'External Tracker',
purposes: ['analytics', 'security'],
cookies: ['external-tracker'],
required: true,
},
],
};
<!DOCTYPE html>
<html lang="EN-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Klaro! Consent Manager Utility</title>
<script defer type="application/javascript" src="config.js"></script>
<script defer type="application/javascript" src="klaro.js" data-config="klaroConfig" data-style-prefix="klaro"></script>
<script type="opt-in" data-src="examples/tracker.js" data-type="application/javascript" data-name="externalTracker"></script>
<script type="opt-in" data-type="application/javascript" data-name="inlineTracker">
console.log("This is an example of an inline tracking script.")
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
//we set a tracking cookie as an example
setCookie("inline-tracker", "foo", 120)
</script>
</head>
<body>
<h1>welp</h1>
</body>
</html>
@bacanu
Copy link
Author

bacanu commented Aug 30, 2019

Expected behaviour:

If an app is configured as required, it should execute without consent, the same as if it was optOut
If an app is configured as required, clicking "decline" shouldn't set the app to false in the klaro config.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment