Installare Banner e Schermata Iniziale per consenso ai cookie diversi per mobile e per desktop.

Come visualizzare Schermata Iniziale o Barra di Notifica diverse nella versione mobile e nella versione desktop oppure una il alto e l'altra in basso.

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 -

A partire dal 2 Giugno diventerà operativa la disposizione del Garante della Privacy che obbliga gli webmaster ad ottenere il consenso preventivo per i cookie da parte dei lettori dei loro siti. Quindi mancano ancora pochi giorni per mettersi in regola con questa direttiva della Comunità Europea.

Per gli utenti di Blogger ma in definitiva anche per quelli delle altre piattaforme sono disponibili due opzioni vale a dire la Schermata Iniziale e la Barra di Notifica. L'accettazione esplicita dei cookie da parte dei navigatori deve essere mostrata sia nella versione desktop sia in quella per dispositivi mobili. E qui cominciano le problematiche che poi non sono neppure troppo complicate. 

In sostanza a seconda del Modello o del Tema del nostro sito potremmo ritenere migliore la Schermata Iniziale per il mobile ma non per il desktop o viceversa. O ancora si potrebbe ritenere opportuno inserire una informativa su desktop piuttosto analitica ma che però su mobile potrebbe rivelarsi troppo lunga e nascondere tutto il layout. Ma non finisce qui. Su desktop si potrebbe preferire una barra di notifica in alto mentre su mobile si potrebbe ritenere migliore una barra di notifica in basso e mi fermo qui con le ipotesi.

COME MONITORARE L'ASPETTO DEL SITO SU MOBILE

Innanzitutto gli utenti di Blogger è bene che controllino come si visualizza il loro sito con la maggior parte dei dispositivi sia desktop sia mobili. Ricordo che per far questo dobbiamo aggiungere la stringa ?m=1 all'URL della Homepage o di un post o di una pagina statica. Nessuno di noi possiede tutti gli smartphone e i tablet disponibili sul mercato dobbiamo quindi usare un tool per verificare quale sia l'aspetto del sito con la maggior parte di essi. Dopo aver aggiunto all'URL la stringa qui sopra si accede a Screenfly con una scheda di Navigazione Anonima o In Incognito e si incolla l'URL così modificato. Si clicca su Go e si scelgono i dispositivi che ci interessano

Si può monitorare anche l'aspetto del sito con varie risoluzioni desktop. In questo contesto ci interessa vedere come si visualizza il banner o la schermata per accettazione dei cookie.

COME INSERIRE BANNER E SCHERMATE DIVERSE SU MOBILE E DESKTOP

Si può quindi decidere di visualizzare una Barra di Notifica o una Schermata Iniziale diverse da desktop e mobile. Il codice generico da usare è il seguente:

<b:if cond='data:blog.isMobile'>
Codice di Schermata o Banner da visualizzare da Mobile
</b:if>
<b:if cond='data:blog.isMobile == "false"'>
Codice di Schermata o Banner da visualizzare da Desktop
</b:if>

oppure quest'altro che è più elegante

<b:if cond='data:blog.isMobile'>
Codice di Schermata o Banner da visualizzare da Mobile
<b:else/>
Codice di Schermata o Banner da visualizzare da Desktop
</b:if>

dove si devono ovviamente incollare i codici delle soluzioni preferite. A titolo di esempio passo a incollare il codice necessario per mostrare una Barra di Notifica in stile dark con tre link da visualizzare nella parte alta della pagina per la versione Desktop e una Barra di Notifica con due link da visualizzare in basso per la versione Mobile.

<b:if cond='data:blog.isMobile'>
 <!-- Codice per accettazione cookie Mobile - Inizio -->
<style>
/* CSS Accettazione Cookie */
div#cookieChoiceInfo {
background-color: #1fe0c9 !important;
color:#f72c1d;
min-height: 20px;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo &gt; a:nth-child(2),a#cookieChoiceDismiss {
color: #eee;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fedede&#39;, endColorstr=&#39;#e50909&#39;,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 &gt; a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#fff;
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; bottom: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;' +
          'bottom: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 = 'center';
      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 di profilazione di terze parti. Se continui la navigazione consideriamo che accetti il loro uso.',
        'OK', '+Info', 'http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html');
  });
//]]>
</script>
<!-- Codice per accettazione cookie Mobile - Fine -->
<b:else/>
<!-- Accettazione Cookie con Barra per Desktop - Inizio -->
<div id='banner_cookie'>
Questo sito utilizza cookie per funzionalità proprie e per inviarti pubblicità in linea con le tue preferenze.<br/>
Se continui nella navigazione o clicchi su un elemento della pagina accetti il loro utilizzo. <a href='javascript:void(0);' onclick='var expiration = new Date(); expiration.setTime(expiration.getTime() + (60000*60*24*365)); setCookie(&apos;info_cookie&apos;,&apos;1&apos;,expiration,&apos;/&apos;);document.getElementById(&apos;banner_cookie&apos;).style.display=&apos;none&apos;;'><b>OK. Accetto i cookie</b></a> <br/> Se vuoi saperne di più o negare il consenso leggi questa <a href='http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html' target='_blank'>Informativa estesa</a> sui cookie <br/> Puoi anche <a href='http://www.ideepercomputeredinternet.com/2012/10/cookie-browser-chrome-firefox-ie-eliminare.html' target='_blank'>eliminare i cookie</a> già presenti nel tuo browser.
</div>
<!-- Stile del Banner -->
 <style>
#banner_cookie {
display: none;
z-index: 99999;
position:fixed;
left:0px;
right:0px;
top:0px;width:100%;
min-height:80px;
padding:5px;
background: #000; /* Colore di sfondo */
color:#F2F97F;  /* Colore del testo */
line-height:20px;  /* Interlinea */
font-family:Georgia; /* Famiglia di font */
font-weight:bold;
font-size:13px; /* Dimensione font */
text-align:center;
}
#banner_cookie a:nth-child(2),#banner_cookie a:nth-child(3),#banner_cookie a:nth-child(4), #banner_cookie a:nth-child(6) {
padding:2px;
background:#f72c1d; /* Colore sfondo bottoni */
border-radius:4px;   /* Arrotondamento */
 text-decoration:none;
}
#banner_cookie a {
color: #1FE0C9; /* Colore testo bottoni */
font-weight:bold;  /* Grassetto */
text-decoration: none;
}
#banner_cookie a:hover {
color:#FFF; /* Colore testo bottoni passaggio cursore */
}
#banner_cookie a:nth-child(2):hover,#banner_cookie a:nth-child(3):hover,#banner_cookie a:nth-child(4):hover, #banner_cookie a:nth-child(6):hover {
position: relative;
top:1px; /* Spostamento di 1 pixel al passaggio del mouse */
 left:1px;
}
</style>
<!-- Script dei cookie -->
<script type='text/javascript'>function setCookie(name,value,expires,path,domain,secure){document.cookie=name+&quot;=&quot;+escape(value)+((expires==null)?&quot;&quot;:&quot;; expires=&quot;+expires.toGMTString())+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+((secure==null)?&quot;&quot;:&quot;; secure&quot;)}function getCookie(name){var cname=name+&quot;=&quot;;var dc=document.cookie;if(dc.length&gt;0){begin=dc.indexOf(cname);if(begin!=-1){begin+=cname.length;end=dc.indexOf(&quot;;&quot;,begin);if(end==-1)end=dc.length;return unescape(dc.substring(begin,end))}}return null}function delCookie(name,path,domain){if(getCookie(name)){document.cookie=name+&quot;=&quot;+((path==null)?&quot;&quot;:&quot;; path=&quot;+path)+((domain==null)?&quot;&quot;:&quot;; domain=&quot;+domain)+&quot;; expires=Thu, 01-Jan-70 00:00:01 GMT&quot;}}</script>
<!-- Gestione barra dei cookie -->
 <script type='text/javascript'>
var ckeck_cookie = getCookie(&quot;info_cookie&quot;);
if (ckeck_cookie != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + (60000*60*24*365));
setCookie(&quot;info_cookie&quot;,&quot;1&quot;,expiration);
document.getElementById(&quot;banner_cookie&quot;).style.display=&quot;block&quot;; }
</script>
<!-- Accettazione Cookie Barra Desktop - Fine -->
</b:if>

Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga </body>. Si salva il template e il risultato ottenuto per questo sito è il seguente

Per modificare le due versioni del Banner consultate i due articoli sulla Personalizzazione della Barra di Notifica e sulla Barra di Notifica con tre link in stile dark. Si possono naturalmente anche modificare le posizioni sostituendo top con bottom o viceversa come illustrato nei post.