Ecco come inserire nel vostro sito la cookies policy, un tutorial passo passo per aiutare i manutentori dei siti web che necessitano un intervento rapido e immediato.
Esistono diversi metodi per implementare la cookies policy sul vostro sito. Qui di seguito potrete trovarne 2 a seconda di come preferite che il banner sia visualizzato.
1 - scarica il file da qui https://www.cookiechoices.org/cookiechoices.zip
2 - decomprimilo e inseriscilo nella root del tuo sito (la cartella principale)
3 - copia il codice dello script (in base al layout del banner che preferisci o occupando la schermata iniziale oppure utilizzando la barra delle notifiche).
4 - incolla il codice nel <body> delle pagine in cui vuoi che appaia. Se vuoi che appaia in ciascuna delle pagine del tuo sito, sarà sufficiente inserirlo nel template.
5 - modifica il CSS per adattarlo al tuo layout.
LAYOUT 1 - Schermata iniziale
Se desideri una soluzione che utilizzi una schermata che gli utenti incontreranno necessariamente, la schermata iniziale potrebbe essere l'opzione giusta per te. Il codice della schermata iniziale può essere adattato al tuo sito, per presentare ad ogni visitatore il testo personalizzato da te scelto.
Il codice imposterà un cookie sul tuo dominio per gli utenti che visualizzano la schermata iniziale e fanno clic per chiuderla (con le parole scelte da te, come "chiudi" o "accetto"). La durata predefinita del cookie nel codice di esempio è di 12 mesi, ma può essere modificata come più si desidera (vedi le istruzioni di cui sopra).
Per poter implementare questa soluzione JavaScript devi copiare e incollare il codice nella sezione <body> della tua pagina. Dovrai inoltre scaricare il file cookiechoices.js , decomprimerlo e caricarlo nella directory del server.
<!-- You should make sure that the file cookiechoices.js is availableand accessible from the root directory of your site. -->
<script src="/cookiechoices.js"></script><script> document.addEventListener('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentDialog('Your message for visitors here.', 'close message', 'learn more', 'http://example.com'); });</script>
LAYOUT 2 - Barra delle notifiche
Questo codice può essere utilizzato per sovrapporre una barra delle notifiche in qualsiasi pagina a cui viene aggiunto il codice. Puoi scegliere il testo che verrà presentato all'utente. L'utente chiude la barra delle notifiche facendo clic su uno dei suoi link.
Il codice imposterà un cookie sul tuo dominio per gli utenti che visualizzano la barra delle notifiche e fanno clic per chiuderla (con le parole scelte da te, come "chiudi" o "accetto"). La durata del cookie nel codice è di 12 mesi, ma può essere modificata in base alle proprie esigenze (vedi le istruzioni di cui sopra).
Dovrai stabilire il design della pagina o delle pagine del tuo sito in cui desideri che venga visualizza la barra delle notifiche. Dovrai inoltre definire il testo appropriato per il tuo sito.
Per poter implementare questa soluzione JavaScript devi copiare e incollare il codice nella sezione <body> della tua pagina. Dovrai inoltre scaricare il file cookiechoices.js , decomprimerlo e caricarlo nella directory del server.
<!-- You should make sure that the file cookiechoices.js is availableand accessible from the root directory of your site. -->
<script src="/cookiechoices.js"></script><script> document.addEventListener('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentBar('Your message for visitors here', 'close message', 'learn more', 'http://example.com'); });</script>
ESEMPIO di CSS:
#cookieChoiceInfo {
box-shadow: 10px 21px 9px 28px #888888;
}
#cookieChoiceInfo > span {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 20px;
color: white;
}
#cookieChoiceInfo > a {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
color: white;
}
#cookieChoiceDismiss {
background: #1bd136;
background-image: -webkit-linear-gradient(top, #1bd136, #028716);
background-image: -moz-linear-gradient(top, #1bd136, #028716);
background-image: -ms-linear-gradient(top, #1bd136, #028716);
background-image: -o-linear-gradient(top, #1bd136, #028716);
background-image: linear-gradient(to bottom, #1bd136, #028716);
-webkit-border-radius: 20;
-moz-border-radius: 20;
border-radius: 20px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
padding: 3px 8px;
text-decoration: none;
}
#cookieChoiceDismiss:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
