Inserire nel sito il link per l'accettazione dei cookie come disposto dal Garante della Privacy.

Come mostrare un avviso personalizzabile sull'utilizzo dei cookie secondo le direttive del Garante della Privacy senza utilizzare servizi esterni.

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 -

Nel precedente post ho illustrato come mostrare ai lettori un avviso su come vengono utilizzati i cookie nel sito. Tale messaggio diventerà obbligatorio a partire dal Giugno 2015 per tutti i blog che utilizzano appunto i cookie di profilazione atti a ottenere informazioni sul comportamento dei lettori. Nella trattazione ho usato lo script CookieChoises messoci a disposizione da Google.  

Tale codice viene distribuito secondo la licenza MIT di software libero e quindi può essere modificato. Per implementare l'annuncio secondo il codice fornito da Google bisogna infatti caricare il file javascript in un nostro spazio. Se abbiamo un sito Wordpress con un dominio acquistato non ci sono molti problemi visto che possiamo caricare il file tramite il File Manager fornito dalla società da cui abbiamo acquistato il sito. Se però abbiamo un blog gratuito su Blogger allora dovremo usare un hosting come Google Drive.

Visto che ci sono molti blogger che non amano troppo smanettare con i codici ho pensato di convertire tutto il codice di Google in un altro che possa essere incollato nel template senza bisogno di servizi esterni. In questo modo tra l'altro saranno visibili anche i parametri da modificare per cambiare l'aspetto del banner. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla il codice seguente

<!-- 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', 'Più Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Si salva il modello. Si può scegliere tra due opzioni.

1. showCookieConsentBar mostrerà la barra di notifiche nella parte alta
2. Se la stringa precedente si sostituisce con showCookieConsentDialog si visualizzerà una schermata iniziale su cui il lettore deve cliccare per continuare la navigazione
3. Si può intervenire sul blocco di codice che segue la riga evidenziata di giallo per modificare l'aspetto e il colore della barra di notifica e sul blocco di codice che segue la riga evidenziata di verde per intervenire sull'aspetto della schermata iniziale.
4. Il messaggio visualizzato dai lettori e il testo dei due link colorati di blu può essere adattato alle nostre esigenze (Assolutamente non usate apostrofi).
5. Al posto dell'indirizzo della pagina che ho creato per illustrare ai lettori l'utilizzo de cookie inserite l'URL di una pagina simile che dovrete pubblicare

Nel caso della Schermata Iniziale il lettore deve necessariamente cliccare su OK per continuare la navigazione mentre con la Barra di notifica si potrà scorrere il sito avendo però la barra sempre presente e fissa nella parte superiore della pagina fino a quando non si clicchi su OK. Per controllare come appare il sito nella sua versione desktop basta aprirlo in una finestra di navigazione anonima. La barra o la schermata non sarà  più visualizzata per un anno dato che è questa la durata del cookie. Ovviamente nel caso in cui il browser con cui si apre non li cancelli mai durante tutto questo periodo di tempo. 

Se invece si vuole visualizzare l'avviso su smartphone oltre ad aprire il sito con tale dispositivo mobile si può andare su Modello per vederne la miniatura su Cellulare. 

Il codice precedente può essere usato anche dagli utenti Wordpress che lo possono incollare su Aspetto > Editor > Piè di pagina. Tra breve pubblicherò un altro post su come si possa personalizzare l'aspetto della barra di notifica relativamente a colori, misure e bottoni. Su questo argomento consultate anche questi 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. Personalizzare la Schermata Iniziale per l'accettazione dei cookie 
9. Banner per l'accettazione dei cookie in stile dark e con tre link