1
0
Fork 0

folder structur and .hold files

added klaro files (src and external)
Dieser Commit ist enthalten in:
Ortwin Pinke 2021-02-23 19:10:07 +01:00
Ursprung f3db2db64b
Commit dae36da7a0
23 geänderte Dateien mit 3418 neuen und 0 gelöschten Zeilen

60
external/klaro/examples/gtm-config.js gevendort Normale Datei
Datei anzeigen

@ -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
Datei anzeigen

@ -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
Datei anzeigen

@ -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
Datei anzeigen

@ -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)