18 maggio 2015

Inserire banner per l'informativa cookies su Blogger con jQuery CookieBar

web-developer cookies In un articolo precedente abbiamo illustrato una modalità di inserimento del banner dell'informativa cookies su Blogger.

Ora che la scadenza del 2 giugno si avvicina, e le multe sono salatissime, ci siamo chiesti: ma sarà sufficiente? Il dubbio, che non siamo ancora riusciti a dissipare pur leggendo veramente tante fonti, riguarda i cookies di Google Analytics: cookies assimilabili ai cookies tecnici o cookies di profilazione?


Abbiamo letto alcuni articoli che come soluzione indicavano di attivare la navbar di default di Blogger: compare in automatico un banner con l'informativa breve, ma il funzionamento sembra simile alla barra attivata con cookiechoices.

Siamo andati alla ricerca di un'alternativa in grado di assicurare che i cookies di Analytics vengano creati nel dispositivo del visitatore solo dopo il suo esplicito consenso.

Tra le diverse soluzioni trovate in rete, abbiamo provato questa http://www.primebox.co.uk/projects/jquery-cookiebar/ che potete vedere ora attiva sul blog. Scaricato il file .zip abbiamo personalizzato le opzioni di default del file jquery.cookiebar.js adattandole alle nostre esigenze (le opzioni sono commentate in modo molto chiaro) e gli stili del file jquery.cookiebar.css

I passi da seguire per inserire questa barra su Blogger sono:
  • caricare il files .js su un server esterno (per esempio AlterVista o GoogleSites);
  • in Modello, Modifica HTML, prima della chiusura del tag </head> scrivere questo codice, personalizzandolo dove serve:
<script type="text/javascript" src="http://example.com/jquery.cookiebar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $.cookieBar();
}); 
   if(jQuery.cookieBar('cookies')){
        // codice di Google Analytics o altro codice da inserire nella pagina in modo condizionato
    }
</script>

Il file .js richiede la libreria jQuery, quindi, se non è già presente in head, occorre includerla prima dello script.

  • in Designer modelli, Layout, nella sezione Avanzato -> Aggiungi CSS inserire il contenuto del file jquery.cookiebar.css che può essere personalizzato a piacere:
#cookie-bar {
background-color: #585858; /* per IE8 */
background-color: rgba(88, 88, 88, 0.8);
*background-color: #585858; /* per IE7 */
height:auto;
min-height:28px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 16px;
line-height: 32px;
color:#fff;
text-align:center;
padding:20px;
box-sizing: border-box;
}
#cookie-bar.fixed {
position:fixed;
top:0;
left:0;
width:100%;
}
#cookie-bar.fixed.bottom {
bottom:0;
top:auto;
}
#cookie-bar p {
margin:0;
padding:0;
}
#cookie-bar a.cb-enable {
color:#585858;
border-radius:6px;
text-decoration:none;
padding:6px;
margin-left:8px;
}
#cookie-bar .cb-enable {
background:#fff;
}
#cookie-bar .cb-enable:hover {
background:#fff;
}
#cookie-bar .cb-disable {
background:#fff;
}
#cookie-bar .cb-disable:hover {
background:#fff;
}
#cookie-bar a.cb-policy {
color:#fff;
font-weight:bold;
text-decoration: underline;
}
#cookie-bar a.cb-policy:hover {
text-decoration:none;
}

Se avete inserito l'ID di proprietà di Google Analytics nelle impostazioni del blog, non dimenticatevi di rimuoverlo.

Verificate anche che il modello che avete scelto per i dispositivi mobile preveda le personalizzazioni che avete effettuato.

Non resta (si fa per dire) che scrivere l'informativa estesa creando un'apposita pagina.

Per maggior sicurezza, in attesa che si diradi la nebbia, abbiamo disabilitato anche i pulsanti per la condivisione in ogni articolo... abbiamo esagerato?


Link utili:


9 commenti:

  1. E invece su Website x5 come si inserisce questo metodo? :) grazie!

    RispondiElimina
    Risposte
    1. Ciao :)

      Puoi allegare i file .js e .css al progetto: Passo 4 - Statistiche, SEO e Codice - Esperto - File allegati al codice, flaggando "Collega il file".

      Sempre nella stessa sezione, "Prima della chiusura del tag HEAD" inserisci lo script richiamato al documet ready.

      Se hai inserito da programma il Tracking ID per GA, ovviamente dovrai rimuoverlo.

      Elimina
  2. Vi ringrazio davvero tanto per questo articolo e per quello precedente del 20 dicembre scorso. Mi domando una cosa: per un blog con banner pubblicitari, il discorso cambia? Bisogna apportare ulteriori modifiche alle vostre già utilissime istruzioni?

    RispondiElimina
    Risposte
    1. Ciao Jeff,

      grazie a te per il feedback.

      Purtroppo rispetto a questo non abbiamo le idee chiare: non abbiamo approfondito l'argomento perché non abbiamo pubblicità né sul blog né sul sito.
      Prova a leggere, se non lo hai già fatto, questo documento: andrea.s3.iubenda.com/gkHRyw3pg6/GUIDA-COOKIES.pdf

      Se devi implementare qualcosa di più selettivo, prova a guardare queste soluzioni:
      sitebeam.net/cookieconsent-v1/ (versione 1)
      silktide.com/tools/cookie-consent/
      www.cookiebot.com (a pagamento)

      Non le abbiamo provate, quindi non ti sappiamo dire se siano di semplice implementazione su Blogger.

      Elimina
  3. Non mi è chiara la questione delle stringhe condizionate? Potresti fare un esempio ed inoltre questo significa che tutti i cookies saranno automaticamente rilasciati ad eccezione di quelli inseriti nella stringa condizionata?

    RispondiElimina
    Risposte
    1. Ciao Scomodo :)

      Sì, gli script inseriti all'interno della condizione if verranno eseguiti solo se l'utente clicca sul pulsante di "accettazione".

      Nell'articolo c'è già l'esempio con questo commento al suo interno:

      // codice di Google Analytics o altro codice da inserire nella pagina in modo condizionato

      Al suo posto, ovviamente, dovrai inserire lo/gli script che vuoi condizionare.

      Elimina
  4. ciao, se volessi che il banner comparisse a fondo pagina invece che in cima come posso fare? grazie

    RispondiElimina
    Risposte
    1. Ciao Erika,
      puoi ottenere questo in diversi modi: puoi cambiare l'opzione bottom: false, in bottom: true, nel file javascript che hai scaricato oppure modificare il richiamo della funzione al document ready in questo modo

      $.cookieBar({
      bottom: true
      });

      Elimina