Pubblicato il 27/05/15e aggiornato il

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  


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.




26 commenti :

  1. Ernesto, ottimo post come sempre. Credo, però, che i cookie vengano caricati lo stesso e purtroppo questo rimane un problema che spero Google, soprattutto per quanto riguarda Adsense, risolva indicando una soluzione.

    RispondiElimina
    Risposte
    1. Come appare sempre più probabile, e come del resto è logico e scritto nella norma stessa (non fidatevi delle aziende che mettono in giro faq e guide NON UFFICIALI, la sola versione che vale è quella pubblicata sulla Gazzetta Ufficiale che dice cose diverse, ben nascoste da chi vuole vendere script e plug in vari, anche millantando presunte certificazioni del Garante che non sono in realtà mai state date) il blocco preventivo dei cookie di terze parti non sarà necessario. E ci mancherebbe altro, visto che per molti sarebbe letteralmente impossibile.
      E' tutta una storia assurda e resa ancora più grottesca da personaggi discutibili che stanno facendoci su soldi senza motivi validi.

      Elimina
  2. Ernesto grazie mille per i tuoi post utilissimi. Io ho seguito tutto alla lettera e funziona.
    Ho solo una domanda da porti, cliccando su più info, si carica la pagina di policy ma la finestra non va via, può essere considerato un problema o secondo te va bene così?
    http://laviecestchic.blogspot.it

    RispondiElimina
    Risposte
    1. La finestra deve andare via solo quando si clicca su Ok cioè quando si accettano i cookie
      @#

      Elimina
    2. Ah perfetto! Ti chiedevo visto che io da quando è saltata fuori questa bomba dei cookies non so più dove metter mano e questa mi sembrava una validissima e soprattutto rigorosa formula per mettere in risalto la policy. Dici quindi che anche se la policy si vede appena sullo sfondo sia comunque a norma? grazie mille.

      Elimina
    3. Non posso dirfti nulla di certo, nessuno è sicuro di nulla :)
      Ognuno si comporta come crede più opportuno sperando che arrivino delle informazioni più precise
      @#

      Elimina
  3. Ciao Ernesto. Nel codice che hai usato per il banner di questo tuo blog ti consiglio di andare a capo prima della frase "Ok. Accetto i cookie", altrimenti c'è il rischio che, con una visualizzazione come quella nel mio PC, la scritta vada a capo dopo "Ok", come puoi vedere nello screenshot che ho pubblicato provvisoriamente qui: http://tinyurl.com/onutg3y

    RispondiElimina
  4. Prego!
    Altra cosa: hai scritto "Si deve anche [...] inserire l'URL della Pagina della Privacy che come detto dovrà essere esterna al sito altrimenti non si visualizzerà". Immagino che per la pagina della Privacy tu intenda quella a cui si accede cliccando su "+ info" nel tuo esempio.
    Ma se io indico una pagina esterna al sito, che pagina dev'essere? Creo un altro blog Blogger solo per questo? E se lo faccio, comunque, all'inizio il navigante che non l'ha mai visitata prima di visualizzare il testo troverà di nuovo un banner che gli chiede se accetta i cookie, e un tasto per avere più info...

    RispondiElimina
    Risposte
    1. No perché se per esempio crei un blog senza pubblicità e plugin non occorre inserire nessun banner. Puoi anche creare una pagina singola con servizi come Google Sites, Google Drive o Altervista
      @#

      Elimina
  5. ...Cosa che però tu non hai fatto nell'esempio, dando il cattivo esempio :-)
    Va beh, comunque è tutto chiaro.
    Comunque Blogger, anche se non inserisci pubblicità, comunque ha incorporato un contatore di visite (lo vedi dal pannello principale), quindi i cookie li mette comunque nel PC del visitatore, no? Per questo motivo i suoi blog hanno (se non vengono hackerati come tu insegni a fare) una barra in alto sui cookie, che a noi non piace (e preferiamo la tua) perché una volta cliccato su "Ok" appare al suo posto la famosa barra di ricerca e dei blog successivi. E purtroppo se si toglie quella viene tolto anche l'avvertimento sui cookie.
    Diverso credo sia (corregimi se sbaglio) il discorso del sito gratuito fatto con wordpress (del tipo miosito.wordpress.com): in questo caso non cui sono contatori e quindi non ci sono cookie, quindi non serve alcun avvertimento. Giusto?
    Per Altervista mi pare la stessa cosa, dato che lì si può installare il CMS Wordpress che non include di default nessun contatore...
    Comunque ripeto, se sto dicendo corbellerie correggetemi.

    RispondiElimina
    Risposte
    1. Le cose credo non siano chiare neppure al Garante :)
      Per informazioni più precise dovresti andare nelle FAQ del sito del Garante ma anche lì non ci sono informazioni così dettagliate, si procede secondo buon senso
      @#

      Elimina
  6. Ciao Ernesto,
    riguardo il blocco preventivo Adsense, hai scritto che non è richiesto dalla legge. Ho letto il testo e a prima vista anche a me sembra non sia richiesto. Tuttavia qualcuno fa notare il capoverso che dice "l'archiviazione delle informazioni nell'apparecchio terminale di un contraente o di un utente o l'accesso a informazioni già archiviate sono consentiti unicamente a condizione che il contraente o l'utente abbia espresso il proprio consenso dopo essere stato informato con le modalità semplificate di cui all'articolo 13, comma 3" (art. 122, comma 1, del Codice).
    Su questo punto mi sorgono i dubbi circa il caricamento Adsense prima che l'utente abbia premuto l'ok.
    Purtroppo la legge italiana ha estremizzato una direttiva europea, infatti in altri stati non sono arrivati a questo punto e le leggi son ben più chiare.
    Ora vedo cosa fare, entro il 2 giugno.
    Grazie comunque per tutte le tue utili guide!

    RispondiElimina
    Risposte
    1. Ciao Emanuel!
      Mi sembra che hai fatto presto; vuoi dire anche a tutti noi come inserire le condizioni per far sì che pubblicità e plugin vengano caricati solo dopo che l'utente ha prestato il consenso, con conseguente refresh automatico della pagina? Credo che la soluzione che hai adottato nel tuo sito, che è la medesima dei siti maggiori, come Corriere della Sera o Repubblica, sia l'unica che dia la certezza, quasi assoluta, di essere in regola con la direttiva.
      Grazie.

      Elimina
    2. Emanuel??
      Al momento ho scelto questa configurazione
      http://www.ideepercomputeredinternet.com/2015/05/cookie-law-desktop-mobile-blogger-barra-notifica-schermata-iniziale.html
      @#

      Elimina
    3. Sì, Emanuel; ho risposto al commento 6 di Emanuel Silci, in merito al blocco preventivo di Adsense.
      I siti più importanti, come quelli che ho citato, bloccano il caricamento di pubblicità e plugin sociali al primo accesso, mostrando il banner con l'informativa per informare l'utente e ottenere il consenso all'uso dei cookie. A consenso accordato, cliccando su un elemento, chiudendo il banner o semplicemente scrollando la pagina, avviene un refresh automatico che carica nuovamente il sito, ma con la comparsa dei banner pubblicitari e dei vari plugin dove prima non c'erano. Quindi il caricamento dei cookie da parte del sito avviene solamente a consenso ottenuto.
      Altri siti importanti, come Libero o Virgilio, ad esempio, hanno adottato configurazioni come quelle proposte in questo sito e che noi tutti, a parte il sig. Silci, stiamo implementando sui nostri Blog di "periferia".
      Se il capoverso citato nel commento 6 di cui sopra, recita esattamente quanto riportato, credo che per essere perfettamente in regola bisognerebbe adottare la configurazione descritta, ovvero quella che blocca tutti i cookie al primo accesso e prima di interagire attivamente con la pagina.
      Cosa ne pensi Ernesto?
      Ciao.

      Elimina
    4. Per Jo Val
      Ciao, su due siti che appartengono ad un network è stato realizzato un sistema che permette il refresh pagina dopo l'accettazione della cookie policy (ora lo fanno anche repubblica e corriere) ma non ho creato io il meccanismo e non ho il codice. Per questo sto cercando qualcosa di simile anche per altri blog che ho su Blogger/Blogspot.
      Dicono, chi ha contattato il Garante, che non faranno controlli subito dopo il 2 giugno e nei prossimi giorni, visti i tanti dubbi, forniranno ulteriori chiarimenti. Nel frattempo cerco appunto una soluzione per decisioni estreme del Garante. Se poi basterà solo il bannerino, tanto meglio

      Elimina
    5. Il sistema dei due siti di cui parli, leggendo attentamente il kit del garante, presentato ieri a Roma, è l'unico, come detto, che da la certezza di essere in regola;
      altrimenti, siti come La gazzetta dello sport, Corriere della sera o Repubblica, non avrebbero adottato il medesimo sistema, che non carica pubblicità, plugin e quindi cookie di tracciamento al primo accesso, ma lo fanno, con il ricarico automatico della pagina, solamente dopo il consenso dell'utente.
      pensavo che i due siti, di cui condividi post su g+, fossero tuoi, per questo ti ho chiesto se potevi rendere pubblica la maniera di implementare la soluzione da loro adottata.
      Mi metto anch'io alla ricerca.
      Ciao.

      Elimina
    6. Non è così. Ho analizzato Repubblica con Ghostery, ecco il risultato
      http://i.imgur.com/a2scvcd.png
      Su Repubblica vengono caricati 3 cookie prima della accettazione e sul Corriere ben 5. Molti di più di quelli caricati da un sito di Blogger :)
      @#

      Elimina
    7. No.
      Quelli non sono cookie di profilazione, altrimenti non si spiegherebbe perché non caricano banner e plugin prima del consenso.
      Inoltre, l'informativa del garante è chiara e non prevede il caricamento di cookie profilanti prima del consenso.
      Più precisamente, l'informativa stessa dice che banner pubblicitari possono anche essere caricati al primo accesso, ma i loro cookie devono essere opportunamente isolati e caricati solamente a consenso ottenuto.
      Ciao.

      Elimina
    8. Il problema è che, come al solito in Italia, la legge non è chiara ed è soggetta a mille interpretazioni (da qui il famoso detto tutto nostro, "fatta la legge, trovato l'inganno"). In europa, in altri paesi, non hanno adottato questi metodi estremi (vedi Le Monde, El Pais....), quindi, in teoria, anche l'Italia adotterà il sistema che in questa pagina, Ernesto, ha ben esposto.
      Nell'attesa, perché l'Italia non è mai un paese come gli altri e spesso cerca di fare cassa ai danni del cittadino, volevo comunque cercare quel codice che permette il caricamento post-accettazione cookie.

      Elimina
  7. Ciao Ernesto, io ho caricato il tuo plugin sui miei blog la settimana scorsa, ma oggi dopo un week end fuori casa, non mi escono più su nessuno dei 3 blog. Come mai?

    RispondiElimina
    Risposte
    1. Perché non li apricon una finestra in Incognito. Dopo la prima volta con lo stesso browser il banner si vedrà solo dopo un anno, guarda qui
      http://i.imgur.com/ddDUiCP.png
      Sono stanco di rispondere a questi commenti tutti uguali :)
      Questo è veramente l'ultimo :))
      @#

      Elimina
  8. Ciao,
    su Tumblr come ci si regola?
    È il caso di inserire qualcosa anche lì?

    RispondiElimina
    Risposte
    1. Mi spiace ma non ho idea se su Tumblr si possa accedere all'Editor del Tema. Se è possibile il principio è lo stesso per tutte le pagine HTML e puoi incollare il codice sopra alla riga < body > come specificato
      @#

      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.