pixelarbeit
5/11/2018 - 11:05 PM
DSGVO Helpers
DSGVO Helpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DSGVO</title>
<link rel="stylesheet" href="./cookie-consent.css">
</head>
<body>
<a href="javascript: (new GoogleAnalytics()).optIn();">Google Opt In</a><br>
<a href="javascript: gaOptout();">Google Opt Out</a>
<script src="./dsgvo.js"></script>
<script>
var analytics = new GoogleAnalytics('UA-xxxxxx-x');
analytics.init();
// CookieConsent.reset();
CookieConsent.init({
text: 'Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, \
verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung \
von Cookies zu. \
Weitere Informationen zu Cookies erhalten Sie in unserer <strong>Datenschutzerklärung</strong>. Zudem haben \
Sie die Möglichkeit Tracking-Cookies auf dieser Website (z.B. Google Analytics) zu deaktivieren.',
acceptText: 'Akzeptieren',
denyText: 'Deaktivieren',
onFirstTime: function() {
analytics.loadScript();
},
onConsent: function() {
analytics.loadScript();
},
onDeny: function() {
// analytics.optOut();
}
});
</script>
</body>
</html>var gaOptout=function(){(new GoogleAnalytics()).optOut();alert('Google Analytics wurde deaktiviert')};var GoogleAnalytics=function(uacode){if(typeof GoogleAnalytics.instance=='object'){return GoogleAnalytics.instance}this.uacode=uacode;GoogleAnalytics.instance=this;return this};GoogleAnalytics.prototype.init=function(){console.info('Initialize Google Analytics');if(this.isActive()==false){this.disable()}};GoogleAnalytics.prototype.getCookieName=function(){return 'ga-disable-'+this.uacode};GoogleAnalytics.prototype.isActive=function(){return Cookie.hasValue(this.getCookieName(),'true')==false};GoogleAnalytics.prototype.loadScript=function(){if(this.isActive()==false){return}console.info('Loading Google Analytics Script');var script=document.createElement('script');script.type='text/javascript';script.async=true;script.src='https://www.google-analytics.com/analytics.js';document.getElementsByTagName('head')[0].appendChild(script);window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create',this.uacode,'auto');ga('set','anonymize_ip',true);ga('send','pageview')};GoogleAnalytics.prototype.disable=function(){window[this.getCookieName()]=true;console.info('Disabled Google Analytics',this.getCookieName())};GoogleAnalytics.prototype.optOut=function(){console.info('Opted out from Google Analytics');Cookie.set(this.getCookieName(),true,365,'/');this.disable()};GoogleAnalytics.prototype.optIn=function(){console.info('Opted in to Google Analytics');Cookie.set(this.getCookieName(),false,365,'/');this.loadScript()};var Cookie={set:function(name,value,expires,path){cookieStr=name+"="+escape(value)+"; ";if(expires){var today=new Date();var expr=new Date(today.getTime()+expires*24*60*60*1000);expires=expr.toGMTString();cookieStr+="expires="+expires+"; "}if(path){cookieStr+="path="+path+"; "}document.cookie=cookieStr},isSet:function(name){return document.cookie.indexOf(name+'=')>-1},hasValue:function(name,value){return document.cookie.indexOf(name+'='+value)>-1}};var CookieConsent={cookieName:'cookie-consent',defaults:{text:'Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.',acceptText:'Akzeptieren',denyText:'Ablehnen',onFirstTime:function(){},onConsent:function(){},onDeny:function(){}},init:function(config){this.config=[];for(var key in this.defaults){if(key in config){this.config[key]=config[key]}else{this.config[key]=this.defaults[key]}}if(Cookie.isSet(this.cookieName)){this.checkConsent()}else{this.config.onFirstTime();var that=this;window.addEventListener('DOMContentLoaded',function(){console.log('Show Consent Message');that.show()})}},show:function(){this.popup=document.createElement('div');this.popup.className='cookie-consent';var text=document.createElement('div');text.className='cookie-consent-text';text.innerHTML=this.config.text;var acceptBtn=document.createElement('button');acceptBtn.className='cookie-consent-btn cookie-consent-btn--accept';acceptBtn.innerText=this.config.acceptText;acceptBtn.addEventListener('click',this.accept.bind(this));var denyBtn=document.createElement('button');denyBtn.className='cookie-consent-btn cookie-consent-btn--deny';denyBtn.innerText=this.config.denyText;denyBtn.addEventListener('click',this.decline.bind(this));var btnGroup=document.createElement('div');btnGroup.className='cookie-consent-btn-group';if(this.config.denyText){btnGroup.appendChild(denyBtn)}btnGroup.appendChild(acceptBtn);this.popup.appendChild(text);this.popup.appendChild(btnGroup);document.body.appendChild(this.popup)},hide:function(){document.body.removeChild(this.popup)},checkConsent:function(){if(Cookie.hasValue(this.cookieName,true)){this.config.onConsent()}else{this.config.onDeny()}},decline:function(){Cookie.set(this.cookieName,false,365,'/');this.hide();this.checkConsent()},accept:function(){Cookie.set(this.cookieName,true,365,'/');this.hide();this.checkConsent()},reset:function(){console.info('Consent cookies was reset');Cookie.set(this.cookieName,true,-1,'/')}};/**
* Google Analytics Helper class
* Load Script, Opt-In, Opt-Out
*/
var gaOptout = function () {
(new GoogleAnalytics()).optOut();
alert('Google Analytics wurde deaktiviert');
}
var GoogleAnalytics = function(uacode) {
if (typeof GoogleAnalytics.instance == 'object') {
return GoogleAnalytics.instance;
}
this.uacode = uacode;
GoogleAnalytics.instance = this;
return this;
}
GoogleAnalytics.prototype.init = function() {
console.info('Initialize Google Analytics');
if (this.isActive() == false) {
this.disable();
}
}
GoogleAnalytics.prototype.getCookieName = function() {
return 'ga-disable-' + this.uacode;
}
GoogleAnalytics.prototype.isActive = function () {
return Cookie.hasValue(this.getCookieName(), 'true') == false;
}
GoogleAnalytics.prototype.loadScript = function () {
// Append scripts
if (this.isActive() == false) {
return;
}
console.info('Loading Google Analytics Script');
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://www.google-analytics.com/analytics.js';
document.getElementsByTagName('head')[0].appendChild(script);
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', this.uacode, 'auto');
ga('set', 'anonymize_ip', true);
ga('send', 'pageview');
}
GoogleAnalytics.prototype.disable = function () {
window[this.getCookieName()] = true;
console.info('Disabled Google Analytics', this.getCookieName());
}
GoogleAnalytics.prototype.optOut = function () {
// Set cookie
console.info('Opted out from Google Analytics');
Cookie.set(this.getCookieName(), true, 365, '/');
this.disable();
}
GoogleAnalytics.prototype.optIn = function () {
// Set cookie
console.info('Opted in to Google Analytics');
Cookie.set(this.getCookieName(), false, 365, '/');
this.loadScript();
}
/* Cookie Helper class */
var Cookie = {
set: function(name, value, expires, path) {
cookieStr = name + "=" + escape(value) + "; ";
if (expires) {
var today = new Date();
var expr = new Date(today.getTime() + expires * 24 * 60 * 60 * 1000);
expires = expr.toGMTString();
cookieStr += "expires=" + expires + "; ";
}
if (path) {
cookieStr += "path=" + path + "; ";
}
document.cookie = cookieStr;
},
isSet: function(name) {
return document.cookie.indexOf(name + '=') > -1;
},
hasValue: function(name, value) {
return document.cookie.indexOf(name + '=' + value) > -1;
}
}
/**
* Cookie Consent helper class
* Show Consent banner and save settings.
* Provides Hooks for loading scripts after consent
*/
var CookieConsent = {
cookieName: 'cookie-consent',
defaults: {
text: 'Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.',
acceptText: 'Akzeptieren',
denyText: 'Ablehnen',
onFirstTime: function() {},
onConsent: function() {},
onDeny: function() {}
},
init: function (config) {
this.config = [];
for (var key in this.defaults) {
if (key in config) {
this.config[key] = config[key];
} else {
this.config[key] = this.defaults[key];
}
}
if (Cookie.isSet(this.cookieName)) {
// Cookie set
this.checkConsent();
} else {
// First time
this.config.onFirstTime();
var that = this;
window.addEventListener('DOMContentLoaded', function() {
console.log('Show Consent Message');
that.show();
})
}
},
show: function () {
this.popup = document.createElement('div');
this.popup.className = 'cookie-consent';
var text = document.createElement('div');
text.className = 'cookie-consent-text';
text.innerHTML = this.config.text;
var acceptBtn = document.createElement('button');
acceptBtn.className = 'cookie-consent-btn cookie-consent-btn--accept';
acceptBtn.innerText = this.config.acceptText;
acceptBtn.addEventListener('click', this.accept.bind(this));
var denyBtn = document.createElement('button');
denyBtn.className = 'cookie-consent-btn cookie-consent-btn--deny';
denyBtn.innerText = this.config.denyText;
denyBtn.addEventListener('click', this.decline.bind(this));
var btnGroup = document.createElement('div');
btnGroup.className = 'cookie-consent-btn-group';
if (this.config.denyText) {
btnGroup.appendChild(denyBtn);
}
btnGroup.appendChild(acceptBtn);
this.popup.appendChild(text);
this.popup.appendChild(btnGroup);
document.body.appendChild(this.popup);
},
hide: function () {
document.body.removeChild(this.popup);
},
checkConsent: function () {
if (Cookie.hasValue(this.cookieName, true)) {
this.config.onConsent();
} else {
this.config.onDeny();
}
},
decline: function () {
Cookie.set(this.cookieName, false, 365, '/');
this.hide();
this.checkConsent();
},
accept: function () {
Cookie.set(this.cookieName, true, 365, '/');
this.hide();
this.checkConsent();
},
reset: function() {
console.info('Consent cookies was reset');
Cookie.set(this.cookieName, true, -1, '/');
}
}.cookie-consent{position:fixed;bottom:0;left:0;right:0;z-index:999;background-color:#222;padding:1em 1.5em;font-family:'Open Sans', Verdana, Tahoma, sans-serif;font-size:0.9em;line-height:1.5em;color:#f1f1f1}.cookie-consent a{color:#f1f1f1}.cookie-consent-btn-group{flex:0 0 auto;display:block;margin:1em auto 0;text-align:center}.cookie-consent-btn{display:inline-block;margin:0 0 0 0.5em;padding:0.7em 2.25em;background-color:transparent;border:none;border-radius:0.1em;font-size:1em;font-weight:600;color:white;cursor:pointer}.cookie-consent-btn--accept{background-color:#52B3D9;transition:background-color 0.4s}.cookie-consent-btn--accept:hover{background-color:#22A7F0}.cookie-consent-btn--deny{border:none}.cookie-consent-btn--deny:hover{text-decoration:underline}@media (min-width: 800px){.cookie-consent{display:flex;align-items:center}.cookie-consent-text{flex:1 0}.cookie-consent-btn-group{display:inline-block;margin:0 0 0 2em}}.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background-color: #222;
padding: 1em 1.5em;
font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #f1f1f1;
}
.cookie-consent a {
color: #f1f1f1;
}
.cookie-consent-btn-group {
flex: 0 0 auto;
display: block;
margin: 1em auto 0;
text-align: center;
}
.cookie-consent-btn {
display: inline-block;
margin: 0 0 0 .5em;
padding: .7em 2.25em;
background-color: transparent;
border: none;
border-radius: .1em;
font-size: 1em;
font-weight: 600;
color: white;
cursor: pointer;
}
.cookie-consent-btn--accept {
background-color: #52B3D9;
transition: background-color .4s;
}
.cookie-consent-btn--accept:hover {
background-color: #22A7F0;
}
.cookie-consent-btn--deny {
border: none;
}
.cookie-consent-btn--deny:hover {
text-decoration: underline;
}
@media (min-width: 800px) {
.cookie-consent {
display: flex;
align-items: center;
}
.cookie-consent-text {
flex: 1 0;
}
.cookie-consent-btn-group {
display: inline-block;
margin: 0 0 0 2em;
}
}