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: "28px",
popupTextFontSize: "18px",
colorOfButtonBackground: "#FFF",
colorOfButtonText: "#333",
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: 0; " +
"color: #ddd;" +
"background-color: rgba(0,0,0,0.6);" +
"} " +
"#cookiePopup #cookieBox {" +
"position: absolute; " +
"right: 0; " +
"height: 100vh; " +
"min-width: 320px; " +
"max-width: 600px; " +
"margin: 0; " +
"box-shadow: 0px 0px 15px #000;" +
"padding: 25px; " +
"background-color: #222;" +
"transition: all 0.5s;" +
"overflow-y: auto;" +
"} " +
"#cookiePopup #cookieBox h3 {" +
"margin-top: 0; " +
"margin-bottom: 0; " +
"font-size: "+ cookiesPolicy.popupTitleFontSize + ";" +
"font-weight: bold; " +
"font-family: sans-serif, arial; " +
"} " +
"#cookiePopup #cookieBox hr {" +
"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.colorOfButtonBackground + "; " +
"color: " + cookiesPolicy.colorOfButtonText + "; " +
"border: 0; " +
"border-radius: 5px; " +
"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 #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: "28px",
popupTextFontSize: "18px",
colorOfButtonBackground: "#FFF",
colorOfButtonText: "#333",
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.
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 😉
Grazie Alessandro, ho preso il codice e lo sto adattando a un sito che avevo realizzato tempo fa. Ho già fatto delle prove e pare che vada bene. Ti aggiorno una volta completato. Per quanto riguarta la privacy posso utilizzarla, modificandola ovviamente con i dati del titolare ?
Ottimo articolo, complimenti per il lavoro e grazie per la condivisione!
Molti utilizzano il bottone “rifiuta tutto”, è proprio necessario?
certo, la tua soluzione permetterebbe cmq di selezionare i vari elementi..
Credo che la confusione nasca quando decidere cosa includere o meno.
Solo ciò che riguarda i Cookie ? E gli elementi traccianti ? (es. livesession[dot]io) che non usano Cookie ?
Grazie Alessandro! era ciò di cui avevo bisogno, fantastico, sono riuscita anche a modificare i colori spulciando nel codice.. Un saluto, Alexia
Ciao Alexia,
sei stata un po’ sfortunata perché ho appena pubblicato una nuova versione del codice che risolve alcuni problemi e rende il codice maggiormente portabile…
Forse potresti scaricare il nuovo codice. Vedi tu… 🙂
Buon pomeriggio Alessandro e grazie per condividere il tuo lavoro.
Ho un paio di cose che non riesco a sistemare nonostante il mio impegno…
Come far funzionare correttamente l’interruzione ? Funziona bene solo con Explorer, con Chrome e Mozilla viene visualizzato solo in parte e spostato tutto sulla sinistra. Un ultima cosa, non mi da le tre opzioni (necessari, preferenze statistiche) ma solo necessari. Grazie e scusa la mia poca dimestichezza…
Annibale, ora il codice funziona ovunque. Scarica la nuova versione 😉
Buongiorno, complimenti per l’articolo e lo script!
Volevo chiedere se è possibile utilizzare lo script con gli Iframe.
Grazie mille!
No 🙁
Bisogna modificarlo…
ciao
Se vi può interessare ho leggermente modificato il codice per adattarlo a bootstrap 4
html:
Integer lacinia tristique ipsum quis suscipit
Aliquam nec tincidunt diam, sit amet rutrum lectus. Pellentesque sed molestie augue. Ut sodales sapien sed facilisis consectetur. Nullam quis magna porta, maximus felis vel, porttitor mi. In tempor dapibus libero, eget interdum lorem sagittis sit amet. Cras eleifend dolor vel hendrerit vestibulum. Integer non ipsum in quam eleifend ultricies ac in ligula. Mauris facilisis nunc sed porta faucibus.
js:
var cookiesPolicy = {
cookieGeneral: “unive.it”,
cookieCheckPref: “preferences”,
cookieCheckStat: “statistics”,
cookieCheckMark: “marketing”,
urlCookiePolicy: “https://www.urlCookiePolicy”,
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");
cookiesPolicy.popup.id = "cookiePopup";
cookiesPolicy.popup.innerHTML = cookiesPolicy.loadPopupContent();
var element = document.getElementById("cookies-form");
element.appendChild(cookiesPolicy.popup);
if (window.location.href===cookiesPolicy.urlCookiePolicy) {
if (cookiesPolicy.cookieValue==="1") {
cookiesPolicy.loadScript();
}
} else{
if (cookiesPolicy.cookieValue==="1") {
cookiesPolicy.loadScript();
}else{
$('#cookieModal').modal('show');
}
}
},
loadPopupContent: function() {
var checkForPref = "” +
“Preferenze” +
“”;
var checkForStat = “” +
“Statistiche” +
“”;
var checkForMark = “” +
“Marketing” +
“”;
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 = ” ” +
“” +
“Necessario” +
“” +
checkForPref +
checkForStat +
checkForMark +
“Informativa” +
“Accetta tutti i cookie” +
“Accetta i cookie selezionati”;
return htmlCode;
},
selAndloadScript: function() {
$(‘#cookiePopup’).find(‘input[type=”checkbox”]’).prop(‘checked’, true);
cookiesPolicy.loadScript();
},
loadScript: function() {
var d = new Date();
d.setTime(d.getTime() + (cookiesPolicy.cookieExpiresDays*24*60*60*1000));
var expires = “expires=”+ d.toUTCString();
var popupIsVisible = ($(‘#cookieModal’).hasClass(‘show’));
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) {
$('#cookieModal').modal('hide');
}
},
showPopup: function() {
$('#cookieModal').modal('show');
}
};
cookiesPolicy.start();
Oro per qualcuno! Pubblico subito!!!
Salve…. se inserisco type=”text/plain” data-starcookie=”marketing” sul nuovo script di Facebook ” incorpora pagina etc, etc, ” non è più visibile.
<script async defer crossorigin="anonymous" src…………….
Si può rimediare??
Saluti
Non ne ho idea. Appena ho un po’ di tempo verifico…
Grazie, veramente ottimo.
Provandolo su un sito Google Sites (non ancora pubblicato) non funziona però in modo responsive (un vero peccato): nell’anteprima per smartphone e tablet mi viene tagliata la parte in basso del banner. Dove sto sbagliando? Devo modificare qualche parametro del codice ?
Ringrazio sin da ora per l’aiuto.
Ciao Fabrizio, quasi certamente è il CSS che non consente al popup di adattarsi perfettamente alla risoluzione del tablet… Dovresti quindi modificare il CSS.
Ciao,
è possibile gestire anche i Tag iFrame (per es. quelli di Google Maps).
Grazie,
Marco
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?
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.
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!
Il colore del testo è indicato alla riga 120.
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
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().
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
Mario, purtroppo i sistemi di sicurezza hanno “rimosso” il tuo script… Non puoi inserire codice html/javascript nel commento 🙁
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??
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… 🙁
Ah ok, conosco abbastanza bene html/css ma non conosco javascript. Pensavo bastase copiare il codice.
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 + ” +
ottimo script, finora il migliore, anche se con googleAds non funziona… e non so come fare per essere in regola….qualche idea?
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.
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.
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…
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
Ciao Lorenzo,
purtroppo non so aiutarla perché non conosco gli script che utilizza…
CIAO, scusa ma io non riesco a vedere nulla… mi compare solo una pagina interamente bianca, come mai?
Forse sbaglio le intestazioni javascript?
Ciao Fabio,
senza maggiori dettagli sul codice che utilizzi e su come lo inserisci non riesco ad aiutarti.
Ciao, come posso fare affinché il pop-up non riesca più una volta accettato?
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…
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
Ciao Francesco,
la cosa più facile che mi viene in mente è di disabilitare il check del marketing. Del tipo:
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.
Ciao, Vivi,
devi modificare la riga 12, indicando il percorso assoluto in cui si trova la tua privacy policy 🙂
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!
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?
Ciao Michele,
sapere dove sbagli da qui… è un po’ un indovinello.. 🙁
La prima cosa che mi viene in mente è che non hai eliminato del codice il tag <script> quando hai copiato il codice nel file esterno js.
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?
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.
Complimenti per il Blog, chiedo una info, Inserendo il codice su tutte le pagine (o lo script ad un .js, il popup esce ogni volta che entro o rientro nelle pagine?
Ciao Paolo,
no, il popup viene visualizzato solo quando non trova i propri cookie, cioè alla prima vista dell’utente oppure quando i cookie sono scaduti.
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
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;
}
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.
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.
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…
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)
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
Ciao Daniele, per quanto riguarda YouTube procedi come segue.
Ciao.
Ottimo, l’unica cosa è che vorrei spostarlo più in alto perchè i menu sono davanti al popup e non si possono vedere i pulsanti.
Grazie
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…
Ciao il tuo articolo è interessante, utile e pratico….vorrei chiederti per chi usa CMS joomla dove deve inserire in codice?
Grazie
Ciao Francesca,
per aggiungere un codice javascript custom in Joomla, ti consiglio di utilizzare una delle estensioni di quel CMS. Ad esempio questa:
https://extensions.joomla.org/extension/add-custom-javascript/
In bocca al lupo 🙂
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?
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ù…