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 😉

48 Commenti

  1. Christian

    Grazie Alessandro per il contributo.
    La function loadScript carica gli script (tipo gli analytics) dopo che, e solo se, l’utente li abbia accettati, modificando l’attributo type da “text/plain” a “text/javascript”. Ma che succede se l’utente riapre il popup e disabilita i cookie precedentemente abilitati? Lo script non sembra fare l’operazione inversa e non so nemmeno se si possa fare lato client senza ricaricare la pagina.
    Hai qualche idea?

    1. Alessandro Stella

      Ciao Christian.
      Anche Riccardo ha fatto un’osservazione simile alla tua (trovi la risposta nei commenti).
      Credo che ti tocchi cancellare il cookie di tuo interesse (ponendo la data di scadenza ad una data antecedente alla data attuale) e ricaricare la pagina.

  2. Altra cosa… è possibile inserire una variabile per cambiare il colore del testo? Sono riuscito a farlo aggiungendo del testo nella var htmlcode, ma è poco “pulito” così…
    Grazie!

  3. Salve Alessandro,
    grazie del codice. Ho notato che il mio Dreamweaver indica come pericolosa la funzione eval(), ho cercato qualcosa su internet ed effettivamente molti forum lo sconsigliano per motivi di sicurezza.
    Cosa ne dici? Qualche alternativa? Non sono molto ferrato in javascript…
    Grazie

    1. Alessandro Stella

      Ciao Tonino,
      si, è noto, ma dovendo lanciare codice javascript di cui non si sa niente a priori non ho trovato altra soluzione se non l’utilizzo di eval().

  4. Mario

    Ciao Alessandro,

    io dovrei bloccare prima del consenso uno script di un servizio dove si hostano i cataloghi e poi tipo youtube, si prende l’indirizzo internet per lo share e lo si mette in un articolo.

    lo script è questo:

    solo che nel riquadro del plugin dove poter mettere gli script aggiuntivi per il blocco prima del consenso, mi dice che non devo mettere i tag . Quindi il codice giusto qual’è?

    Grazie

  5. Erminio

    Ciao, Intanto complimenti per l’articolo. L’ho trovato estremamente utile. Ho fatto copia e incolla al script e incollato al mio sito(wordpress) tramite plugin. Ma il risultato non è lo stesso. Il titolo “GDPR COOKIE POLICY” è scuro e si vede a malapena e ho come opzione i cookie necessari, preferenze e statistiche non appaiono. Ho controllato se avevo magari copiato male il codice ma mi sembra di averlo copiato correttamente. Purtroppo non conosco il linguaggio di javascript. Dove avrò sbagliato??

    1. Alessandro Stella

      Erminio…
      purtroppo per utilizzare questo script una minima conoscenza di programmazione web (html, css e javascript) bisogna averla, altrimenti è difficile modificare il codice HTML della pagina web per farlo funzionare correttamente… 🙁

        1. Erminio

          Non esce perché dove hai scritto :(var htmlCode = “” +), nella righa checkforpref non è completta. se vuoi che appaiano sul quadro deve continuare con :
          ” + checkForPref + “Preferiti” +
          invece che fermarti :
          ” + checkForPref + ” +

    1. Alessandro Stella

      Buongiorno, Cinzia.
      Google ADS dovrebbe essere composto da due script: uno carica un file .js e l’altro esegue il “push()”. Prova a modificare il secondo tag script e non il primo.

  6. Lorenzo Nardo

    Salve,
    non riesco a far funzionare questo popup , spuntando le categorie e accettando non funzionano comunque gli script, ispezionando la pagina noto però che l’attributo type del tag script viene modificato correttamente in text/javascript, nonostante gli script in questione continuano a non funzionare. Da cosa potrebbe di pendere?
    Ringrazio anticipatamente.

    1. Alessandro Stella

      Buongiorno, Lorenzo.
      L’unica cosa che mi viene in mente è che, per qualche motivo, non stia funzionando correttamente la funzione “eval()” di JavaScript (riga 214 dello script).
      Altro non saprei dire…

  7. Lorenzo

    Salve, innanzitutto complimenti per lo script, ho un sito composto solo da una pagina web d’iscrizione alla newsletter gli unici cookies che utilizzo sono quelli di google legati al recaptcha e quello di cloudflare, questi sono tutti cookies di sicurezza, quindi dovrei metterli sui necessari come dovrei fare con il tuo script? Inoltre mentre per il recaptcha posso inserire gli attributi nel tag per cloudflare non posso poiché non ho nessun script direttamente nella pagina. La ringrazio per l’aiuto

    1. Alessandro Stella

      Ciao Maurizio, il popup una volta accettato non deve più uscire perché scrive i cookie su disco e, se li trova, non si mostra. Se invece ciò non avviene, allora c’è qualcosa che non va nel codice…

  8. Francesco

    Ciao, ho trovato il tuo script molto interessante, sarebbe possibile avere un piccola modifica per forzare a lasciare abilitata una delle opzioni?
    Mi spiego meglio sul mio sito ho dei banner pubblicitari che ho legato al cookie di marketing, volevo pero’ che uscisse fuori un messaggio di avviso se il flag viene disattivato e non si potesse proseguire nella navigazione. Sarebbe possibile? Grazie

    1. Alessandro Stella

      Ciao Francesco,
      la cosa più facile che mi viene in mente è di disabilitare il check del marketing. Del tipo:

      <input type="checkbox" name="marketing" value="marketing" checked="" disabled="">
  9. Vivi

    Buongiorno Alessandro,
    grazie innanzitutto per lo script che hai condiviso.
    Mi è sfuggito come evitare che il popup appaia anche nella pagina contenente la policy privacy impedendone la lettura. Potrei modificare il css ma probabilmente c’è una soluzione migliore.
    Mi potresti aiutare? Grazie.

      1. Vivi

        Grazie Alessandro, in effetti il problema è sorto solo su un vecchio sito (Joomla versione 2.5) che comunque sarà presto sottoposto a restyling. Ho risolto con l’impostazione dello z-index. Buon lavoro!

  10. Michele

    Buonasera, una domanda semplice ma stupida, se io ho una pagina vetrina, dove non ho impostato nulla per salvare dati e seguire clienti, un sito semplice per pubblicità, come posso impostare questo script in modo che mi compaia all’inizio e salvare i dati la prima volta per non comparire piu dopo? ho provato a modificare le cose come da blog, cambiando i javascript in plain, e richiamando il file .js con il codice sopra elencato ma appena apro il sito non mi compare il popup, dove sbaglio?

      1. Michele

        Oggi leggevo di nuovo il blog e forse ho trovato dove sbaglio, forse, comincio a dire che e un vecchio sito che avevo fatto per una persona quando avevo studiato il web design, purtroppo poi per diversi motivi ho dovuto cambiare lavoro per mandare avanti la famiglia, questo per dire che ero alle prime armi a quei tempi, ora mi e stato chiesto di aggiungere questa cosa di gdpr al sito ma leggendo di nuovo il blog ho letto che il popup si apre quando trova uno script che abbia come funzione il data-starcookie. se non ho capito male, se non trova tale script non esce nessun messaggio, ma la pagina che ho creato io era una semplice vetrina, l’email per le newsletter veniva fornita direttamente al sito tramite email o parola, percio il sito non raccoglie nulla di dati se non in automatico da web. come posso agire ora? conviene creare uno script data-starcookiy e raccogliere dati per poi far funzionare queso script? quale e il consiglio piu semplice in questi casi?

        1. Alessandro Stella

          Ciao Michele,
          il “data-starcookie” è un attributo che deve essere impostato su ogni tag script che deve essere gestito dal popup…
          Se non imposti quell’attributo, lo script non funziona.
          Comunque se il sito non raccoglie alcun dato dell’utente (nessun modulo di contatto, nessuna registrazione) allora il popup non serve.

  11. Gianna

    Ciao Alessandro, grazie di aver messo a disposizione le tue competenze, volevo chiederti, ma se volessi che la popup fosse ad es. a 50px dal basso della pagina a sinistra, al posto di centrata in pagina dovrei aggiungere il valore bottom in questa parte del codice?

    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);” +
    “} ” +

    Grazie

    1. Alessandro Stella

      Ciao Gianna,
      il popup è costituito da due livelli. Il primo è nero, semitrasparente e rappresenta lo sfondo tutto intorno al pupup. È identificato tramite l’id #cookiePopup.
      All’interno di tale livello, c’è il livello del popup, identificato tramite l’id #cookieBox.
      È su tale livello che devi intervenire.
      Ad esempio questo codice sposta il box in basso a sinistra e riempie tutta la larghezza dello schermo…
      #cookieBox {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      border: 2px solid white;
      box-shadow: 0px 0px 15px #000;
      padding: 25px;
      background-color: #222;
      }

  12. Riccardo

    Ciao. Un’altra cosa. Con il gdpr non si potrebbe avere il checked già abilitati. Però così facendo, non tutti abilitano i cookie. Un trucco sarebbe quello di fare il pop-up con due bottoni, uno con ‘abilita tutti i cookie, ed un secondo bottone con gestisce preferenze che farebbe aprire un altro pop-up con la possibilità di abilitare/disabilitare i vari cookie.

    1. Alessandro Stella

      Eh… i “trucchi” sono una brutta storia… 😀
      La realtà è che il GDPR ha come fine ultimo un fine irraggiungibile, ossia impedire alle aziende private di tracciare gli utenti online. È una norma appositamente nata contro FB, Twitter, Google, ecc. Purtroppo chi l’ha scritta probabilmente ha ben chiaro come funziona il marketing online, ma non ha capito una mazza di informatica e di browser…
      Comunque sia, mettila così: vai sul sito di Repubblica (il giornale più letto di questa nazione). Su quel sito non solo non c’è alcun modo di fare quello che dici, ma appena tocchi la rotellina del mouse “La Repubblica” ricarica la pagina caricando TUTTI i cookie…
      Amen.

  13. Sei un grande!!! Mi chiedevo se c’era un modo per fare una cosa… ho modificato il tuo script ed inserito una nuova categoria di cookie, chiamata Facebook’s Cookie. Nel mio sito utilizzato uni script che fa visualizzare la mia pagina facebook. Prima di accettare i Facebook’s Cookie, ho messo un’immagine al suo posto. Non appena accetto i cookie di facebook il tuo script fa esattamente ciò che voglio, e cioè mi fa caricare la mia pagina facebook al posto dell’immagine. C’è un modo per tornare indietro? Nel senso che, se io torno nel pop-up di scelta e disattivo i cookie di facebook, vorrei che la mia pagina facebook scomparisse e che al suo posto tornasse l’immagine messa in precedenza. In pratica, come se forzassi di nuovo il caricamento della pagina, però magari caricando solamente lo script…

    1. Alessandro Stella

      Ciao Riccardo,
      per fare quello che chiedi ci possono essere diverse strade. Credo che la più semplice sia quella di:
      1. cancellare il cookie di tuo interesse (ponendo la data di scadenza ad una data antecedente alla data attuale)
      2. ricaricare la pagina (o sostituire tramite “innerHTML” la zona in cui compare la tua pagina FB)

  14. Daniele

    Ciao, grazie per il tuo codice. Volevo chiederti se c’è un modo per bloccare anche i cookies generati con un , per esempio quelli dei video di youtube. Grazie ciao

    1. Alessandro Stella

      Ciao Daniele, per quanto riguarda YouTube procedi come segue.

      1. Vai sul video YouTube che vuoi condividere sul tuo sito;
      2. Clicca su “Condividi”;
      3. Seleziona l’opzione “Incorpora”;
      4. Spunta l’opzione “Abilita modalità di privacy ottimizzata”;
      5. Copia il codice;
      6. Incollalo nel tuo sito.
    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 *