Questo articolo è vecchio! Con l’avvento del GDPR il codice è stato completamente riscritto! Vai qui: https://blog.alessandrostella.it/programmazione/client/javascript/gdpr-codice-javascript-per-popup-cookie/ e utilizza il nuovo codice.
Da qualche tempo i plugin di WordPress che mostrano l’avviso sull’utilizzo dei cookies hanno preso l’abitudine di tracciare i nostri comportamenti. Non sempre questa è una cosa gradita. Nel mio caso non lo è affatto.
Per tale motivo, in questo breve post, vedremo un esempio di codice JavaScript che ci consente di inserire il link alla nostra pagina della privacy sul nostro sito WordPress e, in verità, su qualsiasi sito.
Nel caso in esame viene utilizzato codice CSS inline, cosa da evitare.
Il codice JavaScript
Iniziamo dal codice. Eccolo qui di seguito.
<script>
var cookiesPolicy = {
cookieName: "blog.alessandrostella.it",
cookieValue: "1",
cookieExpiresDays: 7,
popup: null,
popupText: "<p>Questo sito fa uso di cookies di profilazione per rendere più utile la tua navigazione. <a href=\"https://blog.alessandrostella.it/cookie-policy/\" title=\"Privacy\" style=\"color:#666\">Voglio sapere di più</a></p><button onclick=\"cookiesPolicy.setCookie()\" style=\"cursor:pointer; margin-top:20px\">OK</button>",
start: function() {
window.addEventListener("load", cookiesPolicy.onLoad, false);
},
onLoad: function() {
console.log("LOADED");
if (cookiesPolicy.getCookie()==="") {
console.log("cookie non settato");
cookiesPolicy.createPopup();
}
},
getCookie: function() {
var name = cookiesPolicy.cookieName+ "=";
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(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
},
setCookie: function() {
var d = new Date();
d.setTime(d.getTime() + (cookiesPolicy.cookieExpiresDays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cookiesPolicy.cookieName + "=" + cookiesPolicy.cookieValue + ";" + expires + ";path=/";
cookiesPolicy.popup.style.display="none";
},
createPopup: function() {
cookiesPolicy.popup = document.createElement("div");
cookiesPolicy.popup.setAttribute("style", "position:fixed; z-index:1000; left:0; bottom:0; width:100%; min-height:100px; background-color:#222; padding:10px; color:#999; text-align:center; font-size:0.8rem");
cookiesPolicy.popup.innerHTML = cookiesPolicy.popupText;
var element = document.getElementsByTagName("body")[0];
element.appendChild(cookiesPolicy.popup);
}
}
cookiesPolicy.start();
</script>
Cosa fa questo codice?
A livello estetico produce il popup grigio scuro visibile nella parte bassa delle seguenti immagini (per desktop e smartphone).
A livello tecnico, invece, crea un oggetto JavaScript denominato “cookiesPolicy”.
Assegna a tale oggetto alcune proprietà: cookieName, cookieValue, cookieExpiresDays, popup e, infine, popupText.
La proprietà cookieName rappresenta il nome che avrà il nostro cookie (nel caso del codice sopra, il valore è “blog.alessandrostella.it” – riga 3).
La proprietà cookieValue rappresenta il valore che sarà associato al cookie (nel caso del codice sopra, il valore sarà “1” – riga 4).
La proprietà cookieExpiresDays comunica al browser per quanto tempo quel cookie sarà valido (nel caso del codice sopra, il valore sarà di 7 giorni – riga 5).
La proprietà popup rappresenta l’elemento HTML in che verrà utilizzato per mostrare il popup (riga 6).
Infine la proprietà popupText rappresenta il codice HTML che compone il popup (riga, lunghissima, 7).
A queste 5 proprietà, il codice aggiunge 5 metodi: start, onLoad, getCookie, setCookie, createPopup.
I nomi sono decisamente autoesplicativi.
Il metodo start (riga 9) è il primo ad essere lanciato (dall’ultima istruzione – riga 49)) e serve a comunicare al browser che deve lanciare il metodo onLoad soltanto se il documento HTML è stato completamente caricato.
A quel punto, se il cookie non è stato settato nella cache del browser [riga 14] viene creato il popup (tramite il metodo createPopup – riga 41) da mostrare all’utente con tanto di pulsante “ok”.
Se l’utente clicca sul pulsante “ok”, viene lanciato il metodo setCookie che crea il cookie e rimuove il popup.
ATTENZIONE: il valore della proprietà popupText DEVE essere inserito tutto su una riga.
Come si usa
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) il nostro codice utilizzando tale plugin.
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.
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.
Lo script può essere migliorato inserendo, ad esempio, il codice CSS non inline, ma almeno internal o, meglio, external.
Hai migliorie da apportare o suggerire?
Lasciale in un commento e modificherò il codice 🙂
Salutatemi il tracciamento 😉