• 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
Autore del topic
13 Maggio 2008
2.716
62
Miglior risposta
0
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:
Perfavore, Entra oppure Registrati per vedere i codici!
Al posto di linkinformativacompleta.html bisognerà inserire il link della pagina dove abbiamo pubblicato l'informativa completa (un esempio di informativa completa è visibile qui ->
Perfavore, Entra oppure Registrati per vedere i Link!
)

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:
Perfavore, Entra oppure Registrati per vedere i codici!
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:
Perfavore, Entra oppure Registrati per vedere i codici!
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:
Perfavore, Entra oppure Registrati per vedere i Link!
)
Andrà caricata sul proprio hosting è la includeremo come un normale script js sempre tra <head> e </head>
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
(modificare directory con la directory in cui viene caricato il plugin

Adesso entra in campo jQuery
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
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
b9hk0p.png

Contattatemi se avete integrazioni da proporre, correzioni da fare o se volete pubblicare la guida altrove.
 
Ultima modifica:
  • Like
Reactions: 3 people
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!