GDPR il codice JavaScript per il popup dei cookie

Dal 25 maggio 2018 entra in vigore il GDPR. Se hai un sito vetrina o un piccolo blog, puoi utilizzare questo codice JavaScript per avviare gli altri script soltanto dopo esplicita accettazione del visitatore.

Questo script parte dal presupposto che non bisogna eseguire nessun sistema di tracciamento fino a quando l’utente non ha accettato consapevolmente la nostra normativa sulla privacy e sui cookie. Fortunatamente possiamo impedire che i vari script javascript partano in automatico all’avvio del sistema.
Per farlo dobbiamo modificare tutti gli elementi <script> che contengono i nostri codici di tracciamento.
Tipicamente li si trova nella seguente forma.

<script type="text/javascript">
    // codice javascript
</script>

oppure

<script>
    // codice javascript
</script>

In entrambi i casi il codice all’interno dell’elemento viene eseguito appena richiamato.
Per evitare che ciò avvenga dobbiamo modificare l’attributo type come segue

<script type="text/plain">
    // codice javascript
</script>

In questo modo ci siamo assicurati che i nostri script NON partano appena l’utente arriva sul sito.
Quello che dobbiamo fare adesso è suddividere i nostri script in 3 grandi categorie:

  • cookie statistici
  • cookie di marketing
  • cookie di preferenza

Una volta suddivisi in queste categorie, dobbiamo cercarli nel codice HTML e modificare l’elemento <script> di ogni singolo script come segue:

<script type="text/plain" data-starcookie="categoria di appartenenza">
    // codice javascript
</script>

dove “categoria di appartenenza” può avere soltanto 3 valori:

  • statistics
  • marketing
  • preferences

Quindi, ad esempio, volendo bloccare l’esecuzione automatica dello script di Google Analytics, che si occupa di fare statistica, dobbiamo trovare la riga che lo richiama e trasformarla in qualcosa di simile a quanto segue.

<script type="text/plain" data-starcookie="statistics">
	//codice di Google Analytics...
</script>

Il codice JavaScript

A questo punto dobbiamo aggiungere il seguente script a tutte le pagine del nostro sito:

<script>
var cookiesPolicy = {
    popupTitle: "GDPR COOKIE POLICY",
    popupZIndex: "10000",
    popupTitleFontSize: "18px",
    popupTextFontSize: "11px",
    colorOfButton: "#007bce",
    cookieGeneral: "blog.alessandrostella.it",
    cookieCheckPref: "preferences",
    cookieCheckStat: "statistics",
    cookieCheckMark: "marketing",
    urlCookiePolicy: "https://blog.alessandrostella.it/privacy-cookie-policy/",
    cookieExpiresDays: 30,
    prefCheckValue: "checked",
    statCheckValue: "checked",
    markCheckValue: "checked",
    cookieValue: "0",
    showPopup: false,
    popup: null, 
 
    start: function() {
        window.addEventListener("load", cookiesPolicy.onLoad, false);
    },
    onLoad: function() {
        console.log("LOADED " + window.location.href);
        cookiesPolicy.getCookie();
        cookiesPolicy.createPopup();
    },
    getCookie: function() {
        var nameOfGeneral = cookiesPolicy.cookieGeneral+ "=";
        var nameOfPreferences = cookiesPolicy.cookieCheckPref+ "=";
        var nameOfStatistics = cookiesPolicy.cookieCheckStat+ "=";
        var nameOfMarketing = cookiesPolicy.cookieCheckMark+ "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i <ca.length; i++) {
            var c = ca[i];
                while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                }
                if (c.indexOf(nameOfGeneral) == 0) {
                    cookiesPolicy.cookieValue = c.substring(nameOfGeneral.length, c.length);
                }
                if (c.indexOf(nameOfPreferences) == 0) {
                    cookiesPolicy.prefCheckValue = c.substring(nameOfPreferences.length, c.length);
                }
                if (c.indexOf(nameOfStatistics) == 0) {
                    cookiesPolicy.statCheckValue = c.substring(nameOfStatistics.length, c.length);
                }
                if (c.indexOf(nameOfMarketing) == 0) {
                    cookiesPolicy.markCheckValue = c.substring(nameOfMarketing.length, c.length);
                }

        }
        return "";
    },
    createPopup: function() {
        cookiesPolicy.popup = document.createElement("div");
        var cssElement = document.createElement("style");
        cookiesPolicy.popup.id = "cookiePopup";
        cookiesPolicy.popup.innerHTML = cookiesPolicy.loadPopupContent();
        cssElement.innerHTML = cookiesPolicy.loadCSS();        
        var element = document.getElementsByTagName("body")[0];
        element.appendChild(cookiesPolicy.popup);
        element.appendChild(cssElement);
        if (window.location.href===cookiesPolicy.urlCookiePolicy) {
            cookiesPolicy.popup.style.display="none";
            if (cookiesPolicy.cookieValue==="1") {
                cookiesPolicy.loadScript();
            }
        } else if (cookiesPolicy.cookieValue==="1") {
            cookiesPolicy.popup.style.display="none"; 
            cookiesPolicy.loadScript();
        }
    },
    loadPopupContent: function() {
        var checkForPref = "<input type=\"checkbox\" name=\"preferences\" value=\"preferences\" " + cookiesPolicy.prefCheckValue + "><span class=\"checkboxtext\">Preferenze</span>";
        var checkForStat = "<input type=\"checkbox\" name=\"statistics\" value=\"statistics\" " + cookiesPolicy.statCheckValue + "><span class=\"checkboxtext\">Statistiche</span>";
        var checkForMark = "<input type=\"checkbox\" name=\"marketing\" value=\"marketing\" " + cookiesPolicy.markCheckValue + "><span class=\"checkboxtext\">Marketing</span>";
        var allPrefScript = document.querySelectorAll("script[data-starcookie=\"preferences\"]"); 
        if (allPrefScript.length===0) {
            checkForPref = "";
        }
        var allStatScript = document.querySelectorAll("script[data-starcookie=\"statistics\"]"); 
        if (allStatScript.length===0) {
            checkForStat = "";
        }
        var allMarkScript = document.querySelectorAll("script[data-starcookie=\"marketing\"]"); 
        if (allMarkScript.length===0) {
            checkForMark = "";
        }
        var htmlCode = "<div id=\"cookieBox\">" + 
                            "<h3>"+cookiesPolicy.popupTitle+"</h3>" + 
                            "<hr>" + 
                            "<p>Per poter gestire al meglio la tua navigazione su questo sito " + 
                            "verranno temporaneamente memorizzate alcune informazioni in piccoli file di testo denominati <strong>cookie</strong>. " + 
                            "È molto importante che tu sia informato e che accetti la politica sulla privacy e sui cookie di questo sito Web. " + 
                            "Per ulteriori informazioni, leggi la nostra politica sulla privacy e sui cookie.</p>" + 
                            "<p><a href=\""+cookiesPolicy.urlCookiePolicy+"\" title=\"Leggi la Policy\">Politica sulla privacy e sui cookie</a></p>" + 
                            "<div id=\"checkboxContainer\"> " + 
                                "<div class=\"singleCheckBox\"><input type=\"checkbox\" name=\"necesse\" value=\"necesse\" checked disabled><span class=\"checkboxtext\">Cookie necessari</span></div> " + 
                                "<div class=\"singleCheckBox\">" + checkForPref + "</div>" + 
                                "<div class=\"singleCheckBox\">" + checkForStat + "</div>" + 
                                "<div class=\"singleCheckBox\">" + checkForMark + "</div>" + 
                            "</div>" + 
                            "<button onClick=\"cookiesPolicy.loadScript()\">OK, HO CAPITO E ACCETTO</button>" + 
                        "</div>";
        return htmlCode;
    },
    loadCSS: function() {
        var style = "#cookiePopup {" +
                        "font-family: sans-serif; " + 
                        "position: fixed; " + 
                        "z-index: " + cookiesPolicy.popupZIndex + ";" + 
                        "left: 0; " + 
                        "top: 0; " + 
                        "height: 100vh; " + 
                        "width: 100%; " + 
                        "padding-top: 15vh; " + 
                        "color: #ddd;" +                         
                        "background-color: rgba(0,0,0,0.6);" + 
                        "} " + 
                    "#cookiePopup #cookieBox {" + 
                        "width: 90%; " + 
                        "max-width: 640px; " + 
                        "margin: 0 auto; " + 
                        "border: 2px solid white; " + 
                        "box-shadow: 0px 0px 15px #000;" + 
                        "padding: 25px; " + 
                        "background-color: #222;" + 
                    "} " + 
                    "#cookiePopup #cookieBox h3 {" + 
                        "margin-top: 0; " + 
                        "margin-bottom: 0; " + 
                        "font-size: "+ cookiesPolicy.popupTitleFontSize + ";" + 
                        "font-weight: bold; " + 
                        "font-family: sans-serif, arial; " + 
                    "} " + 
                    "#cookiePopup #cookieBox hr {" + 
                        "width: 60vw; " + 
                        "max-width: 250px; " + 
                        "margin-top: 0; " + 
                        "margin-left: 0; " + 
                    "} " + 
                    "#cookiePopup #cookieBox p {" + 
                        "font-size: " + cookiesPolicy.popupTextFontSize + ";" + 
                        "text-align: justify; " + 
                        "line-height: " + cookiesPolicy.popupTextFontSize + ";" + 
                        "font-family: sans-serif; " + 
                    "} " + 
                    "#cookiePopup #cookieBox p:nth-child(3) {" + 
                        "padding: 0 0 10px 0; " +                     
                    "} " +                                         
                    "#cookiePopup #cookieBox a {" + 
                        "color: #fff; " + 
                    "} " + 
                    "#cookiePopup #cookieBox #checkboxContainer {" + 
                        "padding: 15px 10px 25px 10px; " + 
                    "} " + 
                    "#cookiePopup #cookieBox #checkboxContainer div.singleCheckBox{" + 
                        "display: inline-block; " + 
                    "} " + 
                    "#cookiePopup #cookieBox #checkboxContainer input[type=checkbox] {" + 
                        "-ms-transform: scale(1.5); " + 
                        "-moz-transform: scale(1.5); " + 
                        "-webkit-transform: scale(1.5); " + 
                        "-o-transform: scale(1.5); " + 
                        "padding: 10px; " + 
                        "margin-left: 15px; " + 
                        "cursor: pointer; " + 
                    "} " + 
                    "#cookiePopup #cookieBox #checkboxContainer .checkboxtext {" + 
                        "margin-left: 5px; " + 
                        "display: inline; " + 
                        "font-size: " + cookiesPolicy.popupTextFontSize + ";" + 
                    "} " +                     
                    "#cookiePopup #cookieBox button {" + 
                        "background-color: " + cookiesPolicy.colorOfButton + "; " + 
                        "color: #fff; " + 
                        "font-size: 1rem; " + 
                        "padding: 10px 20px; " + 
                        "cursor: pointer; " + 
                        "transition: all 0.5s; " + 
                    "} " + 
                    "#cookiePopup #cookieBox button:hover {" + 
                        "background-color: white;" + 
                        "color: " + cookiesPolicy.colorOfButton + "; " + 
                    "} " + 
                    "@media screen and (max-width:768px) { " + 
                        "#cookiePopup {" +
                            "padding-top: 6vh; " + 
                        "} " + 
                        "#cookiePopup #cookieBox #checkboxContainer div.singleCheckBox{" + 
                            "display: block; " + 
                            "padding: 5px 0; " + 
                        "} " + 
                    "} ";
        return style;
    },
    loadScript: function() {
        var d = new Date();
        d.setTime(d.getTime() + (cookiesPolicy.cookieExpiresDays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        var popupIsVisible = (cookiesPolicy.popup.style.display==="block" || cookiesPolicy.popup.style.display ==="");
        if (popupIsVisible) {
            document.cookie = cookiesPolicy.cookieGeneral + "=1;" + expires + ";path=/";
        }
        if (document.querySelector("input[name=\"preferences\"]")!=null) {
            if (document.querySelector("input[name=\"preferences\"]").checked) {
                var allPrefScript = document.querySelectorAll("script[data-starcookie=\"preferences\"]"); 
                for (var i = 0; i < allPrefScript.length; i++) {
                    allPrefScript[i].setAttribute("type","text/javascript");
                    try {
	                    eval(allPrefScript[i].text);
                    } catch (err) {
                    	//doNothing
                    }
                }
                if (popupIsVisible) {
                    cookiesPolicy.prefCheckValue = "checked";
                    document.cookie = cookiesPolicy.cookieCheckPref + "=" + cookiesPolicy.prefCheckValue + ";" + expires + ";path=/";
                }
            } else if (popupIsVisible) {
                    cookiesPolicy.prefCheckValue = "";
                    document.cookie = cookiesPolicy.cookieCheckPref + "=" + cookiesPolicy.prefCheckValue + ";" + expires + ";path=/";
            }
        }
        if (document.querySelector("input[name=\"statistics\"]")!=null) {
            if (document.querySelector("input[name=\"statistics\"]").checked) {
                var allStatScript = document.querySelectorAll("script[data-starcookie=\"statistics\"]");
                for (var i = 0; i < allStatScript.length; i++) {
                    allStatScript[i].setAttribute("type","text/javascript");
		    try {
			var newCode = document.createElement("script");
			newCode.text = allStatScript[i].text;
			document.body.appendChild( newCode );
	                eval(allStatScript[i].text);
                    } catch (err) {
			console.log(err);
                        //doNothing
                    }
                }
                if (popupIsVisible) {
                    cookiesPolicy.statCheckValue = "checked";
                    document.cookie = cookiesPolicy.cookieCheckStat + "=" + cookiesPolicy.statCheckValue + ";" + expires + ";path=/";
                }
            } else if (popupIsVisible) {
                cookiesPolicy.statCheckValue = "";
                document.cookie = cookiesPolicy.cookieCheckStat + "=" + cookiesPolicy.statCheckValue + ";" + expires + ";path=/";
            }
        }
        if (document.querySelector("input[name=\"marketing\"]")!=null) {
            if (document.querySelector("input[name=\"marketing\"]").checked) {
                var allMarkScript = document.querySelectorAll("script[data-starcookie=\"marketing\"]");
                for (var i = 0; i < allMarkScript.length; i++) {
                    allMarkScript[i].setAttribute("type","text/javascript");
		    try {
	                    eval(allMarkScript[i].text);
                    } catch (err) {
                        //doNothing
                    }
                }
                if (popupIsVisible) {
                    cookiesPolicy.markCheckValue = "checked";
                    document.cookie = cookiesPolicy.cookieCheckMark + "=" + cookiesPolicy.markCheckValue + ";" + expires + ";path=/"; 
                }
            } else if (popupIsVisible) {
                cookiesPolicy.markCheckValue = "";
                document.cookie = cookiesPolicy.cookieCheckMark + "=" + cookiesPolicy.markCheckValue + ";" + expires + ";path=/"; 
            }
        }
        if (popupIsVisible) {
            cookiesPolicy.popup.style.display="none";
        }
    },
    showPopup: function() {
        cookiesPolicy.popup.style.display="block"; 
    }
};
cookiesPolicy.start();
</script>

Cosa fa questo script?

Cerca tutti gli elementi <script> che abbiano l’attributo “data-starcookie” e li raccoglie nelle tre categorie di cui sopra (statistics, marketing, preferences).
Inoltre crea un popup che contiene una checkbox per ogni tipologia di script trovata.
Quando l’utente salva le informazioni, lo script memorizza le preferenze in 4 cookie, lancia tutti gli script scelti dall’utente e nasconde il popup.
Il popup può essere richiamato in ogni momento tramite il codice javascript:

cookiesPolicy.showPopup();

In questo modo consentiamo al visitatore di modificare in ogni momento le proprie preferenze (come richiesto dalla normativa GDPR). Se vuoi vedere cosa significa, apri il popup con le tue impostazioni.
Il sito che stai visitando utilizza tale script. Al momento di gratuito non ho trovato di meglio.
Il codice appena visto è responsivo e, a livello estetico, produce il popup grigio scuro visibile al centro delle seguenti immagini (per desktop e smartphone).

PERSONALIZZAZIONI POSSIBLII

Ci sono alcuni dati da cambiare necessariamente e altri che servono per modificare l’aspetto estetico del pupup.
La riga 3 setta il titolo del popup.
La riga 4 è utile nel caso in cui il popup dovesse comparire dietro qualche altra struttura della pagina web, come ad esempio un menù di navigazione. In tale circostanza è possibile aumentare quel valore fino a quando il popup non compare davanti a tutto il resto.
La riga 5 decide la dimensione del testo del titolo.
La riga 6 decide la dimensione del testo del messaggio.
La riga 7 indica il colore di sfondo del bottone.
La riga 8 decide il nome del cookie (deve essere cambiato!).
Le righe 9, 10 e 11 decidono i nomi dei cookie per le tre categorie viste sopra.
La riga 12 indica il link assoluto in cui si trova la tua policy (deve essere cambiato!).
Infine la riga 13 indica per quanti giorni restano valide le scelte dell’utente.

<script>
var cookiesPolicy = {
    popupTitle: "GDPR COOKIE POLICY",
    popupZIndex: "10000",
    popupTitleFontSize: "18px",
    popupTextFontSize: "11px",
    colorOfButton: "#007bce",
    cookieGeneral: "blog.alessandrostella.it",
    cookieCheckPref: "preferences",
    cookieCheckStat: "statistics",
    cookieCheckMark: "marketing",
    urlCookiePolicy: "https://blog.alessandrostella.it/privacy-cookie-policy/",
    cookieExpiresDays: 30,
    ...

Come si usa su WordPress

Volendo, possiamo fare copia incolla del codice nel file footer.php del tema in uso su WordPress, ma non è una buona idea…
Il modo più semplice per aggiungere codice JavaScript o CSS o HTML al nostro sito WordPress è quello di utilizzare uno dei tanti plugin che consentono di farlo.
In particolare qui si segnala HFCM.
Ecco la creazione di uno snippet JavaScript con incollato (in basso) un codice JavaScript utilizzando tale plugin.
Header Footer Code Manager
Si occuperà il plugin di inserire in coda (o in testa, in base al valore del parametro “Location”) alle nostre pagine il codice da noi inserito.

Come si usa su un sito non WordPress

Se invece vogliamo utilizzare questo script nel nostro sito non WordPress, ci basta copiarlo e incollarlo all’interno del codice HTML, magari dentro l’elemento head. Oppure è anche possibile creare un file .js, incollare il codice SENZA l’elemento <script> in apertura e in chiusura di codice e poi richiamare il file javascript all’interno del nostro codice HTML.

Vuoi saperne di più su questo “mostro” di nome GDPR? Allora puoi leggere l’approfondimento che trovi qui: http://blog.alessandrostella.it/approfondimenti/gdpr-webmaster-siti-web/

Hai migliorie da apportare o suggerire?
Lasciale in un commento e modificherò il codice 🙂

Salutatemi il GDPR 😉

6 Commenti

    1. Alessandro Stella

      Ciao Fabio,
      ho modificato lo script. Sostituisci il vecchio con il nuovo e riprova. Ora puoi modificare facilmente sia lo z-index (per fare in modo che il popup appaia davanti ad ogni altra struttura del sito) sia le dimensioni dei caratteri 🙂 Leggi la parte finale dell’articolo se hai bisogno di maggiori informazioni…

      1. Francesca

        Ciao ti ringrazio per la risposta, sono autodidatta e mi appassiono e stimolo alle novità. Vorrei chiederti la procedura in joomla per utilizzare il tuo codice. Ho scaricato l’estensione che mi hai suggerito, la installo, abilito il plug-in ed il tuo codice dove lo inserisco?

        1. Ciao Francesca,
          se non si è pratici di queste cose, può essere necessario perderci un po’ di tempo prima di riuscire a gestirle.
          La prima cosa da fare è leggere la guida dell’estensione che hai installato: https://joomla.impression-estudio.gr/en/joomla-extensions/add-custom-javascript/documentation.
          Poi devi copiare e incollare il mio codice in un file di testo con estensione .js (ammettiamo gdpr.js) avendo cura di eliminare i tag “script” di apertura a di chiusura.
          Infine devi copiare il file gdpr.js da qualche parte sul tuo server e indicarne la posizione nei giusti campi dell’estensione.
          Se sei alle prime armi, la cosa può essere complicata, ma non posso fare di più…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *