Come inserire in un Blog su Blogspot un banner per il consenso sull'uso dei cookie

Attilio Folliero, Caracas 31/12/2015

A gennaio del 2012, la Commissione Europea ha presentato un nuovo regolamento sulla privacy tendente a sostituire la direttiva in vigore, con efficacia immediata per tutti gli stati membri. In questo nuova direttiva c’è una parte che disciplina l’uso dei cookie. Quando si accede ad un sito o blog, l'utente deve avere la possibilità di dare il proprio consenso all'uso dei dati personali, includendo tra questi anche i cookie. In italia, tale direttiva è stata recepita dal Garante della Privacy il 4 giugno del 2014. Il garante ha dato un anno di tempo affinché tutti i siti web e blog che fanno uso dei cookie si adeguassero. Pertanto tale direttiva entrerà ufficialmente in vigore il 3 giugno 2015.

Cosa sono i cookie?

Prima di spiegare come fare per mettersi in regola, occorre capire cosa sono i cookie. I cookie, sono dei piccoli file creati dai siti web visitati al fine di memorizzare le informazioni di navigazione del visitatore, ad esempio i dati del profilo, preferenze sulla lingua ecc. Esistono due tipi di cookie: i cookie proprietari che vengono impostati dal dominio del sito che si sta visitando; i cookie di terze parti, che provengono da altri domini incorporati nel sito che si sta visitando. Questi cookie memorizzano i dati di navigazione per fornirli ad esempio agli investitori pubblicitari al fine di mostrare gli annunci più pertinenti (tipo le pubblicità di google, facebook, etc).

Qual è il problema? Quando si visita una pagina web, spesso automaticamente si scaricano dei cookie nel proprio computer. La nuova direttiva europea serve a mettere un freno all’uso dei cookie, non ammettendo più il consenso tacito o passivo. In sostanza, d'ora in poi un utente che accede ad un qualsiasi sito deve essere innanzitutto informato su cosa sono i cookie, che tipi di cookie utilizza il sito visitato e quindi deve poter dare il proprio consenso all'uso dei cookie.

In sostanza quando un utente accede ad un sito o blog deve apparire un banner che lo avviso che il sito o blog utilizza i cookie e quindi se decide di continuare la navigazione deve accettare l'uso dei cookie. Pertanto, l'utente su questo banner deve trovare almeno due pulsanti, uno che permetta l'accesso ad una pagina informativa ed un pulsante OK per l'accettazione.

Sanzioni

Il Garante della Privacy ha previsto sanzioni piuttosto salate per quei webmaster che non si adegueranno: da un minimo di 6.000 euro ad un massimo di 36.000 euro in caso di omessa informativa e di una multa da 10.000 a 120.000 euro nel caso in cui venga effettuato l'impianto di cookie di senza l'autorizzazione degli utenti.

Come fare per mettersi in regola?

Detto questo passiamo alla parte pratica per mettersi in regola. 

Passo n. 1

Per prima cosa bisogna creare un pagina, un post denominato "Politica dei cookie" o un nome simile, in cui si spiega innanzitutto cosa siano i cookie, quindi quali cookie utilizza il sito o blog che si sta vistando, infine fornire le informazioni necessarie per disabilitare i cookie, a seconda del navigatore utilizzato.

Chi è interessato può consultare ed eventualmente copiare la mia pagina "Politica dei cookie". Ovviamente se un webmaster utilizza altri tipi di cookie deve specificarlo.

Io ho costruito questa pagina grazie alle informazioni fornite dal sito "Idee per comupter ed Internet", a cui sono arrivato grazie al Blog "Rotta su Torino" della giornalista Laura Cardia.

Passo n. 2

Una volta creata la pagina bisogna creare il banner. Il banner deve apparire non solo sulla Home Page, sulla pagina iniziale, ma su tutte le pagine perché - come tutti sanno - in un sito si può accedere da qualsiasi pagina. 

Dato che il mio è un blog è diretto non solo ad utenti di lingua italiana, ma anche ad utenti di lingua spagnola, il mio banner prevede un avviso nelle due lingue. Ovviamente, nella maggior parte dei casi è sufficiente il messaggio in lingua italiana. L'avviso è il seguente: "Questo blog utilizza i cookie per migliorare servizi ed esperienza dei lettori. Se decidi di continuare la navigazione consideriamo che accetti il loro uso. Este blog utiliza cookies para mejorar los servicios y la experiencia de los lectores. Si decide seguir navegando consideramos que aceptas su uso" Infine i due pulsanti: Info ed OK.

Foto: Inserire il codice in Modifica HTML (Editar HTML)

In Blogspot, bisogna entrare in Disegno o Modello, quindi in Modifica HTML (nella foto di di seguito è indicato con la scritta in spagnolo "Editar HTLM"). Quindi cercare la riga contenete la scritta </body> e subito sopra incollare il seguente codice. Fate molta attenzione quando inserite il codice. Non modificate assolutamente niente.  

<!-- 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:absolute;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:absolute;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:absolute;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', 'http://umbvrei.blogspot.com/2015/05/politica-dei-cookies.html');   }); //]]> </script> <!-- Codice per accettazione cookie - Fine -->

Prima di salvare, potete personalizzare il messaggio colorato di blu, o lasciarlo invariato; eventualmente potete personalizzare anche i nomi dei pulsanti colorati di rosso.e ovviamente dovete inserire il link alla pagina del vostro sito/blog in cui si sono inserite le informazioni per i vostri lettori, ossia dovete inserire il link alla pagina "Politica dei cookie" creata in precedenza.

Ulteriori informazioni

http://www.ideepercomputeredinternet.com/2015/01/barra-notifica-info-cookie-privacy.htm

_________________ 

Para un blog es muy importante que el lector haga el esfuerzo de clicar en los botones sociales "Me gusta", "Tweet”, “G+”, etc. que están por debajo o a lado. Gracias.

Per un blog è molto importante che il lettore faccia lo sforzo di cliccare sui tasti social "Mi piace", "Tweet", “G+”, etc. che trovate qui sotto o a lato. Grazie