• Tempo di lettura: 5 minuti

La più semplice soluzione possibile per un banner di allerta cookie

Questa cosa dei cookie, del GDPR, delle policy, ormai ha un po’ rotto le scatole a tutti. Vere soluzioni complete non esistono e ci sono requisiti spesso impossibili da soddisfare.

Comunque, spesso non c’è bisogno di complicarsi la vita e un alert, magari molto semplice e discreto, assolve al suo compito e ci semplifica la vita.

Ecco la mia proposta.

Il markup

Un semplicissimo blocco di codice html da piazzare fuori da qualsiasi altro contesto. Io l’ho messo come primissima cosa dopo l’apertura del body.

Un contenitore, un testo e un bottone: fine!

<div id=”cookie”>
<div id=”cookie-wrapper”>
<div id=”cookie-content”>Questo sito <em>potrebbe</em> usare i cookie</div>
<button id=”cookie-ok”>Ok</button>
</div>
</div>

view rawcookie-markup.html hosted with ❤ by GitHub

Lo stile

Io l’ho scritto in SCSS ma è molto semplice.

Lo piazziamo in basso, in buon contrasto con lo sfondo della pagina; posizione fissa e centrale; flexbox per organizzare gli elementi; pulsante pulito e minimale: fine!

#cookie{
display: none;
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: #212529;
color: #dee2e6;
max-width: 90%;
z-index: 1090;
font-size: .8rem;
#cookie-wrapper{
display: flex;
flex-direction: row;
padding: .6rem 0;
#cookie-content,
#cookie-ok{
padding: 0 .6rem;
}
#cookie-content{
border-right: 1px solid #dee2e6;
}
#cookie-ok{
border: 0;
background: none;
color: inherit;
}
}
}

view rawcookie-style.scss hosted with ❤ by GitHub

Da far notare. Di standard il blocco sarebbe nascosto grazie dall’istruzione display: none ma poi ci penserà il codice Javascript a decidere se l’utente deve vederlo o meno.

Lo script

Ok, giusto questo è qualcosa di interessante.

Dobbiamo decidere se mostrare o meno il banner. Inoltre dobbiamo salvarci il fatto che l’utente abbia cliccato l’ok e quindi “basta banner”.

Usiamo quindi jQuery per le azioni (tanto c’è dappertutto) e, in questo caso, ho deciso di salvare l’informazione del click nel localStorage così da non dover presentare più il banner per questo utente.

(function($){
$(document).ready(function() {
var consent = localStorage.getItem(‘cookie-consent’);
if(consent != ‘true’){
$(‘#cookie’).fadeIn();
}
$(‘#cookie-ok’).click(function(event){
localStorage.setItem(‘cookie-consent’, ‘true’);
$(‘#cookie’).fadeOut();
});
});
})(jQuery);

view rawcookie-script.js hosted with ❤ by GitHub

Per “storare” il dato potete in alternativa potete usare i cookie o anche il sessionStorage ma la logica rimane la stessa.

Le funzioni fadeIn e anche fadeOut aiutano a gestire un po’ meglio la transizione del banner. Ma anche qui ci sono molte soluzioni alternative.


Ok, lo so: la soluzione non è propriamente _compliance_ ma è un buon punto di partenza per analizzare il tutto no?! Il codice completo lo trovate su questo Gist di Github (a proposito: se vi va, date un occhio anche alle altre mie repo e fatemi sapere che ne pensate).

Credits: Photo by Food Photographer | Jennifer Pallian on Unsplash