-->

Banner semplice per informativa cookies policy

Dal 3 giugno 2015 tutti i blog e siti italiani devono adeguarsi alla normativa europea sui cookies e anche se non è ancora del tutto chiaro come mettersi in regola, bisogna in attesa di informazioni precise fare due semplici cose, se utilizziamo cookie tecnici o di profilazioni di terze pari.
1) esporre l'informativa breve che spiega agli utenti l'utilizzo dei cookies (propri o di società terze);
2) creare una pagina di informativa estesa.

Se siete arrivati a questa pagina sicuramente saprete di cosa si stà parlado e non c'è bisogno di dilungarsi nella questione, quindi vediamo il modo più semplice per esporre un banner di informativa, in attesa di sapere come e se i banner tipo adsense dovranno essere bloccati prima dell'accettazione dei cookies.

Come inserire un banner per ottenere il consenso all'uso dei cookies?

Se siamo semplici blogger meglio optare per la soluzione più semplice messa a disposizione da google cioè la script cookiechoices andiamo sul sito e scarichiamolo.


Questo script può essere implementato in vari modi, vediomo come:

<script type='text/javascript'>

(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:8px;z-index:9999;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:9999;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';
      dismissLink.style.border = '#0066CC 1px solid';
      dismissLink.style.padding = '3px';
      dismissLink.style.color = '#0066CC';
      dismissLink.style.background = '#cfebfd';
      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;
        if (scroll) document.onscroll = _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 cookies per migliorare l\' esperienza dei lettori. Continuando la navigazione accetti il loro uso e la Privacy Policy.', 'OK', '+INFO', 'pagina_cookies_policy.html'); });
 

</script>


Lo script messo a disposizione da google è diviso in due parti ma, per comodità, questo è stato modificato in modo che sia una soluzione unica.

- La parte colorata in blu è quella che possiamo modificare per migliorare l'aspetto del banner a nostro piacere con css.

- La parte colorata in verde serve per fare aprire la pagina delle info in un altra scheda, se vogliamo farla aprire nelle stessa pagina basta eliminare questa parte.

- La parte in giallo serve per l'accettazione implicita allo scroll del mouse, cioè se và in basso nella pagina continuando a leggere il nostro post, il banner scomparirà e sarà come se avrà cliccato OK sul banner. Se non vogliamo che faccia questo basta eliminare questa parte in giallo.

- La parte in rosso è il testo che comparirà per l'informativa breve e i pulsanti.

- La parte in marrone è il link del pulsante della pagina dell'informativa estesa.



Se utilizzate blogger, ad esempio potete fare copia incolla del codice e inserirlo nel modello oppure, sopratutto se usate altre piattaforme, potete inserirlo in un file eliminando ovviamente  <script type='text/javascript'> iniziale e </script> finale prima di fare copia/incolla.
Un esempio dove potete ospitare il vostro file è Google Drive
Accedete al servizio, cliccate sul pulsante "NUOVO" e "Caricamento di file".
Dopo averlo caricato click destro su di esso e click su "Condividi" e in Avanzate / Modifica seleziona "Pubblico sul web" e "Chiunque può visualizzare".

Il link di condivisione si presenta in questo modo:

https://drive.google.com/file/d/CODICE_FILE_ID/view?usp=sharing

Quello che a noi interessa è il codice_file_id che andremo a inserire nel modo seguente per poter viasualizzare il banner.

<script src='https://googledrive.com/host/CODICE_FILE_ID' type='text/javascript'/>

Avremo ora il nostro banner personalizzato in modo semplice e veloce.

Commenti o segnalazioni su altri modi su come implementarlo sono sempre accetti.

2 commenti:

  1. Buongiorno mi chiamo Matteo.
    sto creando un sito e ho inserito il banner per i cookies e implementato i file jquery/javascript/css,tutto quello che serve, ma se compare il banner poi non sparice piu, nemmeno se accetto.

    Premetto che io lavoro in locale con le anteprime live di Brackets, mi sorge a questo punto un dubbio. Sia i bottoni like di facebook sia i cookie, per vederli all`opera e per far funzionare lo script ho bisogno di mettere il mio sito online su un dominio?

    Altrimenti non saprei proprio come risolvere questo problema.

    grazie in anticipo

    RispondiElimina
    Risposte
    1. ciao Matteo, non saprei dirti in cosa sbagli senza vedere il codice ma, se stai creando il sito offline ed hai messo anche il file javascript del banner cookie in locale, dovrebbe funzionare ma, dipende dal browser che usi, per essere certo che funzioni devi metterlo online ovviamente. Comunque spesso le anteprime dei programmi editor non combaciano del tutto con quelle dei browser, quindi il file della pagina creata devi visualizzarla con il browser e fare le modifiche di conseguenza, prova a vedere aprendo la pagina con firefox, dovrebbe funzionare anche offline, altrimenti c'è qualche errore nel codice

      Elimina
Posta un commento

Inserite il vostro nick name se volete una risposta altrimenti non si saprà a chi rispondere. Se inserite link verrà considerato spam e il commento non pubblicato.