Pubblicato il 27/05/15e aggiornato il

Banner orizzontale con tre link per l'accettazione dei cookie.

Come installare una barra orizzontale su Blogger con tre link per informare i lettori che il sito utilizza i cookie.
In attesa che il Garante della Privacy faccia un po' di chiarezza sulle modalità per inserire l'accettazione dei cookie da parte dei lettori, nel mondo del web vengono a intrecciarsi le voci più incontrollate su richieste più o meno rigide a cui devono sottostare gli webmaster. 

In un articolo che molti di voi hanno letto ho mostrato un procedimento di base per visualizzare un banner di accettazione dei cookie e in questo e in due successivi post vi illustrerò altre tre soluzioni che rispondono allo stesso problema. Una delle osservazioni più comuni è quella che si dovrebbero bloccare i cookie prima della accettazione cioè si dovrebbe impedire il caricamento dei cookie fino a quando il navigatore non clicchi su OK. Questo però comporta delle controindicazioni tecniche per quello che riguarda Blogger e regolamentari per quello che riguarda Adsense visto che non si possono bloccare i bot di questo programma di affiliazione di Google.

Una possibile soluzione è quella che vado a proporre dove oltre al classico banner c'è pure un link che illustra come si possano cancellare anche i cookie che eventualmente fossero stati già caricati.

 Si tratta di una evoluzione dell'articolo sul banner in stile dark. Ovviamente per prima cosa dobbiamo aver creato una pagina con l'informativa estesa per i lettori sull'uso dei cookie come illustrato nel post linkato a inizio pagina e in questo caso anche un'altra pagina con le istruzioni per la eliminazione dei cookie già presenti nel browser. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca con Ctrl+F  la riga </body> quindi, subito sopra, si incolla questo codice
<!-- Accettazione Cookie - Inizio -->
<div id='banner_cookie'>
Questo sito utilizza cookie tecnici propri e dei cookie di profilazione di terze parti.<br/>
Se continui nella navigazione accetti il loro uso. <a href='javascript:void(0);' onclick='var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie(&apos;info_cookie&apos;,&apos;1&apos;,expiration,&apos;/&apos;);document.getElementById(&apos;banner_cookie&apos;).style.display=&apos;none&apos;;'><b>OK</b></a> | Per <a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html' target='_blank'>+Info</a> sui cookie <br/> Come <a href='http://www.ideepercomputeredinternet.com/2012/10/cookie-browser-chrome-firefox-ie-eliminare.html' target='_blank'>eliminare i cookie</a> già presenti.
</div>
<!-- Stile del Banner -->
 <style>
#banner_cookie {
display: none;
z-index: 99999;
position:fixed;
left:0px;
right:0px;
top:0px;width:100%;
min-height:50px;
padding:5px;
background: #000; /* Colore di sfondo */
color:#F2F97F/* Colore del testo */
line-height:20px;  /* Interlinea */
font-family:Georgia; /* Famiglia di font */
font-size:12px; /* Dimensione font */
text-align:center;
}
#banner_cookie a:nth-child(2),#banner_cookie a:nth-child(3),#banner_cookie a:nth-child(4), #banner_cookie a:nth-child(5) {
padding:2px;
background:#f72c1d; /* Colore sfondo bottoni */
border-radius:4px;   /* Arrotondamento */
 text-decoration:none;
}
#banner_cookie a {
color: #1FE0C9; /* Colore testo bottoni */
font-weight:bold;  /* Grassetto */
text-decoration: none;
}
#banner_cookie a:hover {
color:#FFF; /* Colore testo bottoni passaggio cursore */
}
#banner_cookie a:nth-child(2):hover,#banner_cookie a:nth-child(3):hover,#banner_cookie a:nth-child(4):hover, #banner_cookie a:nth-child(5):hover {
position: relative;
top:1px; /* Spostamento di 1 pixel al passaggio del mouse */
 left:1px;
}
</style>
<!-- Script dei cookie -->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+&quot;=&quot;+escape(value)+((expires==null)?&quot;&quot;:&quot;; expires=&quot;+expires.toGMTString())+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+((secure==null)?&quot;&quot;:&quot;; secure&quot;)}function getCookie(name){var cname=name+&quot;=&quot;;var dc=document.cookie;if(dc.length&gt;0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(&quot;;&quot;,begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+&quot;=&quot;+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+&quot;; expires=Thu, 01-Jan-70 00:00:01 GMT&quot;}}</script>
<!-- Gestione barra dei cookie -->
 <script type='text/javascript'>
var ckeck_cookie = getCookie(&quot;info_cookie&quot;);
if (ckeck_cookie != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie(&quot;info_cookie&quot;,&quot;1&quot;,expiration);
document.getElementById(&quot;banner_cookie&quot;).style.display=&quot;block&quot;; }
</script>
<!-- Accettazione Cookie - Fine -->

Si salva il modello. Successivamente si apra una qualsiasi pagina del nostro sito con una scheda a Navigazione Anonima per verificare che lo script mostri il banner alla prima apertura. Dopo che il lettore avrà cliccato su OK non si vedrà più per un anno. La Demo seguente va aperta con una scheda a Navigazione Anonima o in Incognito

Le personalizzazioni riguardano il testo da visualizzare colorato di blu, i salti di riga rappresentati dal tag <br/>,  i codici dei colori con accanto il loro significato e la famiglia dei font (Georgia). Ci sono anche gli URL a due pagine di questo sito per la Privacy Policy e per un post su come cancellare i cookie dai diversi browser che dovranno essere modificati secondo le esigenze. Per visualizzare questo banner anche con i dispositivi mobili bisogna andare su Modello > Cellulare e scegliere il Template Personalizza.




25 commenti :

  1. Ciao Ernesto, ti segnalo che da ieri sera il servizio di Windows Live Writer non funziona più.
    Quando si tenta di pubblicare un post su Blogger viene segnalato il seguente errore:
    "Il servizio Blog ha restituito il seguente errore: NotFound: Not Found". Pensavo fosse un problema del mio Windows Live Writer e invece ho provato su diversi computer con versioni diverse econ Blog diversi e l'errore è sempre lo stesso.
    Vedi tu se è il caso di fare un post poichè credo siano in molti a utilizzare Windows Live Writer per pubblicare post su Blogger.
    Grazie!

    RispondiElimina
    Risposte
    1. Me ne sono già accorto visto che per pubblicare i post ho dovuto usare l'editor di Blogger. Non ho capito se dipende da WLW o da Google che non accetta più applicazioni di terze parti. Vedremo
      @#

      Elimina
  2. Grazie Ernesto.
    Come al solito preciso e tempestivo nelle risposte.
    Anch'io non capisco se dipende da WLW o da Google.
    Se Google non accetta più applicazioni di terze parti si è comportata in modo non corretto nei confronti dei Blogger.
    Innanzitutto avrebbe dovuto avvisare, in secondo luogo dovrebbe mettere a disposizione uno strumento di redazione post simile o migliore di WLW.
    Come dici tu, vediamo cosa succede.
    Grazie mille ancora.
    Ciao

    RispondiElimina
  3. Più che altro è un problema legato a WLW-Blogger perchè per esempio pubblicare un post su WordPress con WLW non comporta nessun problema

    RispondiElimina
    Risposte
    1. Ho provato a creare una nuova applicazione per WLW dall'account Google ma non funziona ugualmente. O Google ha tolto l'accesso a WLW oppure c'è un disservizio di Blogger
      @#

      Elimina
  4. Ciao Ernesto,
    ho usato un tuo banner per il consenso relativo ai cookie, pur non avendo pubblicità o plugin social avevo comunque il problema che ho nascosto la navbar causa menù flottante. Quindi grazie per il codice!
    Ho guardato anche questo, e ho notato una cosa nella demo: quando apro la pagina la prima volta compare regolarmente in alto. Tuttavia, se aggiorno la pagina il banner scompare, pur non avendo dato l'ok. E' corretto ai fini della normativa?
    Saluti

    RispondiElimina
    Risposte
    1. Il banner non è in tutto il blog che ho usato come Demo ma solo in quella pagina. È per questo che ha quel comportamento
      @#

      Elimina
    2. Ah capisco, grazie per la precisazione!

      Elimina
  5. Ciao Ernesto, questo sistema sembra molto interessante! Perché si può dire all'utente sin da subito come disattivare i cookie: mi piace molto e infatti l'ho implementato (anche perché dopo che clicchi su qualsiasi link si toglie): vorrei chiederti, c'è un modo per far apparire la barra nera partendo dal basso e non dall'alto della pagina? Grazie :)

    RispondiElimina
    Risposte
    1. Sì. Prova questo codice
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-dark-banner-blogger.html
      in sostanza basta mettere bottom al posto di top
      @#

      Elimina
  6. Al momento per il mio blog ho optato per questo sistema, allungando un po' l'informativa ridotta sulla privacy e mixando per quella estesa cose tratte da questo sito e da altri, ho rinunciato alle funzionalità più controverse, mantenendo i plugin social (per i quali le interpretazioni più soft della normativa dicono che non si è tenuti ad usare un banner). Questa mi sembra al momento la soluzione migliore, chi proprio non ci sta... si cancelli i cookie e non torni più. Eventualmente passerò a quella più rigorosa con il banner che oscura il sito, ma mi pare un po' assurdo sconvolgere il web con una normativa tanto rigorosa. Vedremo.
    Grazie per le informazioni.

    RispondiElimina
  7. Ciao Ernesto!
    Innanzitutto grazie per tutte le tue spiegazioni chiare e semplici.
    Io ho un problema però: se incollo questo codice così com'è la barra mi compare se invece sostituisco l'url che rimanda alla politica privacy del tuo sito con quella creata nel mio blog la barra non compare e non so come fare. Help!

    RispondiElimina
    Risposte
    1. Non è possibile che succeda questo sostituendo solo un URL forse non apri una scheda in incognito o forse ne apri due in questo modo la seconda non funziona più
      @#

      Elimina
    2. Si sicuramente sarà così

      Elimina
  8. ah una piccola considerazione, chi apre la pagina vedrà subito l'informativa breve come dice la legge, ma avrà già i cookie installati (tipo i pluginsocial); nell'informativa estesa ci saranno le informazioni per eliminare tutti o alcuni cookie, anche grazie alla pagina con la guida.
    Forse bisognerebbe soltanto fare in modo che visitando le pagine: "informativa estesa e "come cancellare i cookie" direttamente dal banner, questo non venga disattivato .
    Quindi riepilogando: cliccando "ok accetto" o cliccando un elemento qualsiasi della pagina che non sia le pagine dell'informativa estesa e come cancellare i cookie... l'utente accetta i cookie.

    RispondiElimina
    Risposte
    1. Si potrebbero fare un sacco di cose ma non sempre queste sono facilmente realizzabili dal punto di vista tecnico specialmente da un autodidatta come me? Riguardo alla tua obiezione puoi mettere la Privacy Policy e la guida per cancellare i plugin in una pagina di un altro blog o su Google Sites o Google Drive e farla aprire in un altra finestra con il tag target= " _blank "
      In questo modo il banner non scompare. Questa soluzione ho visto che è stata adottata da Repubblica
      @#

      Elimina
    2. si è una soluzione, credo che inserendo la policy privacy in un pagina esterna accessibile solo dal banner, oltre a quella nel sito (che deve esserci ed essere accessibile da ogni pagina) più la guida, a quel punto il tutto dovrebbe essere perfettamente a norma. Ad esempio, ricaricare semplicemente la pagina equivale a proseguire nella navigazione e quindi accettare i cookie e il banner può sparire. Alcuni siti con il movimento della rotellina del mouse (che spesso la si muove d'istinto al caricamento della pagina) fanno sparire il banner senza che uno ha il tempo di leggerlo. La soluzione di questo post mi sembra la migliore. Grazie per il lavoro fatto... non era assolutamente facile districarsi in questa norma e le sue diverse interpretazioni.

      Elimina
  9. Salve ho un problema, sto provando da qualche giorno a inserire uno dei tre banner da lei proposti modificando l'html del mio template ma non mi appaiono esce sempre la solita navbar di base che predispone blogger senza le mie modifiche come posso fare??? Sono io che sbaglio qualcosa?? Spero di ottenere risposta.

    Grazie mille

    RispondiElimina
    Risposte
    1. Questi codici sono stati utilizzati da un sacco di persone e anche io li ho testati nelle Demo linkate negli articoli quindi o sbagli qualcosa oppure non apri il blog con una scheda in incognito
      @#

      Elimina
    2. Sisi ho provato con l'incognito ma nulla esce sempre uguale. Forse non mi esce perchè nel mio template non c'è una riga con scritto body come nel tuo articolo ma è scritta cosi < body?? l'altra l'ho cercata anche con ctrl+f ma dice che nel mio template non esiste. Grazie mille

      Elimina
    3. Esiste!!!
      Esiste in tutte le pagine.
      Vai in fondo al modello. Dovrebbe essere la penultima. Hai dei problemi a trovare il codice. Leggi questi post e eventualmente guarda anche i video
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
    4. Grazie mille grazie al tuo post l'ho trovato e messo:) sei stato gentilissimo! Ho risolto grazie ancora!

      Elimina
  10. grazie Ernesto ho inserito questo banner e copiato la tua pagina politica dei cookie adattandola alle mie esigenze, ho messo al fondo della pagina privacy il link al tuo blog , ciao e buona giornata

    RispondiElimina
  11. Risposte
    1. Devi inserire un po' di trasparenza. Al posto di
      background: #000;
      ci puoi mettere
      background:rgba(0,0,0,0.7);
      con il 70% di opacità
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.