Ci sono stati molti dibattiti sull’argomento Cookie Policy ed una cosa che non è andata giù agli amministratori dei Siti Web è di ottenere il consenso esplicito dell’utente (solo in alcune occasioni, esempio: utilizzo di Google AdSense) all’accettazione dei Cookie prima di caricare la pagina Web, tutta la rete è in allarme per trovare una soluzione. Te la do io.
La tua Cookie Policy necessita di una conferma esplicita dell’utente prima di poter continuare a navigare sul Sito? Quindi i tuoi annunci AdSense, o altri script prima della sua esplicita conferma non devono essere eseguiti? Oggi ti spiego proprio come bloccare l’esecuzione di tutta la pagina prima di aver ricevuto la conferma dell’utente al consenso dell’utilizzo dei Cookie sul tuo sito.
Requisito fondamentale per l’esecuzione di questo Script è il PHP ed un minimo di dimistichezza col codice, quindi se il vostro Sito Web è statico in HTML necessita di un cambiamento di estensione ( se supportato dal vostro server).
Per piccoli Siti Web Dinamici
Apriamo la pagina nella quale vogliamo bloccare il contenuto finchè non abbiamo ottenuto il consenso esplicito dell’utente, e ci rechiamo prima dell’inizio del TAG <html>, scriviamo questo snippet:
if(isset($_POST["cookie"])){
setcookie("consenso","ok",time() + (864000 * 30), "/");
}
else if(!$_COOKIE["consenso"]){
echo "<style>html,body{margin:0;padding:0;}#cook-over{width:100%;height:100%;background:rgba(0,0,0,0.7);position:fixed;z-index:1000;}#cook-cont{background:white;width:90%;max-width:900px;padding:10px 15px;position:absolute;-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);border-top:10px solid #4CA6FF;}.btn-cook{display:block;width:70px;height:40px;background:#000000;color:white;text-align:center;float:right;line-height:2.3;}</style><div id='cook-over'><div id='cook-cont'><p>Proseguendo con la navigazione su questo sito acconsenti all'utilizzo dei nostri Cookie.<form method='POST'><input type='submit' class='btn-cook' name='cookie' value='OK' /></form></p></div></div>";
die;
}
Ovviamente tutti gli stili sono modificabili direttamente dal tag style, questo codice è solo un esempio tecnico di realizzazione, ognugno di voi dovrà adattarlo ai colori ed allo stile del proprio Sito.
Commentiamo il codice passo dopo passo:
Questa prima regola serve a verificare se è già stato premuto OK sul bottone per dare il proprio consenso e nel caso in cui l’utente lo avesse fatto crea un Cookie per ricordare la scelta effettuata.
if(isset($_POST["cookie"])){
setcookie("consenso","ok",time() + (864000 * 30), "/");
}
In questa porzione di codice stiamo esattamente verificando che se il Cookie sopra non esiste, quindi è la prima volta che il visitatore entra nella pagina Web dobbiamo mostrare il Popup, chiedere il consenso ed interrompere qualsiasi altra operazione.
else if(!$_COOKIE["consenso"]){
...
die;
}
Mentre questo è lo stile e l’html vero e proprio del popup
<style>
html,body{margin:0;padding:0;}
#cook-over{width:100%;height:100%;background:rgba(0,0,0,0.7);position:fixed;z-index:1000;}
#cook-cont{background:white;width:90%;max-width:900px;padding:10px 15px;position:absolute;-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.75);top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);border-top:10px solid #4CA6FF;}
.btn-cook{display:block;width:70px;height:40px;background:#000000;color:white;text-align:center;float:right;line-height:2.3;}
</style>
<div id='cook-over'>
<div id='cook-cont'>
<p>Proseguendo con la navigazione su questo sito acconsenti all'utilizzo dei nostri Cookie.
<form method='POST'>
<input type='submit' class='btn-cook' name='cookie' value='OK' />
</form>
</p>
</div>
</div>
- Nella riga 2 è possibile modificare l’overlay dello sfondo
- Nella riga 3 è possibile customizzare il popup, lo sfondo, l’ombra ed il bordo
- Nella riga 4 si può personalizzare il bottone
Se avete un piccolo CMS o un motore interno, dovrete includere questo Snippet nel file principale che genera l’header della pagina.
E se uso WordPress?
Per chi usa WordPress la soluzione più semplice e veloce è quella di includere lo Snippet nel file chiamato header.php nella cartella del vostro Template, appena prima l’inizio dell’html, del body ecc..
In questa maniera in 2 minuti avrete anche lì il vostro Script funzionante per bloccare il caricamento della pagina prima che l’utente accetti la vostra Cookie Policy.
