DSGVO Helpers

cookie-consent.css

.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;
    }
}

cookie-consent.min.css

.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}}

dsgvo.js

/**
 * 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, '/');
    }
}

dsgvo.min.js

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,'/')}};

index.html

<!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>