Created
August 30, 2019 14:12
-
-
Save bacanu/e153615f9185f4a89b7bf1ff41d86dd2 to your computer and use it in GitHub Desktop.
klaro required apps not working as expected
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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, | |
}, | |
], | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Expected behaviour:
If an app is configured as
required
, it should execute without consent, the same as if it wasoptOut
If an app is configured as
required
, clicking "decline" shouldn't set the app tofalse
in the klaro config.