• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

JavaScript Cookie law - Come adeguarsi

ptm

Utente Master
13 Maggio 2008
2.717
121
83
Miglior risposta
0
#1 Autore del topic
  • ptm

    ptm

Che cosa sono i cookies e la cookie law?

I cookies sono piccoli file di testo che vengono inviati dalle pagine web al fine di riconoscere un dato client. Rendono possibili meccanismi come autenticazioni, gestione degli articoli nel carrello di un negozio Ecommerce, ma vengono spesso utilizzati anche per fini statistici o per integrare altri servizi all'interno del proprio sito web

A partire dal 2 Giugno 2015 è in vigore la legge (n. 229/201) che impone i gestori dei siti internet ad ottenere un consenso esplicito da parte dei visitatori all'utilizzo dei cookie necessari al corretto funzionamento del sito web. L'informativa deve essere costituita da un banner ben visibile all'interno della pagina che deve contenere un link all'informativa completa sull'utilizzo dei cookies.


Chi è soggetto alla cookie law?

Sono soggetti a ricevere consenso esplicito da parte dell'utente tutti i siti che utilizzino i cookies di terze parti o che utilizzano propri cookies per fini statistici; i siti web che utilizzano solamente cookies tecnici non hanno obbligo di adeguamento. (per cookies tecnici si intendono quelli per la gestione di autenticazione ecc.)

In pratica questi sono alcuni servizi di terze parti che inviano cookies:
  • Plugin di Facebook
  • Google AdSense
  • Google Analytics
  • Google Maps
  • Plugin Google Plus
  • Video Youtube, Vimeo ecc.
  • Plugin Twitter
  • Plugin Disqus

Maggiori informazioni sono disponibili in questo video

[video=youtube;Mut-YXSExnw]https://www.youtube.com/watch?v=Mut-YXSExnw[/video]


Come inserire un banner nelle pagine?

Vogliamo inserire un banner che contiene un breve messaggio, un link all'informativa completa e un bottone di accettazione che consente di far scomparire il messaggio anche nelle navigazioni future.
Innanzitutto partiamo dal contenitore che deve mostrare il messaggio. Appena dopo il tag <head> della nostra pagina (in realtà non è obbligatorio metterlo dopo <head>)potremo posizionare un div di questo tipo
HTML:
<div id="alert_cookies">
	<div id="alert_cookiestext">
    	<div id="alert_cookiestl">
            <strong>I cookie ci aiutano a fornirti un servizio migliore</strong><br />
            Navigando in questo sito, accetti il fatto che potremmo memorizzare ed accedere ai cookie sul tuo dispositivo<br />
            <a href="linkinformativacompleta.html">Clicca qui per maggiori informazioni</a>
        </div>
        <button class="accept">Accetto</button>
    </div>
</div>
Al posto di linkinformativacompleta.html bisognerà inserire il link della pagina dove abbiamo pubblicato l'informativa completa (un esempio di informativa completa è visibile qui -> Informativa sull'utilizzo dei cookie | Mr.Webmaster )

Fatto ciò, vogliamo fare in modo che il banner resti fisso in basso della pagina, anche quando si effettua uno scorrimento verticale; quindi potremmo aggiungere al css della pagina una cosa di questo tipo
Codice:
/*Alert cookies*/
div#alert_cookies{
	background-color: #0782c8; /*Colore di sfondo*/
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	float: left;
	position: fixed; /*Quando scorriamo la pagina il banner resta fisso*/
	bottom: 0px;
	display: block;
	margin: 0px auto;
	text-align: center;
	color: #fff;
	padding: 10px;
	z-index: xx; /*Impostarlo in modo che si trovi davanti alla pila*/
	visibility: hidden; /*Inizialmente è nascosto... vediamo dopo il perchè*/
}

div#alert_cookiestext{
	width: xxx; /*scegliere dimensione che si vuole*/
	text-align: left;
	margin-left: auto; /*ho scelto di allineare al centro il riquadro e a sinistra il testo*/
	margin-right: auto;
}

#alert_cookies button.accept{
	background-color: #393D45; /*colore di sfondo del bottone*/
	float: right;
	margin: 10px;
	line-height: 20px;
	padding: 8px;
	font-size: 15px;
	color: #fff;
	cursor: pointer; /*quando passo il cursore sul bottone appare la "manina"*/
}

div#alert_cookiestl{
	float: left;
	width: xxx; /*Modificare con la larghezza che deve occupare il testo*/
}

div#alert_cookiestl a{
	color: #fff;
	text-decoration: underline;
}

div#alert_cookiestl a:hover{
	font-weight: bold;
}
Questo è un esempio di come l'ho realizzato io; ognuno si senta libero di personalizzarlo a piacimento. Trovate nel codice dei commenti per alcune sezioni rilevanti e alcune cose da modificare.

Per la gestione del pulsante di accettazione che provoca la scomparsa del banner useremo jQuery. Fate riferimento al sito ufficiale di jQuery per vedere i metodi possibili per includere la libreria. Io ho scelto di includerla tramite il servizio di Google developer che ospita una serie di librerie utili per lo sviluppo web; quindi metteremo tra i tag <head> e </head> questa stringa
HTML:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Ho scelto di utilizzare anche il plugin jQuery Cookie per una gestione semplice del cookie che ricorda se un utente ha premuto o meno il tasto "Ho capito" (è scaricabile da qui: jQuery Cookie | jQuery Plugin Registry )
Andrà caricata sul proprio hosting è la includeremo come un normale script js sempre tra <head> e </head>
HTML:
<script type="text/javascript" src="directory/jquery.cookie.js"></script>
(modificare directory con la directory in cui viene caricato il plugin

Adesso entra in campo jQuery
HTML:
<script type="text/javascript">
$(document).ready(function(){
	if($.cookie('sito_alertcookie')!='1'){
		$('div#alert_cookies').css({'visibility' : 'visible'});
	}
    $('div#alert_cookies button.accept').click(function(){
        $('div#alert_cookies').slideUp('slow').fadeOut('slow');
		$.cookie('sito_alertcookie','1',{expires: 365, path: '/'});
    });
});
</script>
In breve questo codice controlla se è già presente un cookie con nome sito_alertcookie e valore 1; se non esiste rende visibile il banner. Nella seconda parte invece gestiamo il click sul bottone "Ho capito": una volta che l'utente clicka su quel bottone il banner scompare con un animazione e viene impostato il cookie sito_alertcookie a 1 in modo che non appaia più il banner.

Il risultato finale è una cosa di questo tipo

Contattatemi se avete integrazioni da proporre, correzioni da fare o se volete pubblicare la guida altrove.
 
Ultima modifica:
Mi Piace: 3 utenti

ptm

Utente Master
13 Maggio 2008
2.717
121
83
Miglior risposta
0
#5 Autore del topic
  • ptm

    ptm

Ciao PTM,
ottimo tutorial! che ne dici di integrare il video realizzato dal garante privacy?
[video=youtube;Mut-YXSExnw]https://www.youtube.com/watch?v=Mut-YXSExnw[/video]
Grazie per il suggerimento ;) Ho aggiornato!
 
Shoutbox
  1. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  2. eskereboyz eskereboyz: https://www.sciax2.it/forum/threads/account-habbo.700424/
  3. DarkKB DarkKB: @999k https://www.sciax2.it/forum/threads/new-luxworld.700391/
  4. 999k 999k: https://www.sciax2.it/forum/threads/ihabbon-project.700336/
  5. 999k 999k: Retro innovativi ne abbiamo?
  6. JaxosItalia JaxosItalia: https://www.sciax2.it/forum/threads/jaxos-hotel.700052/
  7. DarkKB DarkKB: https://www.sciax2.it/forum/threads/new-luxworld.700391/
  8. #KiK #KiK: Amiciiiii
  9. Mr. Aizen Mr. Aizen: Buondì
  10. F FulmineVerde: https://www.sciax2.it/forum/threads/aumentare-prestazioni-del-pc.700408/
  11. -Sicily94- -Sicily94-: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  12. TokosRetro TokosRetro: Salve
  13. -Marco -Marco: Ciao bellissimi!
  14. #KiK #KiK: Siiii
  15. Cristoforo58 Cristoforo58: Kaffeee?!1!1!11 @#KiK
  16. #KiK #KiK: We my friendz
  17. F FulmineVerde: Ci sono vinny e Cristoforo che accedono
  18. F FulmineVerde: Non è stato abbandonato
  19. Alert Alert: C'è un mod che ha l'ultimo login a maggio °-°
  20. Alert Alert: Ma il forum è stato abbandonato o è una mia impressione?
  21. F FulmineVerde: https://www.sciax2.it/forum/threads/problema-paginazione-php-pdo.700399/
  22. #Egzon14 #Egzon14: Che brutta fine che sta facendo Sciax2
  23. DarkKB DarkKB: Ciao, Benvenuto in Sciax2 Forum. La Community tratta di tutto, Giochi online, computer,vita quotidiana
  24. Old.Hunter Old.Hunter: oltre a ciò, potreste dirmi di cosa tratti precisamente questa community?
  25. Old.Hunter Old.Hunter: Ciao a tutti, mi sono appena registrato per vendere un mio servizio
Top