Pubblicato il 23/01/15e aggiornato il

Come inserire una barra di notifica sull'uso dei cookie nello stile di quella di Google.

Come mostrare una barra orizzontale con avviso ai naviganti sulla politica dei cookie del sito secondo i dettami del Garante della Privacy che non scorra con la pagina.
Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Forse non tutti gli webmaster sono a conoscenza del fatto che a partire dal Giugno 2015 dovranno inserire nei loro siti un annuncio che informi i visitatori sulla possibilità che venga tenuta traccia dei loro comportamenti tenuti sul sito. Questo può essere fatto da un programma di affiliazione pubblicitaria ma anche da Google Analytics o da un semplice bottone di Facebook. Si può trovare una trattazione più completa di questo tema nel post dedicato appunto alle determinazioni del Garante della Privacy.

Lo stesso Google ha dato agli webmaster degli strumenti in grado di inserire a scelta una Schermata iniziale in cui il visitatore può cliccare per accettare la politica dei cookie del sito e continuare la navigazione oppure una Barra di Notifica fissa allo scrollare della pagina con la stessa funzione. 

notifica-cookie

Questa barra si visualizza solo la prima volta che si usa un determinato browser per aprire un sito e successivamente non si aprirà più per un anno a meno che per esempio non si utilizzi la navigazione anonima. In un commento mi è stato fatto notare che Google nei suoi siti e anche nei blog del tipo Blogspot utilizza una barra che non scorre con la pagina ma che è fissa e che sparisce dalla vista.

barra-google

Tale barra su Blogger viene visualizzata al posto della Navbar la prima volta che si apre un blog gratuito che non abbia eliminato la Navbar. Ho quindi pensato di modificare lo script utilizzato per Schermata Iniziale e Barra di Notifica per realizzare una barra simile a quella di Google.  

Si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla 

<!-- Codice per accettazione cookie - Inizio -->
<script type='text/javascript'>
//<![CDATA[
(function(window) {
  if (!!window.cookieChoices) {
    return window.cookieChoices;
  }
  var document = window.document;
  var supportsTextContent = 'textContent' in document.body;
  var cookieChoices = (function() {
    var cookieName = 'displayCookieConsent';
    var cookieConsentId = 'cookieChoiceInfo';
    var dismissLinkId = 'cookieChoiceDismiss';
    function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
      var butterBarStyles = 'position:absolute;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';
      var cookieConsentElement = document.createElement('div');
      cookieConsentElement.id = cookieConsentId;
      cookieConsentElement.style.cssText = butterBarStyles;
      cookieConsentElement.appendChild(_createConsentText(cookieText));
      if (!!linkText && !!linkHref) {
        cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
      }
      cookieConsentElement.appendChild(_createDismissLink(dismissText));
      return cookieConsentElement;
    }
    function _createDialogElement(cookieText, dismissText, linkText, linkHref) {
      var glassStyle = 'position:absolute;width:100%;height:100%;z-index:999;' +
          'top:0;left:0;opacity:0.5;filter:alpha(opacity=50);' +
          'background-color:#ccc;';
      var dialogStyle = 'z-index:1000;position:absolute;left:50%;top:50%';
      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
          'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';
      var cookieConsentElement = document.createElement('div');
      cookieConsentElement.id = cookieConsentId;
      var glassPanel = document.createElement('div');
      glassPanel.style.cssText = glassStyle;
      var content = document.createElement('div');
      content.style.cssText = contentStyle;
      var dialog = document.createElement('div');
      dialog.style.cssText = dialogStyle;
      var dismissLink = _createDismissLink(dismissText);
      dismissLink.style.display = 'block';
      dismissLink.style.textAlign = 'right';
      dismissLink.style.marginTop = '8px';
      content.appendChild(_createConsentText(cookieText));
      if (!!linkText && !!linkHref) {
        content.appendChild(_createInformationLink(linkText, linkHref));
      }
      content.appendChild(dismissLink);
      dialog.appendChild(content);
      cookieConsentElement.appendChild(glassPanel);
      cookieConsentElement.appendChild(dialog);
      return cookieConsentElement;
    }
    function _setElementText(element, text) {
      if (supportsTextContent) {
        element.textContent = text;
      } else {
        element.innerText = text;
      }
    }
    function _createConsentText(cookieText) {
      var consentText = document.createElement('span');
      _setElementText(consentText, cookieText);
      return consentText;
    }
    function _createDismissLink(dismissText) {
      var dismissLink = document.createElement('a');
      _setElementText(dismissLink, dismissText);
      dismissLink.id = dismissLinkId;
      dismissLink.href = '#';
      dismissLink.style.marginLeft = '24px';
      return dismissLink;
    }
    function _createInformationLink(linkText, linkHref) {
      var infoLink = document.createElement('a');
      _setElementText(infoLink, linkText);
      infoLink.href = linkHref;
      infoLink.target = '_blank';
      infoLink.style.marginLeft = '8px';
      return infoLink;
    }
    function _dismissLinkClick() {
      _saveUserPreference();
      _removeCookieConsent();
      return false;
    }
    function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {
      if (_shouldDisplayConsent()) {
        _removeCookieConsent();
        var consentElement = (isDialog) ?
            _createDialogElement(cookieText, dismissText, linkText, linkHref) :
            _createHeaderElement(cookieText, dismissText, linkText, linkHref);
        var fragment = document.createDocumentFragment();
        fragment.appendChild(consentElement);
        document.body.appendChild(fragment.cloneNode(true));
        document.getElementById(dismissLinkId).onclick = _dismissLinkClick;
      }
    }
    function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) {
      _showCookieConsent(cookieText, dismissText, linkText, linkHref, false);
    }
    function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) {
      _showCookieConsent(cookieText, dismissText, linkText, linkHref, true);
    }
    function _removeCookieConsent() {
      var cookieChoiceElement = document.getElementById(cookieConsentId);
      if (cookieChoiceElement != null) {
        cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);
      }
    }
    function _saveUserPreference() {
// Durata del cookie di un anno
      var expiryDate = new Date();
      expiryDate.setFullYear(expiryDate.getFullYear() + 1);
      document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString();
    }
    function _shouldDisplayConsent() {
      // Per mostrare il banner solo in mancanza del cookie
      return !document.cookie.match(new RegExp(cookieName + '=([^;]+)'));
    }
    var exports = {};
    exports.showCookieConsentBar = showCookieConsentBar;
    exports.showCookieConsentDialog = showCookieConsentDialog;
    return exports;
  })();
  window.cookieChoices = cookieChoices;
  return cookieChoices;
})(this);
document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentBar('Questo sito utilizza i cookie per migliorare servizi ed esperienza dei lettori. Se decidi di continuare la navigazione consideriamo che accetti il loro uso.',
        'OK', '+Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Si salva il modello dopo aver personalizzato il messaggio colorato di blu, i bottoni colorati di rosso e inserito il link alla pagina del sito in cui si sono inserite tutte le informazioni per i navigatori.




ULTERIORI PERSONALIZZAZIONI


Se volete rendere il messaggio e la barra più interessante personalizzando i colori

barra-notifica

andate sempre su Modello > Modifica HTML, cercate la riga ]]></b:skin> e, subito sopra, incollate il codice seguente dopo averlo personalizzato a piacere i codici dei colori e la famiglia dei font

/* CSS Accettazione Cookie */
div#cookieChoiceInfo {
background-color: #1fe0c9 !important;
color:#f72c1d;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color: #79ecdf;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
text-align:center;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:Georgia;
font-size:14px;
font-weight:bold;}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#4ce6d4;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;left:1px;
}





55 commenti :

  1. Farlo comparire sotto, come nel tuo blog, è possibile?

    RispondiElimina
    Risposte
    1. Nel mio blog e flottante e non fisso. Comunque per metterlo in basso basta che tu sistituisca tutte le occorrenze di top con bottom. Dovrebbe essere spiegato in modo più analitico anche nel post linkato
      @#

      Elimina
  2. una domanda, lo stesso procedimento vale anche per i blog a visualizzazione dinamica? e l'eventuale pagina di rimando a + info può essere utilizzata quella di google? ovvero quella in cui spiega e rimanda al modo in cui loro utilizzano i cookie parlo ovviamente da blogger che usa banner google adsense
    ciao e grazie

    RispondiElimina
    Risposte
    1. Purtroppo con i blog a Visualizzazione Dinamica non funziona. Speriamo che Google trovi una soluzione prima di Giugno
      @#

      Elimina
  3. Grazie Ernesto, come sempre utilissimi consigli.

    RispondiElimina
  4. Il codice purtroppo sembra interferire con un altro che uso per far comparire un banner in flash sopra l'header. Non ricordo se fosse tuo o meno...Comunque, il banner in questione è inserito in una casella HTML. Dopo aver messo il banner della privacy policy di cui parli in questo post (In posizione "top"), l'altro mi compare solo sotto forma di striscia nera (in FF) o bianca (in Chrome). C'è un modo per risolvere? Magari far diventare la privacy policy flottante come nel tuo caso? e per farlo basta sostituire "top" con "float" o è più complicato di così? Grazie!

    RispondiElimina
    Risposte
    1. Sostituisci tutte le occorrenze di top con bottom. In questo modo la barra si vedrà in basso.
      P. S. float non c'entra nulla :)
      @#

      Elimina
    2. Il problema è che così la barra non si vede più, a meno di andare proprio in fondo alla pagina...e non vorrei trovarmi fuori regola. Quello che avevo in mente era la barra che hai tu...

      Elimina
    3. Allora dillo subito :)
      Oltre alla sostituzione precedente di top con bottom sostituisci anche tutte le occorrenze di absolute con fixed
      @#

      Elimina
    4. Avevo specificato "flottante"...forse mi hai letto di corsa oppure sono stata prolissa ;). Comunque ora funziona, grazie ancora.

      Elimina
  5. CIao Ernesto, grazie per le preziose info.
    Soluzione n. 1 inserita con successo! Grazie! Saluti.

    RispondiElimina
  6. Ciao Ernesto, come ti dicevo nel commento precedente ho inserito con successo la barra. Ora però quando accedo al blog non mi compare più nulla :( come può essere? mi potresti aiutare per favore? Attendo con ansia! Grazie. Saluti!

    RispondiElimina
    Risposte
    1. La barra c'è sempre. Per rendertene conto apri una qualsiasi pagina del tuo blog con una scheda anonima o in incognito. La barra si vede solo con i browser che non hanno i cookie altrimenti i visitatori abituali dovrebbero stare sempre a cliccarci sopra.
      @#

      Elimina
    2. Grazie mille Ernesto, mi stavo già preoccupando! :)
      Sei sempre gentilissimo e dipsonibile! Grazie e buon lavoro!

      Elimina
  7. buonasera Ernesto, ho seguito le direttive per inserire il codice ma non funziona. ho un template fisso con una navbar nella colonna a sinistra che non posso togliere, solo disattivare nel layout. una volta disattivata ed inserito il codice html (nel mio caso tra la riga "header" e la riga "body", non va. probabilmente è un problema di template. (ilpostoideale.blogspot.it)

    RispondiElimina
    Risposte
    1. Lo devi inserire prima della riga< /body > che in genere è la penultima del template e che la chiusura dei tag visibili. L'ultima è < /html >
      @#

      Elimina
    2. Grazie Ernesto, l'ho provato sul blog di prova non in rete e adesso dovrebbe funzionare. Ci sono due codici < /body >, uno di apertura e uno di chiusura. L'ho inserito prima del codice di chiusura e dovrebbe andare. Ora non mi resta che redigere la privacy policy.
      Grazie.

      Elimina
  8. Ciao,
    ho seguito le tue istruzioni ma non mi compare la barra di notifica uso cookie .
    Non so dove ho sbagliato.
    indirizzo del mio blog è : wallpapersbyeleonora.blogspot.com è questo link che devo sostituire al posto del tuo scritto in viola giusto ?
    Se hai qualche idea ... ti ringrazio tanto .
    Buona notte
    eleonora

    RispondiElimina
    Risposte
    1. Nel tuo sito si vede solo la barra di notifica di Blogger al posto della Navbar. Probabilmente non hai incollato il codice nel punto giusto. Ti ricordo che la riga < / body > è quasi in fondo al template. Forse tu ne hai trovata una prima che però era la apertura del tag o forse non hai copiato bene il codice
      @#

      Elimina
    2. Ci sono riuscita !!! :)
      Avevo sbagliato riga .
      Grazie mille !!!
      Buona giornata.

      Elimina
  9. Ciao a tutti
    ho inserito nel mio blog
    http://www.ilgrandebluff.info/
    lo script dei cookies ed il css per le modifiche dei colori e dei caratteri
    Tutto OK
    Si vede il banner correttamente (Chrome, Firefox, Android)
    ma NON da Internet Explorer e da Iphone
    Idee?
    Grazie

    RispondiElimina
    Risposte
    1. Per il mobile devi andare su Modello > Cellulare > Ruota dentata e scegliere Personalizza. Se non risolvi leggi qui
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-desktop-mobile-blogger-barra-notifica-schermata-iniziale.html
      Il banner si vede nelle versioni più recenti di IE, per quelle vecchie prova con questa modifica
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      @#

      Elimina
  10. io non riesco a vederlo da Windows 8 IE 11, tu sì?
    grazie

    RispondiElimina
    Risposte
    1. Il sito è questo?
      http://www.ilgrandebluff.info/
      Hai ragione. Non lo vedo con IE11 Windows 8,1 InPrivate Browsing. Non ne comnosco la ragione :(
      @#

      Elimina
    2. scusate ma succede anche con i vs. banner che non si vedano da IE ?
      Grazie

      Elimina
    3. Hai Blogger?
      Se sì, prova con questo sistema
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      @#

      Elimina
    4. Sììììì!
      ho aggiunto la riga
      ..<.meta content='IE=IE7; IE=IE8; IE=IE9; IE=IE10; IE=edge; chrome=1' http-equiv='X-UA-Compatible'/>..
      Funziona!
      Grazie!!!!

      Elimina
  11. Ciao Ernesto, il banner funziona ma volevo che fosse più visibile. Cosa devo fare per farlo più grande? Almeno il doppio, non vorrei che fosse poco visibile.

    RispondiElimina
    Risposte
    1. Il primo codice non basta ci vuole anche il secondo per personalizzare il banner. Per la esigenza che hai manifestato sotto la riga
      div#cookieChoiceInfo {
      incolla questa nuova riga
      min-height:80px;
      dove 80pixel li puoi diminuire o aumentare a piacere. Puoi anche aumentare le dimensioni dei caratteri agendo su
      font-size:14px;
      @#

      Elimina
    2. Grazie, provo anche a cambiare i colori e vediamo se funziona.

      Elimina
  12. Grazie mille ora il banner è più visibile, meglio non correre rischi.

    RispondiElimina
  13. Mi è sorto un dubbio...I programmi di affiliazione presenti in blog e siti internet, adsense ad esempio, inviano cookie a dispetto dell'accettazione da parte del visitatore della pagina. In questo modo ci troveremo di fronte ad una palese violazione della privacy. Il banner a questo punto non blocca preventivamente i cookie. Sbaglio?

    RispondiElimina
  14. Il tutto si può inserire su un gadget html invece di modificare il template?
    Dovrebbe funzionare lo stesso.

    RispondiElimina
    Risposte
    1. Non ho testato ma dovrebbe funzionare ugualmente
      @#

      Elimina
    2. Grazie. Sì, funziona ma appesantisce il tempo di ritorno all'home page.

      Elimina
  15. Ciao scusa una info, io di BODY ho solo questa stringa e poi basta e quanto inserisco il codice prima non mi funziona:
    <body ecc ecc
    in cosa sbaglio? grazie

    RispondiElimina
    Risposte
    1. Il tuo sito è questo?
      http://viaggiculinari.blogspot.it/
      Il tag < /body > è nella penultima riga del tuo modello. Se metti il codice sopra a < body .... ovviamente non funziona
      @#

      Elimina
  16. Ciao, nella penultima riga ho questo: ...

    RispondiElimina
  17. dovunque leggo che dovrebbe esserci questa stringa, ma nel mio html non c'e'...non so come fare

    RispondiElimina
    Risposte
    1. Ho visto la riga andando sul tuo codice sorgente quindi c'è. Leggi questo post su come cercare il codice nel modello
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
  18. Ciao Ernesto, hoi usato la funzione crtrl f e ho cercato, ma di body mi da solo quello all'inizio. ti sembrerà strano ma è cosi'...

    RispondiElimina
    Risposte
    1. Impossibile il tag < /body > esiste in tutte le pagine web e non solo in Blogger. Se non ci fosse non si vedrebbe neppure il tuo sito
      @#

      Elimina
  19. se posso ti invio lo screenshot e ti faccio vedere che questa stringa non c'e'...

    RispondiElimina
  20. trovatoooooooooooooo :) era nella riga 1874 e ctrl f non me la trovava..grazie, gentilissimo :)

    RispondiElimina
  21. Ciao, avevo inserito questo tuo codice e personalizzato il messaggio...ma da quando Google ha inserito il proprio mi ritrovo con una barra che ha i miei colori, ma riporta il testo di Google e non il mio. Praticamente, Google ha sovrapposto la sua privacy policy alla mia...Come posso fare a far ricomparire il mio messaggio? Non vorrei dover togliere tutto il codice e sostituirlo con un altro...Grazie!

    RispondiElimina
    Risposte
    1. Devi togliere tutto il codice però dopo averlo copiato in un file di testo in modo da recuperare i CSS. Poi segui questo post
      http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
      che serve per la personalizzazione del banner di Google. Al posto del CSS che ho proposto ci puoi mettere quello che hai adesso sul sito
      @#

      Elimina
    2. Proprio quello che temevo...grazie, ora provo.

      Elimina
  22. Ciao Ernesto. Volevo chiederti questo: per spostare in basso nel blog ed eventualmente personalizzare la Barra di Notifica per dare l'assenso ai cookie quale tuo post debbo seguire? In particolare, visto che la barra è stata inserita da google in alto (quella che recita: “Questo sito si serve dei cookie di Google per l'erogazione dei servizi, la personalizzazione degli annunci e l'analisi del traffico. Le informazioni sul tuo utilizzo del sito sono condivise con Google. Se prosegui la navigazione acconsenti all'utilizzo dei cookie”), come faccio a sostituire quella che c’è (e che non so come togliere) con un’eventuale personalizzazione? Ti ringrazio molto. Buona giornata.

    RispondiElimina
    Risposte
    1. Per i blog su Blogger vanno seguite queste indicazioni generiche
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
  23. volevo sapere se per quanto riguarda i cookye sono a posto.
    httt://daimokuartimarziali.blogspot.com - daimoku3@gmail.com
    Grazie
    Roberto brollo
    (prima avevo sbagliato indirizzo mail)

    RispondiElimina
    Risposte
    1. Non sono un avvocato ma vedo che hai un blog su Blogger quindi anche la barra di Google automatica credo sia sufficiente
      @#

      Elimina
  24. ciao carissimo. come mai nel mio blog non appare?? ho fatto tutto come hai detto ma nulla :((

    RispondiElimina
    Risposte
    1. Segui il post linkato a inizio post che è più recente
      @#

      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.