folder structur and .hold files
added klaro files (src and external)
Dieser Commit ist enthalten in:
Ortwin Pinke
Ursprung
f3db2db64b
Commit
dae36da7a0
23 geänderte Dateien mit 3418 neuen und 0 gelöschten Zeilen
13
external/klaro/README.md
gevendort
Normale Datei
13
external/klaro/README.md
gevendort
Normale Datei
|
|
@ -0,0 +1,13 @@
|
|||
# Klaro Distribution Files
|
||||
|
||||
These files are transpiled from the `src` folder, you can integrate them into your website. The following
|
||||
files are available for download:
|
||||
|
||||
* [klaro.js](klaro.js): Minified version of Klaro, CSS included.
|
||||
* [klaro-no-css.js](klaro-no-css.js): Minified version of Klaro, CSS **not** included.
|
||||
* [klaro.css](klaro.css): Non-minified CSS (useful if you want to modify it yourself).
|
||||
* [klaro.min.css](klaro.min.css): Minified CSS.
|
||||
|
||||
If you want to use Klaro with its existing styles (which you can still overwrite with more specific rules)
|
||||
simply download and include [klaro.js](klaro.js). If you want to define your own styles from scratch, simply
|
||||
download and include [klaro-no-css.js](klaro-no-css.js).
|
||||
1
external/klaro/cm.js
gevendort
Normale Datei
1
external/klaro/cm.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
331
external/klaro/config.js
gevendort
Normale Datei
331
external/klaro/config.js
gevendort
Normale Datei
|
|
@ -0,0 +1,331 @@
|
|||
// 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" />
|
||||
var klaroConfig = {
|
||||
// With the 0.7.0 release we introduce a 'version' paramter that will make
|
||||
// if easier for us to keep configuration files backwards-compatible in the future.
|
||||
version: 1,
|
||||
|
||||
// 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 override CSS style variables here. For IE11, Klaro will
|
||||
// dynamically inject the variables into the CSS. If you still consider
|
||||
// supporting IE9-10 (which you probably shouldn't) you need to use Klaro
|
||||
// with an external stylesheet as the dynamic replacement won't work there.
|
||||
styling: {
|
||||
theme: ['light', 'top', 'wide'],
|
||||
},
|
||||
|
||||
// Setting this to true will keep Klaro from automatically loading itself
|
||||
// when the page is being loaded.
|
||||
noAutoLoad: false,
|
||||
|
||||
// Setting this to true will render the descriptions of the consent
|
||||
// modal and consent notice are HTML. Use with care.
|
||||
htmlTexts: true,
|
||||
|
||||
// Setting 'embedded' to true will render the Klaro modal and notice without
|
||||
// the modal background, allowing you to e.g. embed them into a specific element
|
||||
// of your website, such as your privacy notice.
|
||||
embedded: false,
|
||||
|
||||
// You can group services by their purpose in the modal. This is advisable
|
||||
// if you have a large number of services. Users can then enable or disable
|
||||
// entire groups of services instead of having to enable or disable every service.
|
||||
groupByPurpose: true,
|
||||
|
||||
// How Klaro should store the user's preferences. It can be either 'cookie'
|
||||
// (the default) or 'localStorage'.
|
||||
storageMethod: 'cookie',
|
||||
|
||||
// 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 change to cookie domain for the consent manager itself.
|
||||
// Use this if you want to get consent once for multiple matching domains.
|
||||
// If undefined, Klaro will use the current domain.
|
||||
//cookieDomain: '.github.com',
|
||||
|
||||
// Defines the default state for services (true=enabled by default).
|
||||
default: false,
|
||||
|
||||
// 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 services.
|
||||
mustConsent: false,
|
||||
|
||||
// Show "accept all" to accept all services instead of "ok" that only accepts
|
||||
// required and "default: true" services
|
||||
acceptAll: true,
|
||||
|
||||
// replace "decline" with cookie manager modal
|
||||
hideDeclineAll: false,
|
||||
|
||||
// hide "learnMore" link
|
||||
hideLearnMore: false,
|
||||
|
||||
// show cookie notice as modal
|
||||
noticeAsModal: false,
|
||||
|
||||
// You can also remove the 'Realized with Klaro!' text in the consent modal.
|
||||
// Please don't do this! We provide Klaro as a free open source tool.
|
||||
// Placing a link to our website helps us spread the word about it,
|
||||
// which ultimately enables us to make Klaro! better for everyone.
|
||||
// So please be fair and keep the link enabled. Thanks :)
|
||||
//disablePoweredBy: true,
|
||||
|
||||
// you can specify an additional class (or classes) that will be added to the Klaro `div`
|
||||
//additionalClass: 'my-klaro',
|
||||
|
||||
// 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
|
||||
// service descriptions and purposes. See `src/translations/` for a full
|
||||
// list of translations that can be overwritten:
|
||||
// https://github.com/KIProtect/klaro/tree/master/src/translations
|
||||
|
||||
// Example config that shows how to overwrite translations:
|
||||
// https://github.com/KIProtect/klaro/blob/master/src/configs/i18n.js
|
||||
translations: {
|
||||
// translationsed defined under the 'zz' language code act as default
|
||||
// translations.
|
||||
zz: {
|
||||
privacyPolicyUrl: '/#privacy',
|
||||
},
|
||||
// If you erase the "consentModal" translations, Klaro will use the
|
||||
// bundled translations.
|
||||
de: {
|
||||
privacyPolicyUrl: '/#datenschutz',
|
||||
consentModal: {
|
||||
description:
|
||||
'Hier können Sie einsehen und anpassen, welche Information wir über Sie sammeln. Einträge die als "Beispiel" gekennzeichnet sind dienen lediglich zu Demonstrationszwecken und werden nicht wirklich verwendet.',
|
||||
},
|
||||
inlineTracker: {
|
||||
description: 'Beispiel für ein Inline-Tracking Skript',
|
||||
},
|
||||
externalTracker: {
|
||||
description: 'Beispiel für ein externes Tracking Skript',
|
||||
},
|
||||
adsense: {
|
||||
description: 'Anzeigen von Werbeanzeigen (Beispiel)',
|
||||
title: 'Google AdSense Werbezeugs',
|
||||
},
|
||||
matomo: {
|
||||
description: 'Sammeln von Besucherstatistiken',
|
||||
},
|
||||
camera: {
|
||||
description:
|
||||
'Eine Überwachungskamera (nur ein Beispiel zu IMG-Tags)',
|
||||
},
|
||||
cloudflare: {
|
||||
description: 'Schutz gegen DDoS-Angriffe',
|
||||
},
|
||||
intercom: {
|
||||
description:
|
||||
'Chat Widget & Sammeln von Besucherstatistiken (nur ein Beispiel)',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Echtzeit-Benutzeranalyse (nur ein Beispiel)',
|
||||
},
|
||||
googleFonts: {
|
||||
description: 'Web-Schriftarten von Google gehostet',
|
||||
},
|
||||
purposes: {
|
||||
analytics: 'Besucher-Statistiken',
|
||||
security: 'Sicherheit',
|
||||
livechat: 'Live Chat',
|
||||
advertising: 'Anzeigen von Werbung',
|
||||
styling: 'Styling',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
consentModal: {
|
||||
title: '<u>test</u>',
|
||||
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)',
|
||||
title: 'Google Adsense Advertisement',
|
||||
},
|
||||
matomo: {
|
||||
description: 'Collecting of visitor statistics',
|
||||
},
|
||||
camera: {
|
||||
description:
|
||||
'A surveillance camera (just an 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 services that Klaro will manage for you.
|
||||
services: [
|
||||
{
|
||||
name: 'twitter',
|
||||
purposes: ['marketing'],
|
||||
// Setting this to true will exempt this service from the "Accept All"
|
||||
// flow, i.e. clicking on "Accept All" will not enable this service.
|
||||
contextualConsentOnly: true,
|
||||
},
|
||||
{
|
||||
name: 'youtube',
|
||||
purposes: ['marketing'],
|
||||
contextualConsentOnly: true,
|
||||
},
|
||||
{
|
||||
// Each service should have a unique (and short) name.
|
||||
name: 'matomo',
|
||||
|
||||
// If "default" is set to true, the service will be enabled by default
|
||||
// Overwrites global "default" setting.
|
||||
// We recommend leaving this to "false" for services that collect
|
||||
// personal information.
|
||||
default: true,
|
||||
|
||||
// The title of you service as listed in the consent modal.
|
||||
title: 'Matomo/Piwik',
|
||||
|
||||
// The purpose(s) of this service. Will be listed on the consent notice.
|
||||
// Do not forget to add translations for all purposes you list here.
|
||||
purposes: ['analytics'],
|
||||
|
||||
// A list of regex expressions or strings giving the names of
|
||||
// cookies set by this service. If the user withdraws consent for a
|
||||
// given service, Klaro will then automatically delete all matching
|
||||
// cookies.
|
||||
cookies: [
|
||||
// you can also explicitly provide a path and a domain for
|
||||
// a given cookie. This is necessary if you have services that
|
||||
// set cookies for a path that is not "/" or a domain that
|
||||
// is not the current domain. If you do not set these values
|
||||
// properly, the cookie can't be deleted by Klaro
|
||||
// (there is no way to access the path or domain of a cookie in JS)
|
||||
// Notice that it is not possible to delete cookies that were set
|
||||
// on a third-party domain! See the note at mdn:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#new-cookie_domain
|
||||
[/^_pk_.*$/, '/', 'klaro.kiprotect.com'], //for the production version
|
||||
[/^_pk_.*$/, '/', 'localhost'], //for the local version
|
||||
'piwik_ignore',
|
||||
],
|
||||
|
||||
// An optional callback function that will be called each time
|
||||
// the consent state for the service changes (true=consented). Passes
|
||||
// the `service` config as the second parameter as well.
|
||||
callback: function(consent, service) {
|
||||
// This is an example callback function.
|
||||
console.log(
|
||||
'User consent for service ' + service.name + ': consent=' + consent
|
||||
);
|
||||
// To be used in conjunction with Matomo 'requireCookieConsent' Feature, Matomo 3.14.0 or newer
|
||||
// For further Information see https://matomo.org/faq/new-to-piwik/how-can-i-still-track-a-visitor-without-cookies-even-if-they-decline-the-cookie-consent/
|
||||
/*
|
||||
if(consent==true){
|
||||
_paq.push(['rememberCookieConsentGiven']);
|
||||
} else {
|
||||
_paq.push(['forgetCookieConsentGiven']);
|
||||
}
|
||||
*/
|
||||
},
|
||||
|
||||
// If "required" is set to true, Klaro will not allow this service to
|
||||
// be disabled by the user.
|
||||
required: false,
|
||||
|
||||
// If "optOut" is set to true, Klaro will load this service even before
|
||||
// the user gave explicit consent.
|
||||
// We recommend always leaving this "false".
|
||||
optOut: false,
|
||||
|
||||
// If "onlyOnce" is set to true, the service will only be executed
|
||||
// once regardless how often the user toggles it on and off.
|
||||
onlyOnce: true,
|
||||
},
|
||||
|
||||
// The services will appear in the modal in the same order as defined here.
|
||||
{
|
||||
name: 'inlineTracker',
|
||||
title: 'Inline Tracker',
|
||||
purposes: ['analytics'],
|
||||
cookies: ['inline-tracker'],
|
||||
optOut: false,
|
||||
},
|
||||
{
|
||||
name: 'externalTracker',
|
||||
title: 'External Tracker',
|
||||
purposes: ['analytics', 'security'],
|
||||
cookies: ['external-tracker'],
|
||||
},
|
||||
{
|
||||
name: 'intercom',
|
||||
title: 'Intercom',
|
||||
default: true,
|
||||
purposes: ['livechat'],
|
||||
},
|
||||
{
|
||||
name: 'mouseflow',
|
||||
title: 'Mouseflow',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
{
|
||||
name: 'adsense',
|
||||
// if you omit the title here Klaro will try to look it up in the
|
||||
// translations
|
||||
//title: 'Google AdSense',
|
||||
purposes: ['advertising'],
|
||||
},
|
||||
{
|
||||
name: 'camera',
|
||||
title: 'Surveillance Camera',
|
||||
purposes: ['security'],
|
||||
},
|
||||
/* {
|
||||
name: 'googleFonts',
|
||||
title: 'Google Fonts',
|
||||
purposes: ['styling'],
|
||||
},*/
|
||||
{
|
||||
name: 'cloudflare',
|
||||
title: 'Cloudflare',
|
||||
purposes: ['security'],
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
80
external/klaro/configs/i18n.js
gevendort
Normale Datei
80
external/klaro/configs/i18n.js
gevendort
Normale Datei
|
|
@ -0,0 +1,80 @@
|
|||
var klaroI18nConfig = {
|
||||
version: 2,
|
||||
cookieName: 'klaro-i18n',
|
||||
elementID: 'klaro',
|
||||
lang: 'en',
|
||||
default: true,
|
||||
noNotice: true,
|
||||
poweredBy:
|
||||
'https://github.com/KIProtect/klaro/blob/master/dist/configs/i18n.js',
|
||||
translations: {
|
||||
// these values will overwrite the defaults. For a full list, have a look
|
||||
// at the `src/translations` directory of this repo:
|
||||
// https://github.com/KIProtect/klaro/tree/master/src/translations
|
||||
zz: {
|
||||
privacyPolicyUrl: '/#privacy',
|
||||
},
|
||||
de: {
|
||||
privacyPolicyUrl: '/#datenschutz',
|
||||
consentModal: {
|
||||
title: 'Dies ist der Titel des Zustimmungs-Dialogs',
|
||||
description:
|
||||
'Dies ist die Beschreibung des Zustimmungs-Dialogs.',
|
||||
privacyPolicy: {
|
||||
text:
|
||||
'Dies ist der Text mit einem Link zu Ihrer {privacyPolicy}.',
|
||||
name: 'Datenschutzerklärung (Name)',
|
||||
},
|
||||
},
|
||||
poweredBy: 'Konfiguration ansehen',
|
||||
ok: "Los geht's!",
|
||||
purposes: {
|
||||
analytics: 'Besucher-Statistiken',
|
||||
security: 'Sicherheit',
|
||||
livechat: 'Live-Chat',
|
||||
advertisting: 'Anzeigen von Werbung',
|
||||
},
|
||||
googleAnalytics: {
|
||||
description: 'Sammeln von Besucherstatistiken',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Echtzeit-Benutzeranalyse',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
consentModal: {
|
||||
title: 'This is the title of the consent modal',
|
||||
description: 'This is the description of the consent modal.',
|
||||
privacyPolicy: {
|
||||
text: 'This is the text with a link to your {privacyPolicy}.',
|
||||
name: 'privacy policy (the name)',
|
||||
},
|
||||
},
|
||||
poweredBy: 'view config',
|
||||
ok: 'Wohoo!',
|
||||
purposes: {
|
||||
analytics: 'Analytics',
|
||||
security: 'Security',
|
||||
livechat: 'Livechat',
|
||||
},
|
||||
googleAnalytics: {
|
||||
description: 'Collection of visitor statistics',
|
||||
},
|
||||
mouseflow: {
|
||||
description: 'Real-time user analytics',
|
||||
},
|
||||
},
|
||||
},
|
||||
services: [
|
||||
{
|
||||
name: 'googleAnalytics',
|
||||
title: 'Google Analytics',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
{
|
||||
name: 'mouseflow',
|
||||
title: 'Mouseflow',
|
||||
purposes: ['analytics'],
|
||||
},
|
||||
],
|
||||
};
|
||||
60
external/klaro/examples/gtm-config.js
gevendort
Normale Datei
60
external/klaro/examples/gtm-config.js
gevendort
Normale Datei
|
|
@ -0,0 +1,60 @@
|
|||
// 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" />
|
||||
var klaroConfig = {
|
||||
acceptAll: true,
|
||||
translations: {
|
||||
|
||||
},
|
||||
services: [
|
||||
{
|
||||
name: 'google-tag-manager',
|
||||
required: true,
|
||||
purposes: ['marketing', 'functional'],
|
||||
manages: ['google-analytics'],
|
||||
onAccept: `
|
||||
// we notify the tag manager about all services that were accepted. You can define
|
||||
// a custom event in GTM to load the service if consent was given.
|
||||
for(let k of Object.keys(opts.consents)){
|
||||
if (opts.consents[k]){
|
||||
let eventName = 'klaro-'+k+'-accepted'
|
||||
dataLayer.push({'event': eventName})
|
||||
}
|
||||
}
|
||||
// if consent for Google Analytics was granted we enable analytics storage
|
||||
if (opts.consents[opts.vars.googleAnalyticsName || 'google-analytics']){
|
||||
console.log("Google analytics usage was granted")
|
||||
gtag('consent', 'update', {'analytics_storage': 'granted'})
|
||||
}
|
||||
// if consent for Google Ads was granted we enable ad storage
|
||||
if (opts.consents[opts.vars.adStorageName || 'google-ads']){
|
||||
console.log("Google ads usage was granted")
|
||||
gtag('consent', 'update', {'ad_storage': 'granted'})
|
||||
}
|
||||
`,
|
||||
onInit: `
|
||||
// initialization code here (will be executed only once per page-load)
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function(){dataLayer.push(arguments)}
|
||||
gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
|
||||
gtag('set', 'ads_data_redaction', true)
|
||||
`,
|
||||
onDecline: `
|
||||
// initialization code here (will be executed only once per page-load)
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function(){dataLayer.push(arguments)}
|
||||
gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
|
||||
gtag('set', 'ads_data_redaction', true)
|
||||
`,
|
||||
vars: {
|
||||
googleAnalytics: 'google-analytics'
|
||||
}
|
||||
},
|
||||
{
|
||||
// In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
|
||||
name: 'google-analytics',
|
||||
purposes: ['marketing'],
|
||||
}
|
||||
]
|
||||
};
|
||||
43
external/klaro/examples/gtm.html
gevendort
Normale Datei
43
external/klaro/examples/gtm.html
gevendort
Normale Datei
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>Simple Test</title>
|
||||
<!-- Google Tag Manager -->
|
||||
<script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-MZTF9XR');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- here we include the Klaro config and script -->
|
||||
<script defer type="text/javascript" src="gtm-config.js"></script>
|
||||
<script defer type="text/javascript" src="../klaro.js"></script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Arial, Helvetica, sans serif;">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div style="padding: 10px;">
|
||||
<h1>Google Tag Manager Example</h1>
|
||||
<p>
|
||||
This is an example that shows how to use Klaro with Google Tag Manager.
|
||||
</p>
|
||||
<p>
|
||||
You can review and update your consents by clicking <a href="" onClick="return klaro.show(klaroConfig, true)">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
You can reset your consents by clicking <a href="" onClick="klaro.getManager().resetConsents();location.reload()">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<!-- this is an example of an img tag managed by Klaro -->
|
||||
<img data-name="camera" data-src="../assets/Surveillance-camera-small.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
external/klaro/examples/simple.html
gevendort
Normale Datei
74
external/klaro/examples/simple.html
gevendort
Normale Datei
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>Simple Test</title>
|
||||
<!-- here we include the Klaro config and script -->
|
||||
<script defer type="text/javascript" src="../config.js"></script>
|
||||
<script defer type="text/javascript" src="../klaro.js"></script>
|
||||
</head>
|
||||
<body style="margin: 0; font-family: Arial, Helvetica, sans serif;">
|
||||
<div style="padding: 10px;">
|
||||
<h1>Hello, wayward Internet traveler!</h1>
|
||||
<p>
|
||||
This is a page that shows how to use Klaro on your website.
|
||||
Just have a look at the source to see how it's done.
|
||||
</p>
|
||||
<p>
|
||||
You can review and update your consents by clicking <a href="" onClick="return klaro.show(klaroConfig, true)">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
You can reset your consents by clicking <a href="" onClick="klaro.getManager().resetConsents();location.reload()">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<!-- this is an example of an img tag managed by Klaro -->
|
||||
<img data-name="camera" data-src="../assets/Surveillance-camera-small.png" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- here are some examples for trackers-->
|
||||
|
||||
<!-- an inline JS tracking script -->
|
||||
<script type="text/plain" 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>
|
||||
|
||||
<!-- an externally loaded tracker -->
|
||||
<script type="text/plain" data-src="../examples/tracker.js" data-type="application/javascript" data-name="externalTracker"></script>
|
||||
|
||||
<!-- our (real) Matomo tracking code -->
|
||||
<script type="text/plain" data-type="application/javascript" data-name="matomo">
|
||||
var _paq = _paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.7scientists.com/";
|
||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||
_paq.push(['setSiteId', '7']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='application/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<noscript><p><img data-name="matomo" data-src="//analytics.7scientists.com/piwik.php?idsite=7&rec=1" style="border:0;" alt="" /></p></noscript>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
14
external/klaro/examples/tracker.js
gevendort
Normale Datei
14
external/klaro/examples/tracker.js
gevendort
Normale Datei
|
|
@ -0,0 +1,14 @@
|
|||
console.log("This is an example of an external 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("external-tracker", "foo", 120)
|
||||
6
external/klaro/ide.js
gevendort
Normale Datei
6
external/klaro/ide.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
632
external/klaro/index.html
gevendort
Normale Datei
632
external/klaro/index.html
gevendort
Normale Datei
|
|
@ -0,0 +1,632 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="assets/bulma.min.css" />
|
||||
<link rel="stylesheet" href="assets/prism.css" />
|
||||
<link data-name="googleFonts" data-href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
|
||||
<script defer type="application/javascript" src="assets/bulma.js"></script>
|
||||
<script defer type="application/javascript" src="assets/prism.js"></script>
|
||||
<script defer type="application/javascript" src="config.js"></script>
|
||||
<script defer type="application/javascript" src="configs/i18n.js"></script>
|
||||
<script defer type="application/javascript" src="klaro.js" data-config="klaroConfig" data-style-prefix="klaro">
|
||||
</script>
|
||||
<script type="text/plain" data-src="examples/tracker.js" data-type="application/javascript" data-name="externalTracker" onload="onLoadExternalTracker()">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
function onLoadExternalTracker(){
|
||||
console.debug("External tracker loaded!")
|
||||
}
|
||||
function showKlaro(config, modal){
|
||||
var element = document.getElementById("klaro").children[0];
|
||||
if (element !== undefined){
|
||||
if (element.classList !== undefined)
|
||||
element.classList.add("wiggle")
|
||||
else // IE9!
|
||||
element.className += " wiggle"
|
||||
setTimeout(function(){
|
||||
if (element.classList !== undefined)
|
||||
element.classList.remove("wiggle")
|
||||
else { //IE9!
|
||||
var classes = element.className.split(" ")
|
||||
var newClasses = []
|
||||
for(var i=0;i<classes.length;i++){
|
||||
if (classes[i] == "wiggle")
|
||||
continue
|
||||
newClasses.push(classes[i])
|
||||
}
|
||||
element.className = newClasses.join(" ")
|
||||
}}, 1000)
|
||||
}
|
||||
return klaro.show(config, modal);
|
||||
}
|
||||
window.addEventListener("DOMContentLoaded", function(e){
|
||||
|
||||
// we download the version list from the CDN
|
||||
var request = new XMLHttpRequest();
|
||||
request.addEventListener("load", function(e){
|
||||
var versions = JSON.parse(e.target.response).sort(function(a,b){
|
||||
if (a.name == "latest")return -1;
|
||||
var regex = /^v(\d+)\.(\d+)\.(\d+)$/
|
||||
var matchA = regex.exec(a.name);
|
||||
var matchB = regex.exec(b.name);
|
||||
if (matchA === null || matchB === null)
|
||||
return 0;
|
||||
var dMajor = parseInt(matchA[1]) - parseInt(matchB[1])
|
||||
if (dMajor != 0)
|
||||
return -dMajor;
|
||||
var dMinor = parseInt(matchA[2]) - parseInt(matchB[2])
|
||||
if (dMinor != 0)
|
||||
return -dMinor;
|
||||
var dPatch = parseInt(matchA[3]) - parseInt(matchB[3])
|
||||
if (dPatch != 0)
|
||||
return -dPatch;
|
||||
return 0;
|
||||
});
|
||||
for(var i=0;i<versions.length;i++){
|
||||
var option = document.createElement('option', {value: versions[i].name});
|
||||
option.innerHTML = versions[i].name;
|
||||
versionSelect.appendChild(option);
|
||||
}
|
||||
});
|
||||
request.open("GET", "https://cdn.kiprotect.com/klaro");
|
||||
request.send();
|
||||
|
||||
|
||||
var elements = document.getElementsByClassName("klaro-version");
|
||||
for(var i=0;i<elements.length;i++){
|
||||
elements[i].innerHTML = klaro.version();
|
||||
}
|
||||
|
||||
var translations = klaro.defaultTranslations;
|
||||
var langs = Array.from(translations.keys());
|
||||
for(var i=0;i<langs.length;i++){
|
||||
var lang = langs[i];
|
||||
var option = document.createElement('option', {value: lang});
|
||||
option.innerHTML = lang;
|
||||
languageSelect.appendChild(option);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script type="text/plain" data-type="application/javascript" data-name="inlineTracker">
|
||||
|
||||
console.debug("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>
|
||||
<link rel="stylesheet" href="assets/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- by default, klaro will be appended in the klaro div, or will create one at the end of the body if none exists.
|
||||
it's recommended to have klaro at the top of your content so that screen reader users can be notified early -->
|
||||
<div id="klaro"></div>
|
||||
<img data-hide=true data-title="We're watching you (for your own safety)" class="camera"
|
||||
data-src="assets/Surveillance-camera-small.png" data-name="camera" />
|
||||
<section class="hero is-info is-medium is-bold">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="../">
|
||||
Klaro!
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navbarMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenu" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li><a href="#features">Features</a></li>
|
||||
<li><a href="#getting-started">Getting Started</a></li>
|
||||
<li><a href="#help">Help</a></li>
|
||||
</ul>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-white is-outlined" href="https://github.com/KIProtect/klaro">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<u>Klaro!</u> Simple and user-friendly consent manager.
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Klaro is a free & open-source tool that provides
|
||||
an intuitive, user-friendly and compliant way to manage
|
||||
consent on your website. Klaro is easy to use and configure,
|
||||
lightweight and compatible with all modern browsers.
|
||||
</h2>
|
||||
<p>
|
||||
<a class="button is-success" onClick="return showKlaro(undefined, true);">Show manager</a>
|
||||
<a class="button is-warning" onClick="klaro.getManager().resetConsents();showKlaro(undefined, false)">Reset
|
||||
consent</a>
|
||||
</p>
|
||||
<p>
|
||||
<img class="screenshot" src="assets/klaro-screenshot-cut.png" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container features">
|
||||
<a name="features"></a>
|
||||
<div class="columns">
|
||||
<div class="column is-4 column-eq">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
Simple & User-Friendly
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
Klaro is simple, unobtrusive and
|
||||
optimized for mobile as well as
|
||||
desktop browsers. It tries to stay
|
||||
out of the way while helping you to
|
||||
be fully transparent and compliant.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-4 column-eq">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
Open Source
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
Klaro is licensed under a permissive
|
||||
<strong>BSD-3</strong> license, which
|
||||
means that you can use it freely for
|
||||
commercial and non-commercial purposes.
|
||||
No hidden fees or restrictions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-4 column-eq">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
Easy to Customize
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
Klaro can manage both inline and
|
||||
external scripts as well as static
|
||||
tracking elements like images or
|
||||
stylesheet links. New apps can be added
|
||||
with just a few lines of code.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container questions">
|
||||
<h1 class="subtitle"><a name="more-features">More features</a></h1>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Privacy by design & default</strong>: Klaro
|
||||
supports implicit and explicit (our favorite!) modes of consent and can
|
||||
make sure that no third-party apps are loaded without the
|
||||
consent of the user.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Smart change detection</strong>: Klaro automatically detects
|
||||
config changes and will renew consent whenever you add a new app
|
||||
for which the user didn't give consent yet.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Multilingual</strong>: Klaro has full support for
|
||||
internationalization and makes it easy to add or modify translations
|
||||
with just a few lines of code:
|
||||
<span style="display: block; background: #eee; padding: 14px; border: 1px solid #ccc; margin-top: 10px;">
|
||||
Show consent manager in
|
||||
<div class="select is-small" onChange="klaroI18nConfig.lang = languageSelect.value;klaro.getManager(klaroI18nConfig).resetConsents();showKlaro(klaroI18nConfig, true);return false;">
|
||||
<select id="languageSelect" class="select" name="lang">
|
||||
<option value="">please select</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Mobile-friendly and compatible with all modern browsers</strong>: Klaro
|
||||
works with all major browsers and is optimized for both desktop
|
||||
and mobile clients.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Lightweight & fast</strong>: Klaro.js is less than 20 kB
|
||||
of Javascript (minified + gzipped) and is lightning-fast so that your
|
||||
users won't notice any difference when using it.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Easy to customize</strong>: Klaro lets you change
|
||||
the stylesheet to better match your own design and lets you
|
||||
access its functionality via Javascript as well.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<div class="container getting-started">
|
||||
<h1 class="title"><a name="getting-started">Getting Started</a></h1>
|
||||
<div class="content">
|
||||
<p>
|
||||
Setting up Klaro on your website is easy and usually takes
|
||||
less than 10 minutes. All you need to do is write a small
|
||||
config file, load the <code>klaro.js</code> script and make
|
||||
a few small changes to your third-party/tracking scripts on your page
|
||||
so that Klaro can manage them.
|
||||
<strong>Let's get started!</strong>
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="subtitle">Write the config file (no worries, it's easy)</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-6 column-eq">
|
||||
<pre><code class="language-javascript">window.klaroConfig = {
|
||||
privacyPolicy: '/privacy.html',
|
||||
apps : [
|
||||
{
|
||||
name : 'google-analytics',
|
||||
default: true,
|
||||
title : 'Google Analytics',
|
||||
purposes : ['statistics'],
|
||||
cookies : [/^ga/i],
|
||||
callback : function(consent, app){
|
||||
//this is an example callback function...
|
||||
},
|
||||
},
|
||||
//...
|
||||
],
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="column is-6 column-eq">
|
||||
<div class="content">
|
||||
<p class="lead">
|
||||
First, you need to tell Klaro about the third-party
|
||||
apps and trackers on your site. To do this you write
|
||||
a simple Javascript config. The easiest way to get started is
|
||||
by looking at the annotated config file used for this site
|
||||
and simply modify it according to your needs.
|
||||
No rocket science involved, promised. There are some
|
||||
<a href="https://github.com/KIProtect/klaro/blob/master/dist/configs/">more examples</a> on
|
||||
Github as well.
|
||||
</p>
|
||||
<p>
|
||||
<a href="config.js" class="button is-warning">
|
||||
View example config
|
||||
</a>
|
||||
</p>
|
||||
<article class="message is-info">
|
||||
<div class="message-body">
|
||||
<strong>Stay tuned:</strong> We're working on an
|
||||
online configuration editor that will allow you
|
||||
to edit and download a config file without writing
|
||||
a single line of code!
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 class="subtitle">Modify your third-party/tracking scripts (just a little bit)</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-6 column-eq">
|
||||
<pre><code class="language-javascript" data-name="google-analytics"># Inline scripts:
|
||||
<script type="text/plain"
|
||||
data-type="application/javascript"
|
||||
data-name="google-analytics">
|
||||
//...
|
||||
</script>
|
||||
|
||||
# External scripts and resources (img, link, ...):
|
||||
<script type="text/plain"
|
||||
data-src="https://analytics.7scientists.com/matomo.js"
|
||||
data-name="matomo">
|
||||
</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="column is-6 column-eq">
|
||||
<div class="content">
|
||||
<p>
|
||||
To make sure that no tracking scripts and third-party apps are
|
||||
loaded without consent, you need to modify your HTML code a tiny bit:
|
||||
For inline scripts, replace the value of the <code>type</code> attribute with
|
||||
<code>text/plain</code> (this keeps the browser from executing the script)
|
||||
and add a data attribute with the original type,
|
||||
e.g. <code>data-type="application/javascript"</code>. Also add a <code>data-name</code>
|
||||
attribute that matches the name of the given app in your config,
|
||||
e.g. <code>data-name="googleAnalytics"</code>.
|
||||
</p>
|
||||
<p>
|
||||
For external script do the same, but in addition rename the <code>src</code>
|
||||
attribute to <code>data-src</code> (this ensures that the browser won't load the script
|
||||
without the consent of the user). This also works for other tags such
|
||||
as images/tracking pixels. Just remember to always add a <code>data-name</code>
|
||||
attribute that matches the name of the app in your config
|
||||
so that Klaro knows which element belongs to which app.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 class="subtitle">Load the config and the script (last step, promised)</h2>
|
||||
<div class="columns">
|
||||
<div class="column is-6 column-eq">
|
||||
<pre><code class="language-javascript"><script defer type="application/javascript"
|
||||
src="config.js"></script>
|
||||
<script defer data-config="klaroConfig" type="application/javascript"
|
||||
src="https://cdn.kiprotect.com/klaro/latest/klaro.js"></script></code></pre>
|
||||
</div>
|
||||
<div class="column is-6 column-eq">
|
||||
<div class="content">
|
||||
<p>
|
||||
Finally, include both the config script as well as the Klaro
|
||||
code on your page. You can defer the loading of the scripts
|
||||
if you like, just make sure the config is initialized when Klaro loads.
|
||||
You can have a look at our <a href="examples/simple.html">simple example page</a>
|
||||
to get an idea of how to do this.
|
||||
</p>
|
||||
<p>
|
||||
<a id="no-css">Unstyled Klaro:</a> We also provide a version of Klaro without styles, which is handy in case
|
||||
you want to bring our own or customize ours. Simply download <a href="klaro-no-css.js" download>klaro-no-css.js</a>
|
||||
and the minified stylesheet <a href="klaro.min.css" download>klaro.min.css</a> and include both
|
||||
of them in your HTML.
|
||||
We also have an unminified <a href="klaro.css" download>klaro.css</a> stylesheet, which is
|
||||
great if you want to make modifications to it. You can also look at
|
||||
the <a href="https://github.com/KIProtect/klaro/blob/master/src/scss/klaro.scss">SCSS file</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you want to host Klaro yourself, you can download it here.
|
||||
<div style="display:inline-block">
|
||||
<a id="versionLink" href="https://cdn.kiprotect.com/klaro/latest/klaro.js" download class="button is-warning">
|
||||
Download klaro.js
|
||||
</a>
|
||||
<div class="select">
|
||||
<select onChange="versionLink.href='https://cdn.kiprotect.com/klaro/'+versionSelect.value+'/klaro.js'" id="versionSelect" class="select" name="klaro-version">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
<section>
|
||||
<div class="container questions">
|
||||
<h1 class="subtitle"><a name="advanced-config">Advanced Configuration</a></h1>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<iframe width="560" height="315" data-name="youtube" data-style="dark" data-id="rick-astley" data-src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<h3>Rick Time!</h3>
|
||||
<h3>You should follow us!</h3>
|
||||
<div data-name="twitter">
|
||||
<a href="https://twitter.com/kiprotect?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @kiprotect</a>
|
||||
</div>
|
||||
<script data-type="application/javascript" async data-name="twitter" data-src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Customizing texts and translations</strong>: You can
|
||||
overwrite default translations and add your own if you like.
|
||||
As an example, check out <a
|
||||
href="https://github.com/KIProtect/klaro/blob/master/dist/configs/i18n.js">this
|
||||
config file</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Opening Klaro via a link</strong>: To allow you users
|
||||
to review and customize their consent decisions, you will need
|
||||
to let them open the Klaro manager on demand. You can do this
|
||||
by calling the <code>show</code> function of the Klaro library, e.g.
|
||||
like this: <code><a onClick="klaro.show();return false;">manage your
|
||||
consents</a></code>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Accessing the consent manager</strong>: You can access
|
||||
the consent manager via Javascript by using the <code>klaro.getManager(config)</code>
|
||||
function. Please not that currently the manager class does not
|
||||
notify the user interface of changes (yet), so make sure to call
|
||||
<code>klaro.show(config)</code> to update the UI after making
|
||||
changes to the consent configuration.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Managing cookies</strong>: Klaro can automatically delete
|
||||
third-party cookies for you when the user withdraws consent. To
|
||||
make use of this, simply define a <code>cookies</code> entry in the app config, e.g.
|
||||
like this: <code>'cookies' : ['_ga', '_gid', '_gat', /^_gac_.*$/i]</code>. You can
|
||||
also use regular expressions.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Custom callbacks</strong>: You can define custom callbacks
|
||||
for your applications that will be called with the given consent
|
||||
state (<code>true</code> if consent was given, <code>false</code> if not).
|
||||
They will be called when Klaro is loaded as well as each time the user updates
|
||||
the consent choices. This allows you to perform more advanced management
|
||||
tasks such as calling API endpoints to remove data.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Custom styling</strong>: If you want to build your own
|
||||
stylesheet for Klaro, you can set the <code>style-prefix</code>
|
||||
data attribute of the script tag loading the library
|
||||
to customize the class of the main DIV element of Klaro's UI,
|
||||
e.g. like this: <code><script src="klaro.js"
|
||||
data-style-prefix="my-styles"></script></code>
|
||||
This will assign the class <code>my-styles</code> class to Klaro's main DIV element and
|
||||
disable
|
||||
all default styles.
|
||||
<br />
|
||||
You can also use the non-CSS version of Klaro and include your own
|
||||
stylesheet, see <a href="#no-css">here</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<article class="message is-warning">
|
||||
<div class="message-body">
|
||||
Legal disclaimer: By using Klaro you agree that we (the Klaro authors) cannot be held
|
||||
responsible or liable for any damages resulting from
|
||||
the use of the software. Please note that we cannot guarantee that Klaro is
|
||||
bug-free (although we try our best) and suitable for your use case, so please
|
||||
be careful when using it. Finally, we cannot cannot provide any warranty or support
|
||||
beyond our voluntary help.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<div class="container questions">
|
||||
<h1 class="title"><a name="help">Questions?</a></h1>
|
||||
<div class="content">
|
||||
<p>
|
||||
Do you have questions or problems? Then just head
|
||||
over to our <a href="https://github.com/KIProtect/klaro">GitHub page</a>
|
||||
and feel free to open an <a href="https://github.com/KIProtect/klaro/issues">issue</a>.
|
||||
If you want to contribute to Klaro, feel free to
|
||||
open a <a href="https://github.com/KIProtect/klaro/pulls">pull request</a>
|
||||
(but better ask us for advice before you make large changes). You can
|
||||
also reach us by e-mail at <a href="mailto:klaro@kiprotect.com">klaro@kiprotect.com</a>.
|
||||
We're looking forward to hear from you!
|
||||
</p>
|
||||
<article class="message is-success">
|
||||
<div class="message-body">
|
||||
By the way, Klaro is pronounced [klɛro] and is a colloquial German word that means
|
||||
"alright" or "got it".
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section>
|
||||
<div class="container questions">
|
||||
<h1 class="title"><a name="privacy">Privacy Policy</a></h1>
|
||||
<div class="content">
|
||||
<p>
|
||||
This website is a project by <a href="https://kiprotect.com/company/imprint">KIProtect</a>.
|
||||
We use third-party applications and cookies on this site
|
||||
for analytics, demonstration purposes and security.
|
||||
You can review your consents
|
||||
for these <a href="#" onClick="klaro.show();return false;">here</a>.
|
||||
You have the following rights regarding your personal
|
||||
data: Erasure, rectification, access / download,
|
||||
portability, restriction of processing and filing a
|
||||
complaint at a responsible data protection agency.
|
||||
</p>
|
||||
<p>
|
||||
You can reach us at <a href="mailto:privacy@kiprotect.com">privacy@kiprotect.com</a>
|
||||
if you have any questions regarding this website or
|
||||
your personal data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- our (real) Matomo tracking code -->
|
||||
<script type="text/plain" data-type="application/javascript" data-name="matomo">
|
||||
var _paq = _paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.7scientists.com/";
|
||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||
_paq.push(['setSiteId', '7']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='application/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<noscript>
|
||||
<p><img data-name="matomo" data-src="//analytics.7scientists.com/piwik.php?idsite=7&rec=1" style="border:0;"
|
||||
alt="" /></p>
|
||||
</noscript>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
external/klaro/klaro-no-css.js
gevendort
Normale Datei
1
external/klaro/klaro-no-css.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
1
external/klaro/klaro-no-translations-no-css.js
gevendort
Normale Datei
1
external/klaro/klaro-no-translations-no-css.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
1
external/klaro/klaro-no-translations.js
gevendort
Normale Datei
1
external/klaro/klaro-no-translations.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
2149
external/klaro/klaro.css
gevendort
Normale Datei
2149
external/klaro/klaro.css
gevendort
Normale Datei
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
1
external/klaro/klaro.js
gevendort
Normale Datei
1
external/klaro/klaro.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
4
external/klaro/klaro.min.css
gevendort
Normale Datei
4
external/klaro/klaro.min.css
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
1
external/klaro/translations.js
gevendort
Normale Datei
1
external/klaro/translations.js
gevendort
Normale Datei
Dateidiff unterdrückt, weil mindestens eine Zeile zu lang ist
1
includes/contenido/.hold
Normale Datei
1
includes/contenido/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
1
locale/.hold
Normale Datei
1
locale/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
1
templates/conlite/css/.hold
Normale Datei
1
templates/conlite/css/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
1
templates/conlite/js/.hold
Normale Datei
1
templates/conlite/js/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
1
templates/contenido/css/.hold
Normale Datei
1
templates/contenido/css/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
1
templates/contenido/js/.hold
Normale Datei
1
templates/contenido/js/.hold
Normale Datei
|
|
@ -0,0 +1 @@
|
|||
|
||||
Laden …
In neuem Issue referenzieren