Come installare e personalizzare la barra per l'accettazione dei cookie in un blog Wordpress.

Come installare e personalizzare in un sito Wordpress un avviso fluttuante o una schermata inizale che avverta i lettori dell'utilizzo dei cookie di profilazione con un link di accettazione che valga per un anno secondo i dettami del Garante della Pricvacy che ha recepito unaa disposizione della UE.

Come probabilmente saprete se siete giunti in questa pagina il 4 Giugno 2014 il Garante della Privacy ha dato seguito a una disposizione europea sull'utilizzo dei cookie di profilazione. Il regolamento impone agli webmaster di informare i lettori quando sui loro siti possano essere ricevuti dal browser dei cookie in grado di monitorarne l'attività sullo stesso sito. 

Tali cookie servono per avere una idea più precisa del comportamento dei lettori per mostrare loro degli annunci più pertinenti o comunque per migliorarne la loro esperienza di navigazione. I cookie di profilazione vengono utilizzati da Google (Adsense, Google Analytics, ecc), da Facebook e da altri player del settore IT. Anche Twitter ultimamente ha iniziato a pubblicare tweet sponsorizzati quindi non mi stupirei che anche questo social utilizzasse in seguito questi cookie se non lo fa già adesso.

Gli webmaster hanno a disposizione un anno per mettere in regola i loro siti. A loro si chiede di mostrare un annuncio che avverta i lettori dell'uso di questi cookie insieme a due link. Il primo deve portare a una pagina web già pubblicata con maggiori informazioni su questi cookie e sulla possibilità di disabilitarli mentre il secondo deve essere un semplice pulsante che permetta di accettare i cookie in modo da continuare nella navigazione. Google cosciente che tutti i publisher affiliati debbano implementare nei loro siti questo annuncio ha messo a loro disposizione una pagina con gli strumenti adatti allo scopo.

Vediamo come si possa installare su un blog Wordpress questo script e come personalizzarlo. Si va su Bacheca > Aspetto > Editor

 

La pagina che si apre non sarà identica per tutti i siti perché dipenderà dal Tema che si è installato. Nella colonna a destra si clicca su Piè di pagina o footer.php




Si scorre il codice fino a trovare la riga </body> che sarà la penultima

Subito sopra si incolla questo codice

<!-- 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; 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('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_INFO');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Si va quindi su Aggiorna File. Se voi aprite adesso una qualsiasi pagina del sito in una scheda con la Navigazione in Incognito visualizzerete una barra di notifica in basso 

Tale barra sarà fluttuante e rimarrà fissa allo scorrere della pagina. Scomparirà solo quando il lettore avrà cliccato sul link OK e non sarà più visibile per un anno quando si aprirà il sito con lo stesso browser. L'altro link +Info porterà il lettore a aprire la pagina per avere più informazioni sui cookie. Come modello per queste notizie potete consultare quella che ho creato per questo blog:

• Politica della privacy e accettazione dei cookie di profilazione -

Il messaggio di colore blu e i due pulsanti possono essere personalizzati a piacere. Ricordatevi anche di sostituire URL_PAGINA_INFO con l'indirizzo della pagina delle informazioni sui cookie.

SCHERMATA INIZIALE E POSIZIONE BARRA

Se desiderate la barra di notifica nella parte alta basterà sostituire la prima espressione bottom:0; con top:0;.  In questo modo la barra sarà sempre flottante ma nella parte alta del layout

Se al posto della barra volete visualizzare una schermata iniziale bisognerà sostituire ConsentBar con ConsentDialog e aggiornare il file

In questo caso il messaggio sarà visto sopra alla pagina che si schiarirà con un effetto Lightbox. Il lettore per continuare la navigazione dovrà necessariamente cliccare su OK (pulsante di accettazione). Sia la barra di notifica sia la schermata iniziale si visualizzeranno anche con i dispositivi mobili.

PERSONALIZZAZIONE DELLA BARRA DI NOTIFICA

La barra visualizzata in alto o in basso può essere personalizzata nei colori e nella forma dei pulsanti. Si va sempre su Bacheca > Aspetto > Editor ma stavolta si sceglie Testata o header.php

Nel codice si cerca la riga </head> e subito sopra si incolla questo codice

<style>
/* 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: #FFF;
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:#FFF;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;left:1px;
}
</style>

quindi si va in basso su Aggiorna file.



La barra prenderà questo aspetto

Ovviamente si possono modificare i codici dei colori dello sfondo e dei bottoni. Per questi ultimi ho inserito un gradiente, uno spostamento di 1 pixel in basso e a destra e delle ombreggiature per avere un effetto tridimensionale. Questo articolo è la versione per Wordpress di un altro post scritto sullo stesso tema per Blogger. Su questo tema ho pubblicato anche altri post:

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