Come mostrare un avviso per accettazione dei cookie con oscuramento del sito per Blogger e Wordpress.

Come installare un avviso di accettazione dei cookie che contestualmente oscuri anche il sito per impedire la interazione dei lettori prima del consenso.

Vado a illustrare una nuova soluzione per ottemperare alla richesta del Garante della Privacy che risponde in qualche modo a chiritiene che si debba dare una risposta più rigorista di quella di un semplice banner. 

Si tratta in sostanza di mostrare la prima volta che si apre il nostro sito una pagina completamente oscurata con un avviso per accettare l'uso dei cookie e con un link alla informativa estesa su che cosa questo significhi. Con questo sistema il lettore non potrà in alcun modo interagire con il sito prima di aver cliccato sul pulsante OK. Dovremo quindi inserire la Privacy Policy in un altro sito rispetto a quello in cui installiamo questo avviso. Potrebbe essere una pagina di un altro blog o una pagina apposita creata con Gogle Sites.

L'aspetto della pagina con l'avviso sarà il seguente

con il bottone di accettazione e quello per più informazioni. Dopo aver salvato il modello per una eventuale backup di ripristino si va su Modello > Modifica HTML, si cerca la riga </body> quindi, subito sopra a questa, si incolla questo codice

<!-- Codice per accettazione cookie - Inizio -->
<style>
/* CSS */
div#cookieChoiceInfo {
color:#fff; /* Colore testo */
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo &gt; div:nth-child(2) &gt; div:nth-child(1) &gt; a:nth-child(2) {
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fedede&#39;, endColorstr=&#39;#e50909&#39;,GradientType=0);
color:#5872b5 !important;
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
line-height:36px !important; /* Altezza interlinea */
text-align:center;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:Georgia;
font-size:18px;
font-weight:bold;
}
a#cookieChoiceDismiss {font-size:22px; color:#5872b5 !important;}
a:hover#cookieChoiceDismiss  {color:#4ce6d4 !important;}
#cookieChoiceInfo &gt; div:nth-child(2):hover &gt; div:nth-child(1):hover &gt; a:nth-child(2):hover {
color:#4ce6d4 !important;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;left:1px;
}
</style>
<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:1.0;filter:alpha(opacity=100);' +
          'background-color:#333;';
      var dialogStyle = 'z-index:1000;position:fixed;left:50%;top:50%';
      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
          'background-color:#000; font-size:16px; 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 = 'inline';
      dismissLink.style.textAlign = 'right';
      dismissLink.style.marginTop = '0px';
      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. showCookieConsentDialog('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', 'URL_PAGINA_PRIVACY');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Si salva il template. Si apre quindi una scheda di Navigazione Anonima per verificare che la schermata iniziale sia oscurata e si veda il banner con l'avviso e i pulsanti. Oltre ai codici dei colori si possono modificare anche la famiglia di font e altri parametri come la dimensione dei font. La demo seguente deve essere aperta con una pagina in Incognito  

Demo
Clicca qui

Si deve anche personalizzare il testo dell'avviso colorato di blu e inserire l'URL della Pagina della Privacy che come detto dovrà essere esterna al sito altrimenti non si visualizzerà. Questo codice è perfettamente funzionante anche per siti Wordpress andando su Aspetto > Editor > footer.php.