Ein Script für die Einholung einer Zustimmung für Cookies

Ein finales Script für Cookie-Hinweise

Im Gegensatz zu den ersten beiden Scripts werden bei diesem Script die Cookie-Hinweise nicht völlig ausgeblendet, sondern als Button oder Tab in den Randbereich verschoben, so lange keine Bestätigung der Zustimmung oder Kenntnisnahme erfolgte. Die Zeit des Verschiebens ist, wie bereits die Zeitspanne bis zum Ausblenden bei den ersten beiden Scripts, frei wählbar. Ebenso frei wähl ist, ob die Minimierung als größerer Button oder (Tab-)Fahne in den Randbereich verschoben werden soll.

Übersicht – Zustimmung zur Nutzung von Cookies:

• Cookie-Richtlinie (Hinweise zur Nutzung von Cookies)
• Position der Hinweise (Position fixed bei mobilen Endgeräten)
• Eine simple Variante (für beliebige Webseiten mit Position top)
• Eine erweiterte Variante (für beliebige Webseiten mit Position fixed)
• Ein finales Script (mit zusätzlichen Erweiterungen als dritte Variante)
• Als Plugin für WP (plus Download aller Varianten)

Hinweise zum Script

Bei Verwendung des Scripts sollten zuerst die Hinweise beachtet werden, die bereits unter “Eine simple Variante” gegebenen wurden und die wir hier nicht noch einmal wiederholen möchten. Weiterhin sollte berücksichtigt werden, dass zwar der Code auf dieser Seite recht übersichtlich gehalten wurde, doch im Einsatz eine Reduzierung besser ist, zum Beispiel in dem die CSS-Styles nur in einer durchgehenden Zeile notiert werden.

Falls die Cookie-Hinweise bereits ausgeblendet oder in den Randbereich verschoben wurden, können diese wieder reaktiviert und erneut eingeblendet werden. Diese Möglichkeit ist nicht Bestandteil des eigentlichen Scripts, sondern beschränkt sich auf die Demo-Einblendungen innerhalb unserer Seiten. Dazu wird ein bereits bestehendes Cookies in die Vergangenheit versetzt und die Hauptfunktion erneut aufgerufen.

Einzelheiten zum Ablauf

Da diese Variante lediglich auf den ersten beiden Varianten aufbaut, bitte zuerst unter eine “Eine simple Variante” nachlesen, auf dieser Seite möchten wir nur auf die Erweiterungen eingehen. So besteht ein wesentlicher Unterschied des innerhalb der Funktion “blendeTagesHinweiseAus” gekapselten Codes, da der DIV-Bereich nicht wirklich ausgeblendet werden soll. Vielmehr sollte das Element nur verkleinert werden und nicht mehr  als einen einzelnen Link enthalten, um als Button oder Tab durchzugehen. Dazu wird in der Funktion nur der Inhalt ausgetauscht.

Die Hauptfunktion “blendeHinweiseEin” musste jedoch ebenfalls erweitert werden, sonst wäre nach einem Seitenwechsel bei vorhandenen Tages-Cookie kein Element mit der ID “hinweise” vorhanden, welches gefüllt werden könnte.

Die Scripts sind kostenlos, ein kostenloser Support wird hingegen nicht übernommen. Einrichtung oder Anpassungen auf Anfrage.

Code der JavaScript-Datei hm-cookiehinweise.js in der Version 1.03:

/** --------------------------------------------------------------------------------
 * Scriptname:  HM-CookieHinweise
 * Description: Ein Script für die Ein- und Ausblendung von Cookie-Hinweisen.
 * Autor:       Horst Mueller
 * Autor URI:   http://www.coder-welten.com/
 * Version:     1.03 Release Candidate
 * Datum:       18. August 2015
 * Lizenz:      GNU General Public License v2 oder hoeher
 * Lizenz URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Copyright:   © 2006/2015 - Verlag Horst Mueller - Stendal
 * ---------------------------------------------------------------------------------
 */
"use strict";
/*----------------------------------------------------------------------------------
 * Globale Variablen, wobei nur die Zeit bis zur verkleinerten Ausblendung
 * gegebenenfalls angepasst werden sollte und die Einstellung, ob die verkleinerte
 * Darstellung als seitlicher Tab "Fahne" oder als größerer "Button" eingeblendet
 * werden soll.
 * ---------------------------------------------------------------------------------
 */
var hm_oldbrowser = false;
var hm_auswahlein = "Fahne"; // Auswahl für verkleinerte Darstellung
var hm_ausblenden = 60000;   // Ausblenden in 60000 Millisekunde o. nach Einstellung
/*----------------------------------------------------------------------------------
 * Funktionen nur aufrufen und Hinweise nur einblenden, falls der Browser nicht
 * false für die Annahme von Cookies übermittelt.
 * ---------------------------------------------------------------------------------
 */
if (navigator.cookieEnabled != false) {
    if (window.addEventListener) {
        window.addEventListener("load", blendeHinweiseEin, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("onload", blendeHinweiseEin);
        hm_oldbrowser = true;
    }
}
function blendeHinweiseEin() {
    var pruefeTag = /hinweise=einenTag/;
    var pruefeMon = /hinweise=einenMon/;
    // Die CSS Styles
    var elstyle = "width:82%;"                +
                  "max-width:600px;"          +
                  "font-family:Verdana;"      +
                  "font-size:14px;"           +
                  "color: #604c3e;"           +
                  "font-style:italic;"        +
                  "line-height:normal;"       +
                  "background-color:#f2e5b0;" +
                  "border:2px solid #98671a;" +
                  "border-radius:12px;"       +
                  "padding:12px;"             +
                  "position:fixed;"           +
                  "right:10px;"               +
                  "z-index:1000;"             +
                  "display:block;"            +
                  "box-shadow:0px 4px 6px #d3b7a9;";

    // Prüfe ob noch kein Cookie mit Namen "hinweise" für einen Tag oder Monat vorhanden ist.
    if (pruefeTag.test(document.cookie) != true && pruefeMon.test(document.cookie) != true) {
        // Hier ist eine Beräumung bei Wiedereinblendung erforderlich
        helfeBeraeumen();
        /*--------------------------------------------------------------------------
         * Erzeugung des DIV-Bereiches für die Einblendung. Die CSS-Eigenschaften
         * sowie Texte können angepasst werden, die URLs müssen angepasst werden.
         * -------------------------------------------------------------------------
         */
        var element = document.createElement("div");
        var hinweis = document.createTextNode("Unsere Website www.coder-welten.com " +
                                              "verwendet Cookies: ");
        var lkstyle = "text-decoration:none;" +
                      "font-family:Verdana;"  +
                      "font-size:14px;"       +
                      "font-weight:bold;"     +
                      "color:#98671a";

        element.setAttribute("id", "hinweise");

        var einlink = document.createElement("a");
        einlink.setAttribute("href", "http://www.example.com/datenschutz.html");
        einlink.setAttribute("target", "_blank");
        einlink.style.cssText = lkstyle;
        einlink.appendChild(document.createTextNode(" » Weitere Infos « "));

        var umbruch = document.createElement("br");
        var einoder = document.createTextNode("Mit der Nutzung unserer " +
        "Website erklären Sie sich mit dem Setzen von Cookies einverstanden. ");

        var einbutton = document.createElement("button");
        einbutton.setAttribute("id", "klickmich");
        einbutton.appendChild(document.createTextNode("OK"));

        // Abfrage ob addEventListener oder attachEvent für IE kleiner 9
        if (hm_oldbrowser  == false) {
            einbutton.addEventListener("click", blendeMonatsHinweiseAus, false);
        }
        else if (hm_oldbrowser == true) {
            einbutton.attachEvent("onclick", blendeMonatsHinweiseAus);
        }
        einbutton.style.cssText = "font-style:normal;"        +
                                  "color:#5d402f;"            +
                                  "border:2px solid #c0c0c0;" +
                                  "border-radius:3px;"        +
                                  "margin-top:2px;"           +
                                  "padding-top:0px;"          +
                                  "padding-bottom:0px;"       +
                                  "vertical-align:-3px;"      +
                                  "cursor:pointer;";

        element.appendChild(hinweis);
        element.appendChild(einlink);
        element.appendChild(umbruch);
        element.appendChild(einoder);
        element.appendChild(einbutton);

        element.style.cssText = elstyle;
        document.body.appendChild(element);
        // Ausblendung nach 60 Sekunden oder je nach Einstellung
        window.setTimeout(blendeTagesHinweiseAus, hm_ausblenden);
        /*--------------------------------------------------------------------------
         * Benötigte Funktionen nur aufrufen wenn die Hinweise eingeblendet sind, da
         * ansonsten kein Element mit der ID hinweise oder mit der ID klickmich
         * vorhanden ist. Das gildet auch für den Else-Zweig.
         * -------------------------------------------------------------------------
         */
        ueberwacheButton("starten");
        ueberwacheScreen("cookie_nein");
    }
    else if (pruefeTag.test(document.cookie) == true) {
        // Für kleinen DIV-Bereich als seitliche Fahne oder Button
        var element = document.createElement("div");
        element.setAttribute("id", "hinweise");
        element.style.cssText = elstyle;
        document.body.appendChild(element);

        // Benötigte Funktionen aufrufen und Auswertung von Cookie-Test übergeben
        ueberwacheButton("beenden");
        blendeTagesHinweiseAus();
        ueberwacheScreen("cookie_tag");
    }
}
// Verändert bei Hover das Aussehen des Buttons
function ueberwacheButton(was) {
    var ok_button;

    if (document.getElementById("klickmich") && was == "starten") {
        ok_button = document.getElementById("klickmich");
        // Starte Überwachung addEventListener
        if (hm_oldbrowser  == false) {
            ok_button.addEventListener("mouseover", schwebeStellung, false);
            ok_button.addEventListener("mouseout", normalStellung,  false);
        }
        else if (hm_oldbrowser == true) {
            ok_button.attachEvent("onmouseover", schwebeStellung);
            ok_button.attachEvent("onmouseout", normalStellung);
        }
    }
    else if (document.getElementById("klickmich") && was == "beenden") {
        ok_button = document.getElementById("klickmich");
        // Beende Überwachung addEventListener
        if (hm_oldbrowser  == false) {
            ok_button.removeEventListener("mouseover", schwebeStellung, false);
            ok_button.removeEventListener("mouseout", normalStellung,  false);
        }
        // Beende Überwachung attachEvent
        else if (hm_oldbrowser == true) {
            ok_button.detachEvent("onmouseover", schwebeStellung);
            ok_button.detachEvent("onmouseout", normalStellung);
        }
    }
    function schwebeStellung() {
        ok_button.style.color = "#800000";
        ok_button.style.border = "2px solid #989898";
    }
    function normalStellung() {
        ok_button.style.color = "#5d402f";
        ok_button.style.border = "2px solid #c0c0c0";
    }
}
/*----------------------------------------------------------------------------------
 * Überwachung von Screen mit Fallunterscheidungen für mobile Endgeräte und
 * ältere Browser. Die Liste kann bei Bedarf erweitert werden.
 * ---------------------------------------------------------------------------------
 */
function ueberwacheScreen(abfrage) {
    var mobile = /iPhone|iPad|iPod|Android|Windows Phone|BlackBerry/i.test(navigator.userAgent);
    var ismobi = (mobile) ? "Mobile" : "Nein";
    var istest = /hinweise=einenTag/.test(document.cookie);
    var rechts;

    if (document.getElementById("hinweise")) {
        var blende = document.getElementById("hinweise");
        var ihoehe = blende.offsetHeight;
        /*----------------------------------------------------------------------------------
         * if: Abstand vom rechten Rand bei Verkleinerung als Fahne liegt im Minusbereich
         * else if: Abstand vom rechten Rand je nach Screen-Weite liegt im Plusbereich
         * 40: Abstand in Pixel vom unteren Rand
         * ---------------------------------------------------------------------------------
         */
         if (ihoehe > 1) {
            if (hm_auswahlein == "Fahne" && (abfrage == "cookie_tag" || istest == true)) {
                rechts = -28;
                blende.style.cssText += "background-image:linear-gradient(to left, #b48220, #f2e5b0);" +
                                        "border-right:none;"         +
                                        "border-top-right-radius:0;" +
                                        "border-bottom-right-radius:0;";
            }
            else if (hm_auswahlein == "Button" || abfrage == "cookie_nein") {
                var iweite = (screen.availWidth < 1440) ? 4 : 20;
                rechts = Math.round((screen.availWidth / 100) + iweite);
                blende.style.cssText += "background-image:linear-gradient(to top, #eed6a1, #f2e5b0)";
            }
            if (window.innerHeight && screen.width > 800 && ismobi == "Nein") {
                var bistop = window.innerHeight - ihoehe - 40;

                blende.style.position = "fixed";
                blende.style.top      = bistop + "px";
                blende.style.right    = rechts + "px";
                window.setTimeout(ueberwacheScreen, 500);
            }
            else if (window.innerHeight && (screen.width <= 800 || ismobi == "Mobile")) {
                var bistop = (window.innerHeight - ihoehe - 40) + window.pageYOffset;

                blende.style.position = "absolute";
                blende.style.top      = bistop + "px";
                blende.style.right    = rechts + "px";
                window.setTimeout(ueberwacheScreen, 500);
            }
            else {
                blende.style.position = "fixed";
                blende.style.top = "40px";
            }
        }
    }
}
/*----------------------------------------------------------------------------------
 * Speichere Cookie bei Verkleinerung nach x Sekunden wegen fehlender Bestätigung
 * nur für einen Tag mit 24 x 60 x 60000 Millisekunden. Wird trotz Klick auf "OK"
 * noch einmal entsprechend der eingestellten Zeit aufgerufen.
 * ---------------------------------------------------------------------------------
 */
function blendeTagesHinweiseAus() {
    // Abfrage ob noch "hinweise" existent sind
    if (document.getElementById("hinweise")) {
        var object = document.getElementById("hinweise");

        // Bestehenden Inhalt löschen, falls vorhanden
        while (object.hasChildNodes()) {
            object.removeChild(object.firstChild);
        }
        // Einen neuen Link einfügen und DIV-Bereich verkleinern
        var absatz = document.createElement("p");
        absatz.style.cssText = "text-align:center; margin:2px";

        var neulink = document.createElement("a");
        neulink.setAttribute("href", "javascript:reaktiviereAnsicht()");
        neulink.appendChild(document.createTextNode("Cookie"));
        neulink.appendChild(document.createElement("br"));
        neulink.appendChild(document.createTextNode("» Hinweise « "));
        neulink.style.cssText = "text-decoration:none;" +
                                "font-family:Verdana;"  +
                                "font-size:14px;"       +
                                "font-weight:normal;"   +
                                "color:#98671a";

        absatz.appendChild(neulink);
        object.appendChild(absatz);
        object.style.maxWidth = "100px";

        if (hm_auswahlein == "Fahne") {
            object.style.paddingRight = "32px";
            object.style.paddingLeft  =  "8px";
        }
        var einTag = new Date();
        einTag.setTime(einTag.getTime() + (24 * 60 * 60000));
        document.cookie = "hinweise=einenTag; expires=" + einTag.toGMTString() + "; path=/";
    }
}
/*----------------------------------------------------------------------------------
 * Kleine Helferfunktion zur Beräumung bei Ausblendung in diesem Script nur bei "OK"
 * ---------------------------------------------------------------------------------
 */
function helfeBeraeumen() {
    if (document.getElementById("klickmich")) ueberwacheButton("beenden");
    if (document.getElementById("hinweise")) {
        var beraeumung = document.getElementById("hinweise");
        beraeumung.parentNode.removeChild(beraeumung);
    }
}
/*----------------------------------------------------------------------------------
 * Speichere Cookie bei Bestätigung mit Klick auf "OK" für 90 Tage mit
 * 90 x 24 x 60 x 60000 Millisekunden.
 * ---------------------------------------------------------------------------------
 */
function blendeMonatsHinweiseAus() {
    var einMon = new Date();
    einMon.setTime(einMon.getTime() + (90 * 24 * 60 * 60000));
    document.cookie = "hinweise=einenMon; expires=" + einMon.toGMTString() + "; path=/";
    // Ausblendung bei "OK"
    helfeBeraeumen();
}
/*----------------------------------------------------------------------------------
 * Falls die Hinweise bereits wegen Zeitüberschreitung verkleinert wurden, diese
 * zur Ansicht reaktivieren, dazu das Cookie überschreiben und die Seite reloaden.
 * ---------------------------------------------------------------------------------
 */
function reaktiviereAnsicht() {
    var weniger = new Date();
    weniger.setTime(weniger.getTime() + (-60000));

    if (/hinweise=einenTag/.test(document.cookie) == true) {
        document.cookie = "hinweise=einenTag; expires=" + weniger.toGMTString() + "; path=/";
        blendeHinweiseEin();
    }
}