logo simone provenzano

 

Consenti ai tuoi visitatori di modificare le preferenze sui cookie con PJ-Cookie-Kit 2.0

Risorse per il tuo sito web

 

 

 

 

 

Form Cookie opt-in ed opt-out   Cookie opt-in opt-out

 

In questo articolo ti presento una possibile soluzione per inserire nel tuo sito la possibilità per un visitatore di impostare o modificare le sue preferenze sull'utilizzo dei cookie.
Innanzi tutto, se non sai proprio di cosa sto parlando, te lo spiego in breve. Se hai un sito web, molto probabilmente il tuo sito utilizza dei cookie, ed in questo caso devi adeguarlo secondo le nuove norme emanate dal Garante della Privacy in materia di cookie e tutela della privacy.
Se ancora non hai adeguato il tuo sito alla Cookie Law (Legge sui Cookie), puoi utilizzare una mia soluzione che descrivo passo passo nell'articolo "Soluzione per banner di avviso cookie e blocco preventivo", in cui ho messo inoltre a disposizione un apposito kit (PJ-Cookie-Kit) da scaricare e personalizzare.
Se invece sai già tutto ed hai già adeguato il tuo sito, potrebbe sorgere un altro problema: se una persona che ha visitato il tuo sito ha scelto di accettare o rifiutare i cookie, ma poi vuole cambiare la sua scelta, come deve fare? Stiamo parlando cioè di una sorta di "opt-in" ed "opt-out" da gestire direttamente nel tuo sito. La soluzione non è immediata perché, una volta effettuata una scelta, il banner di avviso sui cookie in genere scompare, quindi non è più possibile effettuare una nuova scelta se non cancellando i cookie nel proprio browser, operazione che non tutti sono capaci o hanno voglia di eseguire.
Gli elementi più comuni che utilizzano cookie praticamente in tutti i siti web sono i pulsanti social (Facebook, Twitter, Google Plus, ecc.), i banner pubblicitari di Google AdSense, i box dei commenti (Facebook, Disqus, ecc.)
Un visitatore che non accetta i cookie nel tuo sito non potrà accedere a questi servizi. Quindi, per fare alcuni esempi, non potrà condividere le tue pagine sui social network, non potrà commentarle e, ultimo ma non per importanza, non vedrà i banner pubblicitari, i quali aiutano il proprietario di un sito web a racimolare qualche euro (o, in alcuni casi, molto più di qualche euro!).
La conseguenza di tutto ciò è che il tuo sito può perdere diverse opportunità per accrescere la sua visibilità, e tu perdi un po' di soldi che invece potresti guadagnare se i tuoi annunci fossero visibili.
Per questi motivi, ma anche più semplicemente per dare ai tuoi visitatori la massima possibilità di azione ed interazione, può essere utile inserire nel tuo sito web un modulo permanente (cioè che non scompaia come il banner di avviso dei cookie) che consenta al visitatore di modificare in qualunque momento le sue preferenze sull'utilizzo dei cookie.
La soluzione che propongo a riguardo consiste fra l'altro in una revisione dello stesso "PJ-Cookie-Kit" di cui ti ho parlato all'inizio, quindi in sostanza si tratta di una soluzione "Tutto in uno" o, per fare i fighi, "All-in-One"!

 

 

 

Ma veniamo finalmente al dunque. Procurati innanzi tutto il kit originale al seguente link: PJ-Cookie-Kit.zip.
Nell'archivio scaricato troverai due file denominati "jquery.cookiebar"; uno di essi è un file CSS, mentre l'altro è un file JavaScript. Apri il file JavaScript con il tuo editor preferito (Dreamweaver, Amaya, Compozer, Notepad ++, Blocco Note, ecc.). Alle righe 179 e 180 troverai le seguenti istruzioni:

 

$('#cookie-bar .cb-enable').click(function(){cookieAccept();return false;});
$('#cookie-bar .cb-disable').click(function(){cookieDecline();return false;});

 

Le parti "#cookie-bar .cb-enable" e "#cookie-bar .cb-disable" si riferiscono al CSS, ed in particolare ai pulsanti della barra di notifica cookie. Un'immagine aiuterà a capire meglio:

 

Cookie Bar

 

Per farla semplice, le istruzioni in esame assegnano le funzioni di accettazione e non accettazione dei cookie ai rispettivi pulsanti "accetto" e "rifiuto" identificandoli grazie al loro id (#cookie-bar) ed alla loro classe (.cb-enable e .cb-disable).
Di conseguenza, giocando con gli id o le classi, possiamo fare in modo di richiamare queste funzioni anche attraverso un qualunque altro elemento presente nel sito, cioè nel nostro caso il modulo che andremo a creare.
Io ho scelto di utilizzare gli id, e leggendo capirai perché.

 

 

 

Creiamo quindi il nostro modulo. Di seguito riporto il codice di base, che andremo poi ad arricchire gradualmente in modo da farti comprendere il significato di ogni singolo intervento.

 

<form>
<fieldset>
Impostazioni attuali
<br />
<br />

<input type="radio" id="consenso" name="scelta" />
<label>Accetto i Cookie</label>
<br />
<br />

<input type="radio" id="rifiuto" name="scelta" />
<label>Non accetto i Cookie</label>
</fieldset>
</form>

 

Tralasciando gli stili che si possono applicare al modulo, si otterrà un risultato del genere:

 

Form Cookie

 

Ho utilizzato degli input di tipo "radio" perché questi consentono di imporre una sola scelta fra quelle disponibili, il che è d'obbligo per questo caso, visto che non si possono contemporaneamente accettare e rifiutare i cookie!
In particolare, per imporre questa condizione, è necessario che gli input interessati abbiano lo stesso nome. Ciò fa sì che il modulo capisca che le scelte possibili appartengono ad una stessa categoria, e che per quella categoria è possibile una sola scelta. In questo caso io ho usato il nome "scelta", ma ovviamente tu puoi chiamare gli input come vuoi, a patto che il nome sia sempre lo stesso per entrambi.

Ma veniamo al punto importante di questo codice: fare in modo che ciascuno di questi due input, quando cliccato, sia capace di richiamare la relativa funzione JavaScript.
Come ho accennato prima, basta giocare con gli id. Puoi osservare che all'input di accettazione ho assegnato l'id "consenso", mentre all'input di non accettazione ho assegnato l'id "rifiuto". Anche in questo caso puoi assegnare altri id a tuo piacimento, a patto che però stavolta siano diversi fra essi (perché ad ogni id dovremo associare una funzione diversa, nonché per un discorso proprio di semantica che in questo momento ritengo inutile approfondire).
A questo punto ho utilizzato questi stessi id all'interno delle istruzioni JavaScript che stiamo prendendo in esame, ottenendo le seguenti porzioni di codice.

 

$('#consenso').click(function(){cookieAccept();return false;});
$('#rifiuto').click(function(){cookieDecline();return false;});

 

Attenzione! Prima di proseguire ricorda che queste porzioni di codice vanno aggiunte a quelle originali e non sostituite, altrimenti perdi la funzionalità dei pulsanti nella barra di notifica cookie.
In altre parole dovrai avere un risultato fatto in questo modo:

 

// Istruzioni originali per i pulsanti della barra di notifica
$('#cookie-bar .cb-enable').click(function(){cookieAccept();return false;});
$('#cookie-bar .cb-disable').click(function(){cookieDecline();return false;});

// Istruzioni aggiunte per il modulo delle preferenze
$('#consenso').click(function(){cookieAccept();return false;});
$('#rifiuto').click(function(){cookieDecline();return false;});

 

 

 

PAGINA 1 PAGINA 2 PAGINA 3

 

 

Simone Provenzano

 

 

 

 

 

Privacy e Cookie