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

 

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

 

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 

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