Aggiungere barra per il consenso dei cookie su Blogger


Il garante della privacy ha imposto a tutti coloro che possiedono dei siti in grado di tracciare gli utenti tramite i cookie, di avvisarli la prima volta che accedono ad esso attraverso due metodi: la barra delle notifiche o la schermata iniziale per ricevere il loro consenso all'uso dei cookie. Tra i due metodi, il meno invasivo risulta la barra delle notifiche che in base alle proprie esigenze la si può installare in cima o in fondo al blog; in entrambi i casi si dovrà visualizzare senza utilizzare la scrollbar e scorrendo la pagina dovrà mantenersi in una posizione sempre in evidenza, cioè sopra il contenuto. A tal proposito ho già creato un articolo dove viene spiegato più dettagliatamente cosa sia e come si abilita l'informativa per il consenso dei cookie ma è facilmente intuibile che per gli utenti di Blogger non si tratta di un'operazione tanto facile. In questo articolo verranno presentate alcune soluzioni solo per i blog su Blogger, viene utilizzato ugualmente il codice ufficiale, ma è leggermente modificato in modo che possa essere incluso nel modello di Blogger.

1) Navbar

Il metodo della navbar non è più funzionante, lo è stato solo per un breve periodo. Probabilmente l'avranno tolta perché non appare nella versione mobile di Blogger e poi perché, diciamoci la verità, è un po' inutile. Questo è un esempio del risultato che si riusciva a ottenere usando la classica navbar:



2) Barra cookie ufficiale

Quelli di Google hanno introdotto una barra per i cookie e per impostazione predefinita è presente in ogni blog della piattaforma Blogger.  Potrebbe sembrare una soluzione definitiva ed invece non è così. L'informativa completa che indirizza in una pagina di Google, fa riferimento a tutti i servizi inerenti a Google come Analytics, Adsense (forse anche i video di Youtube) ecc. Quindi chi sta utilizzando alcuni widget esterni tipo Facebook, pubblicità o altri servizi che registrano cookie di profilazione, dovrà sostituire il link con la propria informativa, in essa ci dovrà essere l'elenco dei cookie di terze parti, il loro utilizzo, la loro provenienza e, soprattutto, il metodo di rimozione.




3) Barra alternativa in alto

Se siete tra quelli che odiate la navbar e preferite mostrare una diversa barra dei cookie ma che si va a posizionare sempre in alto, dovete andare su Modello > Modifica HTML, poi cercare il tag </body> e prima di esso incollare il seguente codice:
<!-- Codice barra dei 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('Utilizzando questo sito si accettano e si autorizzano i cookies necessari',
                                         'OK', '+Info', 'http://www.scuolissima.com/2012/11/disclaimer-scuolissimacom.html');
    });
    //]]>
  </script>
  <!-- Codice barra dei cookie - Fine -->

4) Barra alternativa in basso

Se invece preferite la soluzione ancora meno invasiva, potete installare la barra delle notifiche dei cookie nella parte bassa del blog, andando ad incollare quest'altro codice prima del tag </body> :
<!-- Codice barra dei 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; bottom: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;' +
                  'bottom: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('Utilizzando questo sito si accettano e si autorizzano i cookies necessari',
                                             'OK', '+Info', 'http://www.scuolissima.com/2012/11/disclaimer-scuolissimacom.html');
        });
        //]]>
      </script>
      <!-- Codice barra dei cookie - Fine -->

In entrambi i codici va sostituito il link in rosso con la pagina relativa alla Privacy/Policy del proprio blog. Invece le scritte in blu si possono modificare o lasciare invariate.

Il testo della barra lo si può sostituire con quest'altro che è più informativo e corretto se si utilizzano cookie di profilazione di terze parti:
Questo sito utilizza i cookie di profilazione di terze parti. Se continui la navigazione consideriamo che accetti il loro uso.

La barra dei cookie sarà visualizzabile sia nella versione desktop sia nella versione mobile del blog (dovete selezionare il modello personalizzato per cellulari). Assicuratevi che tale scritta non venga coperta da altri elementi del blog come banner pubblicitari, menù o dall'header. Utilizzando in modo opportuno i tag condizionali sarà anche possibile decidere di usare la barra delle notifiche in alto solo agli utenti che si collegano da PC e la barra delle notifiche in basso per gli utenti che si collegano dai dispositivi mobili o viceversa. La barr

Personalizzazioni

Per personalizzare la barra dei cookie (quella tramite codice) si deve andare su Modello > Modifica HTML e prima della riga ]]></b:skin> bisogna andare ad incollare il seguente codice css:
/* CSS Barra dei Cookie */
div#cookieChoiceInfo {
background-color: #000 !important;
color:#FFF;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color: #FFF;
background: #e50909;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
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:#FFF;
text-decoration:none;
position: relative;
top:1px;left:1px;
}

Essendo un codice css, presenta codici esadecimali e dimensioni in pixel. Questi possono essere personalizzati a proprio piacimento o anche per esigenze particolari, ad esempio scritte che non risultano visibili nel tema o font poco adatto per la barra dell'accettazione dei cookie.

Ecco alcune possibili personalizzazioni:

- background-color: #000 !important; --> è il colore nero di sfondo della barra.
- color:#FFF; --> è il colore bianco della frase presente nella barra.
- color: #FFF; --> in questo caso è il colore bianco utilizzato per le scritte dei pulsanti.

In ogni caso le modifiche apportate varranno sia per la versione desktop sia per la versione mobile, quindi sconsiglio di variare anche le dimensioni dei pulsanti o l'altezza della barra perché si potrebbero creare degli inestetismi.

Il risultato finale con l'aggiunta del css per la personalizzazione è il seguente:



Come bloccare i cookie su Blogger

Sul web si discute anche dei cookie di profilazione (anche di terze parte) che differiscono dai cookie tecnici. Tutt'ora non si riesce a capire se effettivamente è presente l'obbligo di nascondere qualsiasi cosa utilizzi questi cookie di profilazione prima che l'utente dia il suo consenso (banner pubblicitari e pulsanti di condivisione sui social network). Al momento sembra che pochi siti si siano adeguati in modo restrittivo, tuttavia nel peggiore delle ipotesi ho scritto in un'altra pagina come bloccare i cookie di profilazione su Blogger.

LEGGI ANCHE:
Come conoscere i cookie di ogni sito
Quali sono le conseguenze della cookie law italiana



21 commenti :

  1. Grazie infinite per questo tutorial! Ho utilizzato la barra inferiore e funziona benissimo!

    RispondiElimina
  2. Ciao, vorrei un chiarimento sulla navbar. Ho visto che sul mio blog e su altri che ho aperto di proposito una prima volta non compare la scritta che hai su citato. Come mai? Ti ringrazio tanto, anche per l'impegno che metti nell'approfondire argomenti molto utili.

    RispondiElimina
    Risposte
    1. Se usi la modalità in incognito del tuo browser noterai che la navbar appare con l'avviso iniziale. Ho appena visto il tuo blog Paolina e funziona.
      Ti consiglio di utilizzare il metodo con il codice, così puoi inserire una descrizione più adatta ed anche un email, un link o un modulo di contatto sulla stessa schermata per poterti contattare.

      Elimina
  3. Ciao e grazie mille per l'articolo.
    Io la la navbar e dovrei essere in regola, tuttavia, volendo regolarizzare anche le inserzioni ho pensato di consultare il vostro disclaimer.
    Prima di pubblicarlo volevo avere il permesso da parte vostra, dato che ho preso come esempio il vostro modificando ovviamente i dati riguardanti il mio blog e le mie forme pubblicitarie.
    Grazie mille in anticipo!

    RispondiElimina
    Risposte
    1. Lo puoi copiare se vuoi, però non è definitivo, è probabile che in questi giorni lo modifichi di nuovo aggiungendo nuove cose basandomi su quello che scriveranno anche gli altri siti.

      Elimina
    2. Grazie mille! Se non altro sarebbe un inizio di regolarizzazione (per la serie, meglio di niente...).
      Io non ci capisco molto di queste cose tecniche e immagino quanti blogger saranno nella mia stessa situazione. A questo punto quindi scrivo un normalissimo post con la mia policy e poi in calce al blog metto il link in evidenza che rimanda all'articolo giusto?
      Grazie ancora!

      Elimina
    3. abdrea anche io vorrei copiarlo se posso modificandolo...

      Elimina
    4. Certamente, però devi tenere conto che alcuni cookie presenti sul mio blog possono non essere presenti sul tuo o viceversa.

      Elimina
  4. Scusa lo stress, puoi dirmi se secondo te va bene?
    http://labelleeblog.blogspot.it/
    (il link l'ho messo in top alla colonna di destra, dici possa essere abbastanza visibile?)

    RispondiElimina
    Risposte
    1. Il link della privacy lo si può mettere anche in basso, è irrilevante la posizione. Quello che conta è la barra dei cookie. Comunque ti consiglio di usare la barra dei cookie così puoi inserire il link della tua privacy/policy dove specifichi che utilizzi anche Facebook e altre pubblicità. Nel disclaimer della navbar si fa riferimento ai soli cookie che usano i servizi di Google (Adsense, Analytics, Google+ ecc.) e potrebbe non bastare in questo caso.

      Elimina
    2. Andrea, in effetti hai ragione! Ho aggiunto ANCHE la barra in alto così direi di sentirmi al sicuro, per ora!
      Ho comunque aggiunto questo tuo articolo alla barra dei preferiti, tengo d'occhio per eventuali aggiornamenti! ;)

      Elimina
  5. ciao scusa l'intrusione, anch'io ho un blog e vorrei capire cosa devo fare. Non ho facebook e non utilizzo adsense. questo è il mio blog http://torella88.blogspot.it/
    Potresti cortesemente darci un'occhiata? sono un po' in ansia e non sono l'unica...

    RispondiElimina
    Risposte
    1. segui questo link per vedere i cookie presenti sul tuo sito o in quelli degli altri:
      http://www.scuolissima.com/2015/05/conoscere-cookie-sito.html

      Elimina
  6. sei stato utilissimo....grazie

    RispondiElimina
  7. Ciao, ho inserito il codice per la barra in basso ma non funziona. Ho provato da diversi browser e dispositivi diversi. Hai un esempio di sito dove la barra in basso compare? Grazie

    RispondiElimina
    Risposte
    1. si, la sto usando nella versione mobile di Scuolissima ed ho appena provato su un blog di prova e funziona. I due codici sono praticamente uguali, solo che nel primo codice viene usata la parola TOP, mentre nel secondo la parola BOTTOM (serve per spostare la barra in basso).
      Hai già fatto la prova usando la navigazione in incognito? Attualmente guardando il codice del tuo blog sembra che il codice della barra dei cookie non sia presente.

      Elimina
    2. Ti confermo che non funziona... anche con la navigazione in incognito... ti andrebbe di controllare? Ti ringrazio moltissimo

      Elimina
    3. Già, non funziona. Però guardando il codice del tuo tema sembra che appaiono dei simboli strani (&#160).
      nel bel mezzo del codice della barra dei cookie, chissà che non sia questo il problema.

      Elimina
  8. Ciao andrea sono il classico smanettone di internet ma di cookie law ci ho capito ben poco
    per favore potresti controllare se il mio blog e' a posto? o devo fare qualcosa?

    www.readytogold.blogspot.it

    RispondiElimina
    Risposte
    1. sul tuo blog sembra che nemmeno ci siano cookie di profilazione, quindi sei ok. Per chi volesse verificare l'esistenza di cookie di profilazione, ricordo che il metodo da seguire è il seguente:
      http://www.scuolissima.com/2015/05/conoscere-cookie-sito.html

      Chiudo i commenti.

      Elimina