Come mettersi in regola con l'informativa per la Privacy sul consenso all'uso dei cookie di profilazione.

Inserire su Blogger o su Wordpress una Barra di Notifica o una Schermata Iniziale per avere il consenso all'utilizzo dei cookie di profilazione secondo quando disposto dal Garante della Privacy.

Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Dico subito che nella mia carriera scolastica gli studi di diritto sono poco presenti e quindi non prendete per oro colato quello che pubblicherò in questo post per quello che riguarda gli aspetti legali. L'articolo serve soprattutto per dare degli strumenti tecnici in grado di mettere in regola i nostri siti prima del fatidico 2 Giugno 2015 quando entrerà in vigore la normativa del Garante della Privacy con l'obbligo da parte degli webmaster di avere il consenso da parte degli utenti per l'utilizzo dei cookie di profilazione. 

 

Riprendo quindi questo tema che ho già affrontato più volte con l'intento di fare una specie di riassunto di tutte le risorse che si possono mettere in campo. Il Comunicato del Garante della Privacy del Giugno di un anno fa indica le linee guida che debbono seguire gli webmaster per seguire queste direttive. Alcune di queste disposizioni sono chiare su altre invece c'è ancora del dibattito tra lo stesso ufficio del Garante e i rappresentanti del mondo del web.

SANZIONI PER CHI NON SI ADEGUA

I siti che non ottempereranno a queste disposizioni a partire dal 2 Giungo 2015 sono passibili di multe tra 10.000 e 120.0000 euro. 

I cookie sono dei file di testo che vengono inviati da un sito a un browser o a un dispositivo e che vengono poi richiamati in una visita successiva per facilitare la navigazione. Possono rimanere nel browser fino al termine della sessione oppure anche per un periodo di tempo molto lungo. C'è una differenza sostanziale tra cookie tecnici e cookie di profilazione. 

DIFFERENZA TRA COOKIE TECNICI E DI PROFILAZIONE

I cookie tecnici servono per facilitare accesso e navigazione dell'utente. Vi sarete accorti che non è necessario inserire email e password tutte le volte per accedere a un servizio Google, a Facebook o a Twitter. I cookie di profilazione servono invece a tracciare la navigazione dell'utente, per monitorarne gli interessi e le preferenze e per scoprire i suoi gusti in modo da mostrargli degli annunci pubblicitari più pertinenti quando tornerà sul sito o quando visiterà altre pagine web. Dopo una ricerca su Google di un prodotto vi sarete certo accorti che magari in un sito aperto subito dopo vi è comparso un banner con un prodotto simile a quello che avete cercato. La creazione di profili per gli utenti viene fatta appunto con i cookie di profilazione.

Se siete dei blogger userete quasi certamente Google Analytics per monitorare le pagine più viste, la frequenza di rimbalzo e altri dati. Se siete utenti di Blogger avete a disposizione la scheda delle Statistiche che funziona con dei cookie molto simili a quelli di Google Analytics. Questi cookie sono tecnici o di profilazione? Secondo il garante sono da considerarsi tecnici se servono per ottimizzare il sito da parte del titolare con i dati dei visitatori aggregati in forma anonima.

CONSENSO ALL'UTILIZZO DEI COOKIE DI PROFILAZIONE

Se avete un sito che usa i cookie di profilazione anche di terze parti siete tenuti a ottenere il consenso dei navigatori prima che questi inizino a visualizzare i vostri contenuti. Se invece avete solo cookie tecnici non siete tenuti ad avere questo consenso. In pratica se avete annunci di Google o di altro programma di affiliazione o se avete dei plugin di Facebook siete tenuti ad avere il consenso.

COME OTTENERE IL CONSENSO PER I COOKIE

Il consenso si ottiene mostrando un banner che abbia queste caratteristiche:

1. Deve contenere una informativa breve sul fatto che il sito utilizza i cookie di profilazione
2. Deve avere un sistema per dare il consenso all'utilizzo dei cookie (tipo pulsante)
3. Deve inoltre contenere un collegamento a una pagina web con una informativa più estesa sull'utilizzo dei cookie, su quelli di terze parti e su come si possa navigare senza di essi.
4. Il banner può essere eliminato solo con una azione attiva da parte dell'utente.

 

PAGINA INFORMATIVA ESTESA

La prima cosa da fare è quindi di creare una pagina con tutte le informazioni su che cosa siano i cookie, su come funzionano i cookie di profilazione e se siano presenti cookie di terze parti. Non occorre elencare tutti i cookie per esteso ma basta informare il lettore di come funzionino. Se lo webmaster gestisce in proprio dei cookie di profilazione, cosa alquanto rara per dei semplici blogger, deve anche informare il Garante della Privacy in via telematica con un pagamento di 150€ di diritti di segreteria. Questo obbligo non sarà necessario qualora il titolare del sito usi esclusivamente cookie di profilazione di terze parti perché le modalità di utilizzo di tali cookie non rientrano nel controllo del proprietario. Si deve informare gli utenti della possibilità di navigare anonimi sulle pagine del sito senza essere tracciati dai cookie.

A titolo di esempio ho pubblicato la Privacy Policy di questo sito che può essere usata come modello per quella dei vostri blog. Passiamo adesso alla installazione del banner. 

I CASI PARTICOLARI DI BLOGSPOT E DYNAMIC VIEWS

I blog gratuiti del tipo nomeblog.blogspot.com hanno un banner nella parte alta del sito con una informativa breve, con il pulsante per il consenso all'uso dei cookie e con il link a una informativa estesa.  Questo banner viene visualizzato la prima volta che si apre un sito al posto della Navbar

Pur nei limiti delle mie conoscenze giuridiche e considerando che tutti i siti di Google hanno questo banner la prima volta che si aprono, penso che i siti di Blogger che abbiano visibile la Navbar possano fare a meno di inserire il banner perché già presente. L'informativa estesa di Google è anche decisamente esaustiva così come c'è il pulsante di accettazione. C'è però il problema non secondario che la Navbar non si visualizza nella versione mobile e che quindi anche il banner per l'accettazione dei cookie non è visibile in tale versione. Si potrebbe risolvere inerendo un banner visibile solo da mobile ma a quel punto tanto vale metterlo anche per la versione desktop.

Un caso increscioso è quello dei Modelli a Visualizzazione Dinamica o Dynamic Views di Blogger su cui non mi risulta sia possibile installare un banner e quello di Google non è visibile perché manca la Navbar. Ho cercato su internet una soluzione al problema ma non ho trovato nulla di utile. Speriamo sia lo stesso Google o il Team di Blogger a risolvere il problema prima del 2 Giugno perché altrimenti gli webmaster che usano questi modelli e che abbiano la pubblicità o anche solo un plugin di Facebook si troverebbero in una situazione di illegalità.

COME INSTALLARE IL BANNER SU BLOGGER

Per aiutare i publisher che utilizzano i cookie di terze parti, Google ha messo online la pagina Cookie Choices con uno script di libero utilizzo che anche io ho adottato per la implementazione del banner. Dopo aver salvato il template andate su Modello > Modifica HTML, cercate la riga </body> e, subito sopra a questa, incollate questo codice quindi salvate il modello

<!-- 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; 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 i cookie per migliorare servizi ed esperienza dei lettori. Se decidi di continuare la navigazione consideriamo che accetti il loro uso.',
        'OK', 'Più Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
//]]>
</script>
<!-- Codice per accettazione cookie - Fine -->

Le personalizzazioni più importanti sono:

1. Il testo colorato di blu può essere personalizzato a piacere ed è l'informativa breve per i lettori che la visualizzeranno la prima volta che apriranno una pagina del nostro sito. Se non siete esperti di javascript è meglio che non usiate apostrofi o virgolette per tale testo.
2. OK e Più Info è il testo dei due bottoni per continuare la navigazione e per il link alla informativa estesa se si vogliono più informazioni in merito.
3. showCookieConsentBar prima del testo serve per mostrare una barra di notifica sul tipo di quella utilizzata da Google. Se si vuole mostrare una schermata iniziale bisogna sostituire quella stringa con showCookieConsentDialog. 
4. Se si interviene sul blocco di codice che segue la riga evidenziata di giallo si modifica l'aspetto e il colore della barra di notifica mentre se si interviene sul blocco di codice che segue la riga evidenziata di verde si modifica l'aspetto della schermata iniziale.
5. Nello specifico se si sostituiscono le due occorrenze di top con bottom si visualizzerà la barra in basso invece che in alto mentre se si mette position:absolute al posto di position:fixed la barra non si sposterà allo scroll della pagina rimanendo sempre visibile.
6. Al posto dell'URL della Policy Privacy di questo sito incollate quello della vostra pagina.
7. Il cookie tecnico introdotto avrà una durata di un anno e questo significa che una volta dato il consenso all'utilizzo dei cookie il lettore visualizzerà più banner per tutto quel periodo.

La Barra di Notifica è un banner orizzontale che si visualizza nella parte alta della pagina mentre la Schermata Iniziale mostrerà un banner in posizione più centrale. L'aspetto sarà così:

 

DISCUSSIONI ANCORA APERTE

Non è ancora chiaro se l'utente possa o meno interagire con il sito prima di aver dato il consenso all'utilizzo dei cookie. In questo senso la opzione della Schermata Iniziale sembra più rigorosa visto che si mostra con un effetto simil Lightbox mentre la Barra di Notifica pur rimanendo sempre visibile fino a che non si dà il consenso non impedisce l'interazione con i contenuti del sito.

 

Diciamo quindi che la scelta più sicura è quella della Schermata Iniziale, una scelta meno invasiva potrebbe essere quella con la Barra di Notifica sempre visibile (position:fixed) mentre la scelta della Barra di Notifica posta in basso che scompare con lo scorrere della pagina è quella meno invasiva ma più problematica. Bisogna dire però che quest'ultima opzione è proprio quella scelta da Google e quindi mi sembra difficile che una azienda così importante e con un team di avvocati sicuramente di tutto rispetto non abbia valutato bene tutte le implicazioni.

VERSIONE MOBILE

Il banner sarà visibile anche nella versione mobile se è stata abilitata su Modello > Cellulare.

 

ULTERIORE PERSONALIZZAZIONE DELLA BARRA DI NOTIFICA

Se si vuole rendere più adatta ai colori del nostro sito la Barra di notifica possiamo agire sui fogli di stile e andare su Modello > Modifica HTML. Dopo aver cliccato sulla freccetta nera intorno alla 13-esima riga per visualizzare il codice della sezione <b:skin>, si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo nuovo codice

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

Si salva il template. I codici dei colori presenti possono essere cambiati secondo i nostri gusti così come la dimensione e la famiglia di font prescelta. Al passaggio del mouse i bottoni si sposteranno di 1 pixel dando l'effetto schiacciamento. Il banner diventerà così



con i pulsanti colorati che avranno lo stesso aspetto anche da mobile.

COME INSTALLARE LA BARRA O LA SCHERMATA IN WORDPRESS

Fermo restando che probabilmente la community italiana di Wordpress avrà certamente creato un plugin appositamente per questa funzione si possono comunque usare questi stessi codici anche per installare Barra o Schermata per il consenso ai cookie pure su Wordpress. Nei Temi migliori di Wordpress ci sono gli strumenti per aggiungere codice nel footer e nell'header

 

Nel Footer Code si incolla il codice della Barra o della Schermata mentre opzionalmente in Header Code si incolla il codice della personalizzazione compreso tra i due tag <style> e </style>. Se nel nostro Tema non c'è questa possibilità il codice va incollato su Aspetto > Editor > Piè di pagina (footer.php). Mentre quello della personalizzazione va incollato su Testata (header.php). Si va quindi su Aggiorna file o Save Changes per rendere operativa la modifica. Altre risorse specifiche su questo tema sono:

1. Il Garante della Privacy e l'utilizzo del cookie -
2. Inserire Barra di Notifica e Schermata iniziale nel modello di Blogger -
3. Personalizzare la Barra di Notifica -
4. Barra di Notifica o Schermata iniziale nei siti Wordpress -
5. Come personalizzare la Schermata iniziale e rendere non cliccabili i banner -
6. Banner in stile dark con bottone e due link a info estesa e info su cookie - 
7. Banner orizzontale in alto con tre link - 
8. Avviso per i cookie con oscuramento del sito -
9. Avviso per i cookie con oscuramento e tre link -
10. Cookie Script è un servizio gratuito per la Cookie Law - 
11. Rendere anonimi gli ID di Google Analytics per far diventare tecnici i cookie analitici. 
12. Installare Barra o Schermata diverse su Mobile e Desktop una in alto e una in basso.
13. Mostrare il banner dei cookie nei blog di Blogger a Visualizzazione Dinamica.
14. Mostrare il link della cookie policy anche su mobile nei template Dynamic Views
15. Come creare una pagina esterna al blog per la Politica della Privacy

Aggiornamento: Dalla fine di Luglio Google ha inserito il banner in tutti i blog di Blogger

1. Google ha installato i banner in tutti i blog di Blogger  
2. Come linkare la nostra policy privacy nel banner di Google
3. Personalizzare il banner di Google per i blog su Blogger 
4. Personalizzare il banner di Google per i blog a Visualizzazione Dinamica 
5. Installare il banner per i cookie per i siti su Google Sites.