[Tips] Cookie Law - Tutorial per inserire il banner per l'accettazione dei cookie

Ciao ragazze, oggi post un pò diverso dal solito e .... in un certo senso per gli addetti ai lavori.

In questi giorni tra le blogger, e nella blogsfera in generale, non si fa che parlare della nuova normativa fissata dal Garante della Privacy per la protezione dei dati personali, in fatto di privacy e utilizzo dei cookies. Dal prossimo 2 giugno infatti, sarà obbligatorio per tutti i blog e i siti internet in generale informare gli utenti che nel sito che stanno visitando vengono utilizzati i cookies per finalità di profilazione e marketing.

Questa nuova normativa ha messo nel panico molte persone, quindi ho pensato di dare una mano a chi proprio non si è mai addentrato nel mondo delle modifiche dei codici html.

Quanto vi sto per mostrare è utilizzabile da chi ha un blog su piattaforma BLOGGER, purtroppo non sono in grado di aiutare chi invece ha il suo piccolo spazio virtuale su piattaforma wordpress. Posso però consigliarvi di dare uno sguardo a questo link dove è spiegato molto bene.

Non mi addentro nelle varie spiegazioni di cosa siano i cookies e a cosa servano perchè in rete trovate moltissimi vademecum a riguardo, stilati da persone tecnicamente molto più preparate della sottoscritta; ad esempio potete dare uno sguardo a quanto vi spiega QUI in modo molto semplice ma esaustivo Ernesto Tirinnanzi.

E sempre dalle pagine del blog Idee per computer ed Internet ho tratto la lista che vedete qui sotto dove sono riassunte le azioni e le informazioni che si rendono necessarie per non incorrere in salate sanzioni (si parla di multe che partono da 5.000 euro!) e non contravvenire alle disposizioni del Garante della Privacy:

1. Quando si accede allo Home o a qualunque pagina del sito dovrà essere visibile un banner in cui sia indicato chiaramente che il sito utilizza i cookie
2. Si dovrà anche indicare che il sito consente anche l'invio di cookie da terze parti ossia installati da un sito diverso da quello che si sta visitando. (Per esempio i cookie di Facebook se fossero presenti dei plugin di quel social o i cookie di Google per la pubblicità mirata)
3. Ci dovrà essere un collegamento a una pagina che dia informazioni più dettagliate in materia dove sia possibile negare il consenso direttamente o collegandosi ai vari siti per i cookie di terze parti
4. Dovrà essere inoltre presente l'indicazione che proseguendo con la navigazione si intende aver accettato l'uso dei cookie.
5. Per tener conto del consenso dell'utente al gestore del sito è consentito di utilizzare un cookie tecnico per non mostrare il banner durante le visite successive dello stesso utente.
6. L'informativa estesa sull'utilizzo dei cookie deve essere linkabile in ogni pagina del sito (per esempio potrà essere inserita in un menù presente in tutte le pagine).

Prima di mostrarvi passo passo come modificare l'html per creare il banner devo anche dirvi che, se il vostro blog non ha servizi esterni e diversi da quelli offerti da google, e se usate uno dei modelli di blogspot, vi basterà attivare la navbar e il bannerino comparirà in automatico.

Per attivare la navbar entrate in blogger e andate su Layout.

In alto a destra troverete la casellina con la scritta NAVBAR, cliccate su modifica.

Vi si aprirà una schermata come quella che vedete qui sotto da cui potrete scegliere il tipo di visualizzazione che più si adatta al vostro blog, e che volete dare alla vostra navbar.

Una volta scelto il colore della navbar cliccate su tasto salva e il gioco è fatto! Chiunque entrerà nel vostro blog vedrà un banner simile a questo qui sotto.

Se però nel vostro blog usate widget o dei plug in esterni a google, tipo Facebook o pubblicità diverse da Adsense, questa soluzione non è sufficiente.

Si renderà necessario agire sul codice html del vostro blog per creare un banner ad hoc e una pagina dove andrete a scrivere la normativa per esteso.

Vediamo ora come fare, passo passo, a modificare il codice html per creare il banner che comparirà sul vostro blog.

Innanzitutto ricordate di salvare il template del vostro blog, così se farete qualche errore o qualche pasticcio potrete sempre fare marcia indietro  ripristinare tutto come era prima di mettere mano ai codici.

Andate su Modello e poi Modifica HTML.

Una volta entrati nel codice premete ctrl+f per far comparire il SEARCH, ovvero la barretta in alto a destra dove potrete scrivere il testo da ricercare.

A questo punto vi posizionate nella casella di ricerca e scrivete </body> per ricercare il tag che ci serve.

Una volta che il sistema lo avrà trovato dovrete andare a incollarvi al di SOPRA questo codice 

<!-- Codice barra dei 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; 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:#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 cookie di profilazione e consente invio degli stessi a terze parti. Proseguendo nella navigazione e accedendo ad altre aree del sito o selezionando un elemento dello stesso automaticamente presterete il vostro consenso per poter usare i cookie.',
                                         'OK', '+Info', 'http://www.qui_inserite_il_link_alla_pagina_con_il_testo_esteso.html');
    });
    //]]>
  </script>
  <!-- Codice barra dei cookie - Fine -->

Dovrete sostituire il link in rosso con il link alla pagina dove avrete riportato per esteso il testo della Privacy/Policy del vostro blog. Le scritte in blu si possono modificare a vostro piacimento o lasciare invariate.

Il risultato sarà un banner come questo qui sotto.

Arrivati a questo punto avete finito :)

Se invece volete fare delle personalizzazioni al banner, come ad esempio cambiare colore allo sfondo, piuttosto che al testo, bisogna agire ancora sul codice html. Fatemi sapere se vi interessa, in caso posso fare un altro piccolo tutorial, ne sarei molto felice.

Spero di essere stata abbastanza chiara e di avervi siegato il tutto in modo semplice e comprensibile, sono comunque a vostra disposizione se avete delle domande a riguardo.

Fatemi sapere se riuscite a implementare il banner mi raccomando! E fatemi anche sapere se questo tipo di post vi interessa.

Baci baci