Pubblicato il 05/09/14e aggiornato il

Personalizzare la Barra di Notifica per dare l'assenso ai cookie.

Come personalizzare la barra di notifica per avere il consenso dei lettori all'utilizzo dei cookie modiifcando il colore dello sfondo, quello del testo e inserendo dei bottoni con effetto in 3 dimensioni.
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 -

Con questo post ho intenzione di chiudere almeno per il momento l'argomento dell'accettazione dei cookie di profilazione da parte dei lettori. Facciamo un breve resoconto delle puntate precedenti. Il Garante della Privacy ha fatto suo un regolamento della Comunità Europea che impone agli webmaster di avvertire i lettori che potranno essere registrate da un cookie di profilazione molte loro azioni compiute nello stesso sito a fini di migliorare la pertinenza degli annunci pubblicitari. 

I cookie di profilazione non vengono usati solo dai circuiti pubblicitari ma anche per esempio da Facebook per avere un profilo più analitico possibile dei suoi utenti sempre per mostrare pubblicità più mirata. In sostanza i proprietari del sito hanno installati banner pubblicitari, bottoni di Facebook, Google Analytics e altri strumenti che permettono di monitorare i lettori. Il Garante ritiene che i lettori debbano dare il loro assenso prima di iniziare la navigazione di un sito web. Per fortuna tale assenso può valere per un lasso di tempo molto lungo pari a un anno. 

Il consenso deve avvenire tramite click su un bottone che deve essere contestuale anche a un link in cui il lettore possa avere ulteriori informazioni. Google che è una delle Società che usa maggiormente tali cookie ha messo a disposizione dei proprietari dei siti uno script con licenza MIT per mostrare a piacere una Schermata Iniziale oppure una Barra di Notifica.

DIFFERENZE TRA SCHERMATA INIZIALE E BARRA DI NOTIFICHE

 

schermata-iniziale-barra-notifiche

La schermata iniziale è un avviso semitrasparente che si visualizza sulla pagina con una specie di Effetto Lightbox. Prima di poter procedere nella navigazione il lettore deve per forza cliccare sul link per dare il consenso all'utilizzo dei cookie. Invece la Barra di Notifica è un banner che si posiziona nella parte alta della pagina e che consente al lettore di compiere tutte le azioni che crede opportune. Tale banner è fluttuante nel senso che rimarrà posizionato al top della pagina fino a quando il lettore non cliccherà sul link apposito.






COME IMPLEMENTARE LA BARRA DI NOTIFICA


Nel seguito di questo post mi soffermerò esclusivamente sulla Barra di Notifica che ritengo meno invasiva. Alla fine dell'articolo sarà mia cura illustrare come passare alla Schermata Iniziale per quelli che lo desiderano solo con una piccola modifica del codice.

BARRA DI NOTIFICA CON HOSTING ESTERNO


Per  installare la Barra di Notifica con questo sistema occorre scaricare il file  CookieChoices.ZIP e scompattarlo con 7-ZIP o tool analogo. Si dovrà caricare su un nostro hosting oppure usare Google Drive. Gli utenti di Blogger dovranno andare su Modello > Modifica HTML, cercare la riga </body> e, subito sopra, incollare questo codice

<!-- Codice di accettazione dei cookie - Inizio  -->
<script src='URL del File …/cookiechoices.js'/>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    cookieChoices.showCookieConsentBar('Messaggio per i visitatori.',
        'OK', '+Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
</script>
<!-- Codice di accettazione dei cookie - Fine  -->

Dove oltre all'URL del file cookiechoices.js potranno essere personalizzati il messaggio per i visitatori, il testo dei due Link e dovrà anche essere incollato l'indirizzo di una pagina con più informazioni sull'utilizzo dei cookie. Potete prendere come modello quella creata da me

http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html

Gli utenti Wordpress dovranno incollare lo stesso codice sempre sopra alla stessa riga ma andando su Aspetto > Editor > Piè di Pagina. Credo però che già esitano dei plugin che chi ha un blog su Wordpress può utilizzare senza dovere penare più di tanto.

BARRA DI NOTIFICA DIRETTAMENTE NEL MODELLO


Gli utenti di Blogger che abbiano difficoltà a caricare su uno spazio esterno un javascript possono usare un codice alternativo che ho creato a partire da quello di Google. Si va su Modello > Modifica HTML e si cerca sempre la riga </body>. Il codice da incollare subito sopra è 

<!-- 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:fixed;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:fixed;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:fixed;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. Per testare il funzionamento è opportuno aprire una finestra in Incognito visto che dopo la prima apertura la barra non sarà più visibile in quelle successive. Il testo del messaggio, i link e l'URL della pagina con le informazioni più analitiche sui cookie possono essere modificati a piacere. Ricordo ai meno esperti di non inserire apostrofi e caratteri strani nel messaggio.

 

INSTALLARE LA SCHERMATA INIZIALE


Se si opta per la schermata iniziale si dovrà semplicemente modificare una stringa nel codice utilizzato. Al posto di showCookieConsentBar dovrà essere messo showCookieConsentDialog.
 

PERSONALIZZARE LA BARRA DI NOTIFICA

 

personalizzazione-barra-notifica-cookie

Per personalizzare la barra di notifica e mostrarla con i colori del nostro sito e con dei pulsanti in 3D per i due link dobbiamo inserire dei fogli di stile. Su Blogger si può andare su Modello > Personalizza > Avanzato > CSS e incollare il codice nell'apposito campo quindi cliccare su Applica al blog. Alternativamente si opera su Modello > Modifica HTML e si cerca la riga ]]></b:skin>. Il codice seguente può anche essere incollato sopra a tale riga
 
/* 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;
}

Si salva il modello. Si potranno personalizzare i codici dei colori di sfondo e bottoni per adattarli a quelli del blog. Nella versione mobile una tale barra di notifica viene visualizzata in questo modo 

accettazione-cookie-barra-notifica

Prima che operiate le modifiche al codice è bene fissare alcuni punti
  1. I bottoni hanno un gradiente che li fa essere più chiari nella parte superiore. Partendo da un colore base si possono scegliere dei toni di colore più chiari e dei toni di colore più scuri attraverso il tool Oto255 da sostituire a quelli usati da me.
  2. L'effetto 3D dei bottoni avviene tramite uno spostamento di un pixel in basso e a destra. Oltre a questo c'è una diminuzione della ombreggiatura quando il cursore passa sopra al bottonee un piccolo cambio doi colore.
  3. Si potrebbe anche inserire il parametro dell'altezza della barra ma questo porterebbe problemi con le risoluzioni più basse dello schermo visto che il background si visualizzerebbe solo all'inizio della barra. Per agire sulla altezza della barra è meglio operare sulla dimensione dei caratteri. Si può cancellare la riga  font-weight:bold; che serve per il grassetto. Opzionalmente si può aggiungere font-style:italic; per il corsivo.
Su questo argomento ho pubblicato anche altri articoli:

  1.  Il Garante della Privacy e l'utilizzo dei Cookie -
  2. Inserire un banner per l'utilizzo dei cookie -
  3. Inserire barra di notifica e schermata iniziale direttamente nel modello
  4. Personalizzare la barra di notifica con colori di sfondo e bottoni in 3D
  5. Come inserire una barra di notifica sull'uso dei cookie nello stile di Google
  6. Inserire e personalizzare una barra di notifica sui cookie per Wordpress 
  7. Come mettersi in regola con le disposizioni del Garante della Privacy  
  8. Come personalizzare la Schermata Iniziale 
  9. Banner per l'accettazione dei cookie in stile dark con tre link




90 commenti :

  1. ciao ernesto finalmente sono riuscita ma ho faticato perchè faccio fatica a trovare le tag tramite il comando ctrl+f perccè anche digitando invio non mi porta da nessuna parte...esiste un altro modo per cercare i vari codici nel blog? grazie

    RispondiElimina
    Risposte
    1. Trovare la fine di /b:skin è semplicissimo. Prima di andare su Ctrl-F devi andare intorno alla 14esima riga e cliccare sulla freccetta nera posta a sinistra per visualizzare tutto il codice
      @#

      Elimina
  2. Da cellulare non si vede. www.ilblogdellorco.info

    RispondiElimina
    Risposte
    1. Cosa non si vede? La barra o la personalizzazione? Ricordati di testare con una scheda In modalità incognita. I test che ho fatto sono OK
      @#

      Elimina
    2. Confermo anche io la non visualizzazione della barra di navigazione nella versione mobile. Ho provato la modalità incognita, nisba.

      Elimina
    3. Prova a andare in Modello > Cellulare e scegliere Personalizza
      @#

      Elimina
  3. Ciao Ernesto , e se invece la barra la volessimo visualizzare nella parte inferiore della pagina dove dovremmo inserire il codice?

    RispondiElimina
    Risposte
    1. Non ho la possibilità di testare ma sostituisci tutte le occorrenze di top:0; con bottom:0; e poi prova a vedere che succede. i prego poi di farmelo sapere in un commento anche a beneficio degli altri lettori che volessero adottare questa opzione.
      P.S. È chiaro che in questo caso devi utilizzare il secondo codice quello che non ha bisogno di caricare javascript
      @#

      Elimina
    2. perfetto facendo le sostituzioni che mi hai indicato visualizzo la barra in basso, proprio come volevo, grazie mille

      Elimina
  4. Ciao, ho provato ad inserire il js sul mio blog con template personalizzato e non funziona completamente nel senso che se lo lascio così com'è con il parametro per la barra delle notifiche non funziona mentre se imposto il js per visualizzare il messaggio nella schermata iniziale funge

    RispondiElimina
    Risposte
    1. Forse nel tuo modello c'è qualcosa che impedisce di vedere la barra a inizio pagina. Prova a metterla a fondo pagina sostituendo le due occorrenze di top:0; con bottom;0;
      Così, come tentativo
      @#

      Elimina
    2. Come non detto, mettendola in basso funziona perfettamente. Grazie per la rapida risposta e per il lavoro che fai :)

      Elimina
  5. Ciao Ernesto,
    Nel mio sito sono presenti cookie di Analytics e cookie di youtube, googlemaps e facebook.
    In questo caso gli ultimi tre cookie come sono considerati? Cookie di terze parti o cookie di profilazione? Come mi devo comportare a riguardo? Devo fare la segnalazione di notifica al Garante della privacy o mi basta inserire nel sito il banner con la policy dove spiego solamente i cookie che utilizzo?
    Grazie mille

    RispondiElimina
    Risposte
    1. Non so dove hai letto questa segnalazione di notifica al Garante della Privacy. Nel dispositivo dell'anno scorso che poi leggere qui non l'ho trovata
      http://www.ideepercomputeredinternet.com/2014/06/cookie-banner-garante-privacy.html
      Comunque non sono per nulla esperto di regolamenti e non ti so dire. Da quello che ho capito però basta avere il sito che aggiunge dei cookie al browser con cui si apre per essere obbligati a installare Barra di notifica o Schermata iniziale
      @#

      Elimina
  6. Salve Ernesto,
    volevo chiedere riguardo la questione di implementare nei propri siti l'avviso di accettazione dei cookie, c'è una data limite nella quale tutti devono essere in regola? Grazie!

    RispondiElimina
    Risposte
    1. Credo sia il 4 Giugno 2015. Leggi qui per saperne un po' di più
      http://www.ideepercomputeredinternet.com/2014/06/cookie-banner-garante-privacy.html
      @#

      Elimina
  7. Salve Ernesto,
    Ho seguito la guida, ma quando visualizzo il mio blog: www.spaziorosa.net da un dispositivo mobile il banner non appare. Mi potrebbe aiutare?

    RispondiElimina
    Risposte
    1. Apri il blog da mobile con un browser che supporta la navigazione anonima come Chrome. Il banner c'è ma si vede solo con un browser senza cookie
      @#

      Elimina
    2. Grazie per la risposta, ho provato a caricare il sito con un note 4 utilizzando Chrome in modalità incognito, purtroppo non si vede

      Elimina
    3. Un post del tuo sito è questo?
      http://www.spaziorosa.net/2015/02/plumcake-alla-banana-e-ricotta.html
      Se sì allora non si vede neppure da desktop. Probabilmente c'è qualche errore di installazione
      @#

      Elimina
    4. Non mi stupirei che tu avessi messo un apostrofo nella frase da mostrare ai lettori che ha fatto saltare tutto lo script
      @#

      Elimina
    5. Si il blog è quello, no ho cancellato io il codice per vedere se il banner di default funzionava, ma nemmeno quello si vede da mobile anche aprendo il sito con scheda in incognito

      Elimina
    6. Ho controllato, nessuna apostrofo...anzi ho messo +info a posto di più info. Se provi a caricare il mio blog adesso dovresti vedere il banner in modalità schermata iniziale. La cosa che non capisco è perché in versione mobile non si vede

      Elimina
  8. Niente da fare. Nemmeno con la barra visualizzo il messaggio da smartphone...a questo punto non so cosa fare. Grazie per la pazienza

    RispondiElimina
  9. Buonasera Ernesto ho copiato il codice modificando l'html direttamente da blogger ma purtroppo non mi appare il banner, mi potrebbe dare una mano gentilmente? Il blog è www.figlimoderni.it Grazie fin d'ora. Giorgia

    RispondiElimina
    Risposte
    1. Prova con questo
      http://www.ideepercomputeredinternet.com/2015/05/popup-cookie-law-garante-privacy-blogger-wordpress.html
      @#

      Elimina
    2. Nulla, Ernesto non mi esce nemmeno così! Io l'ho incollato prima di questo pezzo di codice body expr:class='"loading" + data:blog.mobileClass' può essere che dovevo inserirlo in qualche altro punto? In entrambi i casi l'ho inserito prima di questa stringa e non me lo fa vedere!

      Elimina
    3. Perfetto! Grazie mille, ce l'ho fatta! :)
      Grazie ancor per l'aiuto!
      Giorgia

      Elimina
  10. Ciao Ernesto neppure io riesco a visualizzare la barra di notifica su versione mobile..lascio il link del blog tripdeimangiatori.blogspot.it non so cosa ho sbagliato, anche con le finestre in incognito non cambia nulla.
    Help please.... :-(

    RispondiElimina
    Risposte
    1. Purtroppo non so che consigli darti. Non ho idea della ragione. Forse hai un modello Dynamic View. Prova con la Schermata Iniziale
      http://www.ideepercomputeredinternet.com/2015/05/popup-cookie-law-garante-privacy-blogger-wordpress.html
      @#

      Elimina
    2. Grazie della risposta, ho trovato l'errore...Nel modello per cellulare non avevo attivato la funzione personalizza....adesso funziona, tutto OK! Complimenti per il blog sono ottime idee utilissime!

      Elimina
  11. Ciao Ernesto grazie dei preziosi consigli ho seguito passo passo le indicazioni soltato che adesso quando vado a visualizzare il mio blog http://reginaeli.blogspot.it/ oltre ala barra compaiono sotto un sacco di scritte. Puoi aiutarmi a capire dove ho sbagliato grazie

    RispondiElimina
    Risposte
    1. Prova con questi altri tutorial
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-blogger-wordpress.html
      http://www.ideepercomputeredinternet.com/2015/05/popup-cookie-law-garante-privacy-blogger-wordpress.html
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-dark-banner-blogger.html
      @#

      Elimina
    2. Grazie Ernesto tutto risolto, ora funziona ho seguito l'ultimo link

      Elimina
  12. grazieeee... mi sei stato d'aiuto tantissimo con questo post... complimenti per il tuo lavoro...

    RispondiElimina
  13. Ciao Ernesto scusa, quindi la barra che appariva automaticamente sui blog blogger non è buona? ricordo che in post precedenti avevi scritto che chi attiva la navbar era apposto ...? o non è più così?

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
    2. e la devo inserire anche se nel mio blog non ho alcuna pubblicità???? e scusa un'ultima cosa, se inserisco ad esempio la tua barra di notifica (http://www.ideepercomputeredinternet.com/2015/05/cookie-law-desktop-mobile-blogger-barra-notifica-schermata-iniziale.html ) devo disattivare la navbar?

      Elimina
    3. Non mi fate domande di tièpo legale perché non mi posso prendere la responsabilità di rispondervi senza neppure aver controllato il vostro sito. In ogni caso credo che il banner è meglio metterlo che non metterlo. Non occorre disattivare la Navbar che pupoi lasciare tranquillamente
      @#

      Elimina
    4. no no ci mancherebbe, so bene che i tuoi sono consigli e che la responsabilità è sempre mia :) ok lo lascio per sicurezza. grazie come sempre, sei la mia fonte indispensabile per il blog! grazie!

      Elimina
  14. Scusa Ernesto, ma c'è possibilità di fare in modo che la barra di notifica non vada a coprire il titolo del blog in alto, e che magari faccia scalare il titolo leggermente come succede per la barra di blogger della privacy?

    RispondiElimina
    Risposte
    1. Tutto è possibile ma in ciascun modello ci sarebbe da fare un lavoro specifico. I layout sono molto diversi. Puoi però mettere delle trasparenza alla barra sostituendo
      background-color: #1fe0c9 !important;
      con
      background-color: rgba(31,224,201,0.7);
      o con
      background-color: rgba(31,224,201,0.7) !important;
      Per il codice RGBA leggi qui
      http://www.ideepercomputeredinternet.com/2013/01/codici-colori-trasparenza.html
      e qui
      http://www.ideepercomputeredinternet.com/2012/08/rgb-hex-convertire-codici-colori.html
      @#

      Elimina
  15. grazie infinite! se ce l'ho fatta io vuol dire che sei proprio stato chiarissimo!!! Darò il link al tuo blog e a questo post alle amiche con cui condivido l'hobby dello scrapbooking, abbiamo tutte blog sui quali pubblichiamo i nostri lavori, ma un certo genere di operazioni sul pc ci preoccupa a priori... ;)

    RispondiElimina
  16. Grazie infinite. I tuoi suggerimenti mi sono stati molto utili soprattutto per wordpress e sito. Mi stavo aggingendo ad effettuare le modifiche per adeguare alla normativa anche i blog blogger ma ho visto che google ci ha pensato in automatico.
    Grazie ancora, ciao
    Pietro

    RispondiElimina
  17. Sempre io, sono petulante questa mattina, ho inserito il codice delle 3 info sui cookie nel mio modello simple. Prima ho lasciato i tuoi link e compariva sia in incognito che normale, in seguito ho sostituito il link della Privacy con quella del mio sito(ripresa dal tuo) e salvato modello, ma ora non mi compare più la barra. Dove ho sbagliato?

    RispondiElimina
  18. Sempre io, sono petulante questa mattina, ho inserito il codice delle 3 info sui cookie nel mio modello simple. Prima ho lasciato i tuoi link e compariva sia in incognito che normale, in seguito ho sostituito il link della Privacy con quella del mio sito(ripresa dal tuo) e salvato modello, ma ora non mi compare più la barra. Dove ho sbagliato?

    RispondiElimina
    Risposte
    1. Sbagli nel non aprire il sito in una pagina a navigazione anonima. Sei la centesima che me lo dice :)
      Ripeto per la centesima volta
      1) Chiudi tutte le pagine in incognito
      2) Apri una pagina in incognito senza nulla
      3) Incolla nell'indirizzo quello del tuo sito
      4) Vai su Invio per aprirlo
      @#

      Elimina
  19. Posso dire che non ci ho capito nulla???
    Ho un misero blog di cucina, con poco più di 200 follower, ma di come si debba fare per inserire il banner e l'informativa non so praticamente nulla.
    Sembra tutto semplice... ma a me sembra difficilissimo!

    RispondiElimina
  20. ciao Ernesto, so che avrai già risposto altrove però non trovo: il banner blocca anche il caricamento dei cookie?

    RispondiElimina
    Risposte
    1. Ti sbagli :)
      A questa domanda non rispondo :) Quando saranno più chiare le regole del Garante riguardo alle singole piattaforme segnatamente quella di Blogger potremo affrontare anche questo tema. Per il momento penso che basti così
      @#

      Elimina
  21. :) grazie per la precisazione, continuo a seguirti allora! (se ho pubblicato il commento due volte scusami, non lo vedevo)

    RispondiElimina
  22. Ciao e complimenti per il plugin,

    l'ho installato e funziona bene sia su Chrome che su Firefox, mentre su IE 8, IE 9 e IE 11 non funziona.

    Ho letto in giro che IE non supporta il metodo "addEventListener"

    Qualche consiglio?

    Ti ringrazio
    Ciao
    Salvatore

    RispondiElimina
    Risposte
    1. A dir la verità a me funziona anche con IE 11 . Francamente le vesioni precedenti è meglio lasciarle perdere però puoi provare il metodo linkato qui soto per rendere il sito compatibile con IE ma solo se hai Blogger
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      @#

      Elimina
    2. Grazie, comunque non ho potuto applicare il tuo consiglio in quanto non uso Blogger.

      Ho risolto sostituendo ad "addEventListener" il metodo "attachEvent" compatibile con tutte le versioni di IE.

      Ciao e grazie
      Salvatore

      Elimina
  23. Grazie mille, è stato davvero utile ^_^ Ho inserito la barra e funziona perfettamente sia su desktop che su mobile (li ho provati entrambi aprendo una finestra in incognito) :)

    RispondiElimina
  24. Ciao, volevo solo chiederti visto che su Blogger appare già l'informativa di Google basta lasciare quella o devo necessariamente metterne una personalizzata?

    RispondiElimina
    Risposte
    1. Una pagina con una informativa anche minima in cui si avvertono gli utenti che si utilizzano i cookie ci vuole sempre poi se non hai pubblicità o plugin di Facebook puoi fare anche a meno del banner
      @#

      Elimina
    2. No, fino ad ora non ho inserito nè pubblicità nè plugin per i vari social sul blog.
      Quindi volendo potrei lasciare tutto invariato.
      Grazie mille per la risposta

      Elimina
  25. Ciao, sto tentando di inserire il banner sul mio sito, ospitato su xoom e realizzato con reamweaver, ma non funziona, il banner non compare né utilizzando il file da caricare sul sito né con il codice HTML lungo. E' possibile che vada in conflitto con altri script presenti nella pagina, come quelli di Bootstrap?

    RispondiElimina
    Risposte
    1. Questo codice funziona ed è testato su Blogger e Wordpress. Per altri CMS devi rivolgerti alla piattaforma oppure trovare plugin specifici
      @#

      Elimina
    2. il sito è ucronia.xoom.it
      ho messo il codice per richiamare lo script nella pagina principale.
      Il codice così com'è mi dà un'errore, perché apre due volte il tag script e lo chiude una volta sola.
      ho provato sia a chiudere mettere uno /script alla fine della prima riga sia a togliareil tag di apertura subito sotto in modo da richiudere tutto dentro un unico script (vorrei essere più chiaro, ma non posso scrivere codice nei commenti), ma ho provato in entrambi i modi e non va...
      Xoom mi dice che loro non impongono limitazioni di questo tipo.
      Mah...
      Il codice lungo, senza script, su un blog su Blogger funziona perfettamente, sul sito non va neanche quello.

      Elimina
  26. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  27. Ciao! Grazie mille! Ho trovato un modulo http://addons.prestashop.com/fr/outils-administration-modules-prestashop/8734-directive-europeenne-des-cookies-bandeau-bloqueur.html
    dice: "L'unico modulo che permette di rispettare i regolamenti europei e Data Protection Act. Visualizzare un pannello di avviso e disabilitare i cookie in arrivo per i visitatori fino ad ottenere il loro consenso."
    Scusa vorrei chiederti come disattvare i cookies senza comprare il modulo?

    RispondiElimina
  28. Ho trovato in uno dei tuoi post http://www.ideepercomputeredinternet.com/2014/09/cookie-consenso-privacy-banner-blogger-wordpress.html:
    "Informazioni su come sia possibile disabilitare questi cookie con i link alle procedure da usare con i principali browser quali Firefox, Safari, Chrome, Internet Explorer e Opera."
    Ma ho letto che la legge euopea vieta di inserire questi consigli nella pagina di accettazione dei cookies, ma che obbliga la disattivazione prima dell'OK del visitatore.

    RispondiElimina
    Risposte
    1. Leggi questo post della pagina Facebook di questo sito che forse ti può aiutare
      https://www.facebook.com/ideepercomputeredinternet/posts/10155643649610514
      Giusto per evitare altre domande di questo tenore ricordo che non sono un avvocato
      @#

      Elimina
    2. ok! lo so. volevo sapere solo se esiste uno script per bloccare - avviare i cookies automaticamente

      Elimina
  29. Il testo della legge (in francese)
    http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/
    "Il consenso deve essere prima dell'inserimento dei cookie
    fino a quando la persona non ha dato il suo consenso, i cookie non possono essere depositati o visti sul suo terminale."

    RispondiElimina
  30. Ciao Ernesto bentrovato. Io ho inserito il codice della barra notifica cookie come da te suggerito ma non la vedo una volta aver salvato il modello. Non ho capito però cosa intendi per "aprire una finestra in incognito" per vederla nel blog. Aspetto fiduciosa. come sempre! :-)

    RispondiElimina
  31. Che browser usi? Con Firefox devo andare su File > Nuova finestra anonima. Su Chrome devi andare su Menù > Nuova finestra di navigazione in incognito mentre su IE devi andare su Ruota dentata > Sicurezza > InPrivate Browsing. Se apri il tuo sito con una di queste modalità non vedrai però nulla perché la barra di notifica non c'è e non c'è neppure lo script se il tuo blog è questo
    http://lauradenu.blogspot.it/
    Il codice va incollato prima di < /body > che è la penultima riga del tuo template e dove non c'è nulla
    @#

    RispondiElimina
    Risposte
    1. Si Ernesto uso Firefox ed ho trovato "apri una finestra anonima". Il codice lo avevo incollato proprio incollato sul tag < /body >. Riprovo ancora, grazie dell'attenzione.

      Elimina
    2. Si incollarlo prima e ci siamo riusciti. Non sono riuscita a creare due pulsanti per Info e per OK, ma va bene cosi. Grazie Ernesto!

      Elimina
  32. Ciao a tutti,
    Io ho seguito con successo le istruzioni sul mio blog.
    Poi, qualche giorno fa, ricevo una comunicazione da Google con scritto che avevano provveduto loro ad aggiungere una barra di notifica adeguata.
    Il problema è che la loro barra di notifica non è assolutamente adeguata, riportando solo l'avviso di cookies relativi a Google.
    Inoltre quella da me inserita non funziona più.
    Qualcuno ha avuto esperienze simili? Come ha risolto la cosa?
    Grazie

    RispondiElimina
    Risposte
    1. A me è successo lo stesso. Un testo lunghissimo e non riesco a ripristinare quella inserita direttamente nel modello. Ammesso che si possa ripristinare! :-(

      Elimina
  33. @Emanuele
    @Laura
    Il banner di Google è stato inserito in tutti i blog di Blogger non solo in Italia o in tutta la UE ma in tutto il mondo se si aprono con una estensione che fa capo alla Unione Europea. Si può risolvere in diversi modi. Quello che ho utilizzato io in questo sito l'ho riportato in questi post
    http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
    @#

    RispondiElimina
    Risposte
    1. grazie Ernesto, ci proverò! :-)

      Elimina
    2. Grazie 1000 Ernesto,
      Ho risolto il problema seguendo i suggerimenti da te segnalati.

      Elimina
  34. Ciao Ernesto, non capisco perchè non mi funziona, è tutto il pomeriggio che ci provo....aspetto tue delucidazioni

    RispondiElimina
    Risposte
    1. Intendo la personalizzazione della barra, ho aggiunto la stringa per la personalizzazione ma rimane quella di prima...help!

      Elimina
    2. Il codice di Google è cambiato. Ho messo l'aggiornamento a inizio post. Prova a seguire queste istruzioni
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
    3. Grazie per avermi risposto tempestivamente, cmq ho seguito la guida aggiornata è il problema rimane sempre lo stesso, la barra rimane in alto e non si modifica. Le uniche cose che riesco a fare sono: cambiare l'URL dei cookie con quello di Google e scegliere colore e grandezza del testo. Principalmente mi interesserebbe metterla in fondo, mi sta fumando il cervelloooo! :(

      Elimina
    4. Aggiungo che su tre blog che possiedo, non funziona solo in un, quello che io reputo più importante. E' proprio questo che mi sta facendo impazzire

      Elimina
    5. Significa che hai incollato male il codice. Incollalo così com'è per vedere se funziona aprendo una scheda in incognito e solo successivamente passa alle modifiche
      @#

      Elimina
  35. fatto! stesso problema, può essere che vada in conflitto con qualcosa??

    RispondiElimina
    Risposte
    1. Mi sembra strano. Si tratta di un problema che non so risolvere. Non vedo possibili conflitti. Se in altri template ti funziona... Potrebbe darsi che tu abbia incollato altri codici dello stesso banner che sono rimasti nel template ma è solo una idea
      @#

      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.