Personalizzare la Schermata Iniziale per l'accettazione dei cookie come disposto dal Garante della Privacy.

Come personalizzare nei colori una schermata iniziale del tipo popup con effetto Lightbox per l'accetazione dei cookie di profilazione senza che l'utente possa interagire con gli altri elementi del layout.

Nonostante abbia tentato diverse strade non sono ancora riuscito a trovare una soluzione per mostrare un banner o una schermata iniziale che funzioni anche nei modelli a Visualizzazione Dinamica di Blogger. Il banner si vede per qualche attimo e poi purtroppo sparisce anche con un diverso settaggio di z-index. Altro problema sul tappeto è quello della interazione con i contenuti del sito prima di aver espresso il consenso all'uso dei cookie con una azione da parte dell'utente.

La scelta della Barra di Notifica che ho presentato di default nel mio precedente post su Come mettersi in regola con le disposizioni del Garante della Privacy è decisamente poco invasiva visto che mostra un banner fisso nella parte alta o nella parte bassa che rimane visibile fino a che non si sia cliccato su OK per accettare l'utilizzo dei cookie. Secondo alcune interpretazioni restrittive delle disposizioni del Garante prima della consapevole accettazione non si potrebbe interagire con nessun elemento del sito soprattutto con eventuale annunci pubblicitari. Non so se questa interpretazione più restrittiva sia quella giusta. Anzi quello che vedo in rete mi fa pensare che non lo sia visto che in molti siti hanno già adottato il meno invasivo banner rispetto a questa soluzione più radicale. Speriamo che prima del 2 Giugno si possa avere una risposta definitiva anche se poi basterà vedere come si comportano i siti più importanti specie i quotidiani online per comportarci di conseguenza.

In ogni caso per tutti coloro che volessero già da ora inserire nel proprio sito un sistema di accettazione che impedisca l'interazione del lettore prima del consenso all'uso dei cookie ho messo a punto un sistema basato sulla Schermata Iniziale che risponde proprio a questa esigenza.

La Schermata Iniziale proposta oscura tutto il sito con una opacità del 50% sul tipo Lightbox e rende tutti gli elementi presenti del layout non cliccabili con la sola eccezione dei due bottoni per accettazione dei cookie e per aprire la pagina con informativa estesa. Questa schermata in stile finestra popup si vedrà anche nei dispositivi mobili

 

come mostrato nello screenshot ottenuto con il tool Screenfly. Prima di procedere è bene che pubblichiate una pagina con una Informativa sulla Privacy che illustri anche il funzionamento dei cookie di profilazione. Potete usare come modello anche quella che ho realizzato per questo sito.

Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga </body> quindi, subito sopra a questa, incollate questo codice

<!-- Codice per accettazione cookie - Inizio -->
<style>
/* CSS */
div#cookieChoiceInfo {
background-color: #1fe0c9 !important;
color:#fff; /* Colore testo */
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > div:nth-child(2) > div:nth-child(1) > a:nth-child(2), #cookieChoiceDismiss {
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;
line-height:32px !important; /* Altezza interlinea */text-align:center;
padding:3px 12px;
text-decoration:none;
border-radius:8px;
font-family:Georgia;
font-size:16px;
font-weight:bold;
}
#cookieChoiceInfo > div:nth-child(2):hover > div:nth-child(1):hover > a:nth-child(2):hover, #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;
}
</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: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:#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 in modello.  Le personalizzazioni essenziali riguardano il testo della informativa breve, il testo dei bottoni e l'URL del collegamento alla pagina della Privacy tutti elementi colorati di blu. Poi si possono modificare i codici dei colori per rendere la schermata più in tono con i colori del nostro layout. Si può cambiare anche la famiglia di font (Georgia). 

I colori più importanti sono background-color:#000; per il color

e di sfondo della schermata e color:#fff; per il colore del testo. I bottoni sono in stile CSS3 con gradiente. Il posizionamento della schermata è settato al centro tramite questi tag left:50%;top:50%. Per settare in modo diverso l'opacità con cui viene visto il sito prima dell'accettazione basta modificare questi tag opacity:0.5;filter:alpha(opacity=50) ricordandosi di essere coerenti con i diversi browser (p.e va bene 0.7 e 70). Per verificare il funzionamento di questo sistema di accettazione per i cookie che dura un anno dovete aprire il vostro sito con una scheda in incognito sia da desktop sia da mobile.

 

Questo codice può essere usato anche per i siti Wordpress. Basta andare su Bacheca > Aspetto > Editor > Piè di pagina (footer.php) e incollare il codice precedente subito sopra il tag </body>

 

Si va poi in basso su Aggiorna file quindi si apre il sito con una scheda in incognito per la verifica.