Pubblicato il 13/09/14e aggiornato il

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
 
wordpress-cookie-garante-privacy

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

footer-piè-di-pagina


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

riga-footer-wordpress

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 


barra-notifica-cookie


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:
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

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

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

testata-wordpress

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.

personalizzazione-barra-notifica-wordpress

La barra prenderà questo aspetto

barra-notifica-personalizzata

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 




26 commenti :

  1. Ciao posso chiederti se questo procedimento è valido per wordpress.com o per wordpress.org? perchè io non riesco ad inserirlo. Grazie per la risposta.

    RispondiElimina
    Risposte
    1. Solo per WordPress.org naturalmente perché in WordPress.com mi risulta non possa essere inserito il javascript
      @#

      Elimina
    2. e quindi chi ha wordpress.com come può fare?

      Elimina
    3. Credo che al massimo può mettere un widget Testo in una sidebar con l'informativa breve e il link alla informativa lunga. Da quanto ho sentito sembra che possa bastare. Il codice potrebbe essere simile a questo
      In questo sito si utilizzano i cookie... Per saperne di più <a href="URL Pagina Privacy" target="_blank"> leggi qui</a>
      @#

      Elimina
  2. Ciao, sto cercando di implementare la barra di avviso di utilizzo dei cookie su un sito realizzato con Joomla. Vorrei che tale barra apparisse in basso, ma non ci riesco. Come posso fare ? Grazie

    RispondiElimina
    Risposte
    1. Purtroppo non ti posso aiutare perché conosco solo Blogger e Wordpress mentre non conosco assolutamente Joomla e Drupal. Mi spiace :(
      @#

      Elimina
    2. Ho sostituito le occorrenze top con bottom ;-) e ora funziona. Grazie. Adesso ho un altro problema però...se scrivo un messaggio di due righe anzichè una la barra scompare.

      Elimina
    3. Per un messaggio di più righe usa quest'altra barra
      http://www.ideepercomputeredinternet.com/2015/05/banner-accettazione-cookie.html
      puoi fare la stesa cosa con top e bottom
      @#

      Elimina
  3. Ciao! Scusa ma volevo farti una domanda. Ho un blog su wordpress.com ma non trovo la scritta bacheca e non so quindi come procedere...
    Altra domanda, vorrei prendere la tua informativa se possibile ma in realtà non so se è anche troppo dettagliata per il mio blog (non me ne intendo molto....)...nel caso anche questo è un problema per il Garante?
    Grazie!

    RispondiElimina
    Risposte
    1. I siti del tipo nomeblog.wordpress.com non possono inserire javascript o plugin. Pare che l'unica cosa che possono fare è andare su Aspetto > Widget > Testo e incollare un testo con un link verso la Informativa sui Cookie che puoi creare a partire dalla mia presa come modello. Non ti so dire quello che puoi o non puoi lasciare però melius abundare quam deficere
      @#

      Elimina
  4. Grazie tante! Provo così al limite.......sei stato gentilissimo!

    RispondiElimina
  5. Ciao, ho un blog che gira su wordpress e sto cercando di seguire le tue istruzioni, ma quando apro il menu "apetto" non trovo editor, e mi sono persa. Puoi aiutarmi?

    RispondiElimina
    Risposte
    1. Wordpress del tipo self-hosting cioè un blog del tipo www.esempio.com o gratuito cioè del tipo mioblog.wordpress.com? Nel primo caso vai su Aspetto > Editor mentre nel secondo caso non ti so dire perché non ho mai avuto un blog di quel tipo
      @#

      Elimina
  6. Grazie mille!
    Ho usato questa guida sia per il mio blog personale che per quello del mio laboratorio. Efficace e facilissimo! :)

    RispondiElimina
  7. Ciao su blogger qual è il metodo più semplice per implementare la barra? Grazie in anticipo

    RispondiElimina
    Risposte
    1. Il post più recente è questo
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
  8. Grazie per la spiegazione dle procedimento passo per passo. Leggo "Tale barra [...] 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": come si può mantenerla visibile ad ogni accesso al sito, pur dallo stesso browser? Grazie mille

    RispondiElimina
    Risposte
    1. Non è semplicissimo. Si dovrebbe modificare il javascript in questo valore
      expiryDate.getFullYear() ma non è una cosa immediata. Il javascript non l'ho creato io ma Google quindi si dovrebbe testare ogni modifica
      @#

      Elimina
  9. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  10. Grazie Ernesto per tutto questo lavoro ,prezioso davvero! L'ho usato per il mio sito e mi sono trovata benissimo. Adesso ho cambiato tema e si pone nuovamente il problema. Non ho capito se per modificare l'aspetto della barra devo inserire entrambi i due codici, uno in footer ed uno in header. Mi puoi confermare o spiegare? grazie :-) Marni

    RispondiElimina
    Risposte
    1. Segui questo post che è il più recente sul tema
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
    2. grazie per la risposta.... ho letto l'articolo ..il codice va bene anche per wordpress?

      Elimina
    3. Ovviamente no. Si basa su uno script di Google che non c'è su Wordpress.
      Se usi Wordpress puoi optare per una di queste soluzioni
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-blogger-wordpress.html
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-dark-banner-blogger.html
      @#

      Elimina
    4. ok grazie Ernesto quindi avevo capito bene, sono due codici da inserire, mi studio bene il tutto ...grazie davvero :-) marni

      Elimina
  11. Ciao Ernesto!
    Ho seguito i tuoi consigli e il tutorial su Youtube per il mio sito con Wordpress.org, l'ho inserito nel footer...la prima volta è andato tutto bene ma l'ultima volta che il programmatore ha aggiornato il plugin relativo al template che uso il banner è sparito, anche reinserendo il codice non lo vedo più.
    Come posso fare per risolvere?!
    Grazie in anticipo :)

    RispondiElimina
    Risposte
    1. Se non lo vedi più reinserendo il codice non so proprio come potresti risolvere. Prova quest'altra opzione di Cookie Script
      http://www.ideepercomputeredinternet.com/2015/05/cookiescript-soluzione-cookie-law.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.