20 dicembre 2014

Inserire banner per l'informativa cookies su Blogger

Recentemente il Garante della privacy ha indicato le modalità per informare gli utenti sull'uso dei cookies nei siti web.
C'è una distinzione fondamentale tra i cookies con finalità di marketing e i cookies tecnici (raccolta dati per statistiche, cookies di sessione per la gestione di un'area riservata etc.). Nel primo caso è necessario il consenso dell'utente prima di memorizzare i cookies nel terminale (PC, tablet, smartphone etc.). Nel caso, invece, di cookies tecnici è sufficiente un'adeguata informativa.
Per informazioni sull'argomento è possibile consultare le FAQ in materia di cookies nel sito del Garante della privacy.

Prendendo come riferimento lo script messo a disposizione da www.cookiechoices.org abbiamo apportato alcune modifiche per ottenere il banner informativo che potete vedere in questa pagina.

I passi da seguire per inserire questa barra in Blogger sono:
1. Scaricare il file Javascript cookiechoices-mod.js a cui sono state apportate, rispetto all'originale, le seguenti modifiche:
  • rimosse alcune proprietà di stile per permetterne una gestione più agevole tramite CSS
    var butterBarStyles = 'position:fixed; width:100%; margin:0; left:0; z-index:10001;';
  • aggiunto id al pulsante che rimanda alla pagina dell'informativa sempre per facilitarne la personalizzazione tramite CSS
    infoLink.id = 'cookieMore-info'; 
  • sostituito il codice per la durata del cookie in 60 giorni (valore personalizzabile)
    var d = new Date();
    var expiryDate = new Date(d.getTime() + 86400000 * 60); //modificare il valore 60 per cambiare il numero dei giorni di durata del cookie
    document.cookie = cookieName + '=y; expires=' + expiryDate;
Il file deve essere caricato su un server esterno, per esempio AlterVista o Google Sites.

2. Aggiungere un gadget HTML/JavaScript nella parte bassa della scheda Layout ed inserire questo codice:
 

<script src="http://example.com/cookiechoices-mod.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
    cookieChoices.showCookieConsentBar('Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso.', 'OK', 'Più info', 'http://example.com/p/privacy.html');
});
</script>
Sono da personalizzare:
  • gli indirizzi del file .js e della pagina privacy che, se non già presente, deve essere creata con gli appositi strumenti di Blogger; 
  • il messaggio da visualizzare nella barra (se contiene un apostrofo usare il backslash per evitare errori Javascript);
  • i testi dei bottoni per l'accettazione e per il link alla pagina informativa.
In alternativa, per garantire una maggiore compatibilità con i browser più datati di casa Microsoft è possibile utilizzare la libreria jQuery e richiamare la funzione al caricamento del documento:

<script src="http://example.com/cookiechoices-mod.js"></script>
<script>
jQuery(function(){
    cookieChoices.showCookieConsentBar('Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso.', 'Ok', 'Più info', 'http://www.example.com/p/privacy.html');
  });
</script>

3. Sempre da Layout in Designer modelli nella sezione Avanzato -> Aggiungi CSS inserire il CSS che può essere personalizzato a piacere:
/* div barra */
#cookieChoiceInfo{
    color:white;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    line-height:28px;
    background-color: #585858; /* per IE8 */
    background-color: rgba(88, 88, 88, 0.8);
    *background-color: #585858; /* per IE7 */
    top:0; /* sostituire con bottom:0; per posizionare il banner in basso */   
    text-align:center;
    padding:20px 0 20px 0;
}
/* links */
#cookieChoiceInfo a{
    text-decoration:none;
    padding:8px;
    background-color:white;
    font-size:12px;
    border-radius:6px;
    color:#585858;
}
/* link pagina informativa */
a#cookieMore-info{
    margin-left:12px;
}
/* link accettazione */
a#cookieChoiceDismiss{
    margin-left:24px;
    padding:8px 11px;
}


Post correlati:


18 commenti:

  1. Grazie mille. Ho appena seguito tutti gli step su di un blog di prova e funziona a meraviglia. Condivido il più possibile. :-)

    RispondiElimina
  2. Scusatemi, ma per attivare la barra da mobile occorre una procedura differente?

    RispondiElimina
    Risposte
    1. A me da mobile questo sito mi fa vedere la barra. Almeno funziona con Chrome utilizzato su piattaforma iOS...

      Elimina
    2. Ciao Ester :)

      Noi abbiamo scelto, come modello per cellulari, "Personalizza".

      Inoltre, andando in Modello - Modifica HTML - Vai al widget - HTML1 (nel nostro caso), abbiamo aggiunto l'attributo mobile='yes' alla riga relativa, come è spiegato in questa quida: code.blogger.com/2011/11/introducing-custom-mobile-templates.html


      Grazie a te :)

      Elimina
    3. Ciao Obsidian e grazie per il riscontro :)

      Precisiamo però che l'attuale banner del blog è quello illustrato in questo articolo: quellidelcucuzzolo.blogspot.it/2015/05/banner-cookie-blogger-google-analytics.html

      Elimina
  3. ma wow che post splendido!
    l'unica cosa che non capisco è come caricare il file JS su altervista o google sites.
    non devo inserirlo su direttamente su blogger?
    attendo tue news che sono giusto un po nel panico :D
    xoxo

    RispondiElimina
    Risposte
    1. Dovresti copiare il testo che si apre cliccando su cookiechoices-mod.js su un file .txt nuovo, che poi rinominerai, appunto, cookiechoices-mod.js. Poi dovresti caricare questo file .js su uno spazio web tuo, come drive o sites.

      Elimina
    2. Ciao Syrious, grazie a te per il commento :)

      Puoi seguire le indicazioni di Ester oppure puoi anche semplicemente salvare il file direttamente dal browser utilizzando il tasto destro.

      Un altro metodo è quello di copiare tutto il contenuto del file ed incollarlo nel gadget HTML/JavaScript al posto dlla riga di codice che segue questo commento < ! -- cookiechoices.org -- > all'interno dei tag script.

      Ti consigliamo però di verificare bene la normativa: se hai banner pubblicitari temiamo che questa non sia una soluzione sufficiente.

      Elimina
  4. Grazie mille per queste info, utilissime! Ho notato però che Blogger ha già inserito un banner che porta all'informativa di Google, Come posso disattivarlo per inserire questa barra e un'informativa personalizzata?
    Grazie ancora

    RispondiElimina
    Risposte
    1. Ciao Sonia, grazie a te per il commento.

      Puoi disattivare la Navbar da Layout.
      Però puoi anche lasciarla e posizionare questo banner in basso, modificando il CSS da top:0; a bottom:0; come indicato nel relativo commento.

      Elimina
  5. Ciao. Ho un blog di cucina e dovrei inserire l'informativa sul mio blog.
    Come posso fare? Ovviamente sono su piattaforma Blogger

    RispondiElimina
    Risposte
    1. Ciao, se ti riferisci al banner dell'informativa breve, spiega cosa non ti è chiaro di quanto abbiamo scritto in questo articolo (commenti compresi).

      Abbiamo anche letto alcuni articoli che come soluzione indicavano di attivare la Navbar di default di Blogger: compare in automatico un banner con l'informativa breve, più un link a "In che modo Google utilizza i cookie".
      Nel tuo blog hai mantenuto la Navbar ma non siamo sicuri che ciò sia sufficiente per adeguarti alla normativa.

      Elimina
  6. ciao!! io non ho capito come faccio a creare la barra che ti appare in alto.. ho un blog con blospot/blogger.. mi puoi aiutare?

    RispondiElimina
    Risposte
    1. Ciao, l'attuale banner che vedi nel blog è quello illustrato in questo articolo: quellidelcucuzzolo.blogspot.it/2015/05/banner-cookie-blogger-google-analytics.html

      Se invece ti riferisci a quello descritto in questo articolo (commenti compresi), spiega meglio cosa non ti è chiaro.

      Elimina
  7. mi rendo conto di essere impedita.... nel mio blog ho attivo il navbar di blogger ma no riesco ad aggiungere la barra per i cookie comela vostra!!!!!!!! non riesco a inserire il codice ..forse sbaglio io eh!!!!
    mi potete spiegare meglio?
    ilmio blog è veramenteveronica.blogspot.it
    grazie veronica

    RispondiElimina
    Risposte
    1. Ciao Veronica,
      abbiamo guardato il tuo blog, ma non hai seguito la procedura illustrata in questo articolo.

      Se vuoi inserire lo script scaricato da www.cookiechoices.org devi:

      1. toglierlo da dove è ora ed inserirlo in un gadget HTML/JavaScript;
      2. caricare il file cookiechoices.js su un server esterno, per esempio AlterVista o Google Sites.
      3. cambiare il percorso nello script in modo che punti al file caricato.

      Un altro metodo è quello di copiare tutto il contenuto del file ccookiechoices.js che scarichi dal sito originale ed incollarlo nel gadget HTML/JavaScript al posto della riga di codice che segue questo commento < ! -- cookiechoices.org -- > all'interno dei tag script.

      Come scritto anche nei precedenti commenti, l'attuale banner di questo blog non è più quello descritto in questo articolo.

      Elimina
  8. Sei un grande, mi permetto di copiarti la pagina della privacy, ma ti inserisco in fondo come guida ufficiale da seguire per chi ha Blogger. Davvero un ottimo lavoro, bravo.

    RispondiElimina
    Risposte
    1. Ciao Francesco, grazie a te :)

      Ti facciamo notare però che l'attuale banner del blog non è più "cookiechoices" ma quello descritto in questo articolo: quellidelcucuzzolo.blogspot.it/2015/05/banner-cookie-blogger-google-analytics.html

      Elimina