Come personalizzare il banner dei cookie di Blogger

Come personalizzare il banner per i cookie mostrato nei blog di Blogger mantenendo lo stile e modificando uno o più degli altri elementi: messaggio, link alla policy cookie, testo bottoni, posizione in basso.

A fronte di un commento ricevuto ieri ho pensato di riprendere in mano la questione del banner per l'accettazione dei cookie a cui ho dedicato molti post. A chi non sapesse di cosa stia parlando consiglio di leggersi l'articolo su cosa prescrive il regolamento del Garante della Privacy e su come implementare le personalizzazioni del Banner visibile a chi per la prima volta accede a un sito.

Tutti i blog su Blogger hanno un banner nativo creato appositamente da Google con due pulsanti OK e Ulteriori Personalizzazioni. Il lettore che clicca su OK accetta l'uso dei cookie e nasconde il banner mentre chi clicca su Ulteriori Informazioni apre la pagina di Google sulla sua Politica della Privacy.  Questo banner è sufficiente solo se si possiede un sito senza pubblicità e senza pulsanti di social network come per esempio quelli di Facebook. Infatti anche la sola presenza di un bottone del Mi Piace permette a Facebook di profilare gli utenti che accedono alla pagina web e che quindi dovrebbero essere informati di questo.

Per mettersi in regola bisogna quindi creare una pagina statica della Policy Cookie del nostro sito con un elenco dei cookie di profilazione presenti. Per avere una idea di come procedere potete consultare la pagina di Informazione sui Cookie che ho creato per questo sito e eventualmente usarla come modello.

Come secondo passaggio dovremo sostituire il link alla Policy Cookie di Google con quello alla nostra pagina. In seguito vedremo passo per passo tutte le altre possibili personalizzazioni che partono dal presupposto di lasciare invariato lo stile del banner. Se invece si vuole cambiar anche colore e stile di banner e bottoni bisognerà seguire il post linkato a inizio articolo.

COME MODIFICARE SOLO L'URL DEL LINK DELLA POLICY COOKIE

Si va su Modello -> Modifica HTML e si cerca la riga </head> quindi, subito sopra, si incolla questo semplicissimo codice

<script type='text/javascript'>
cookieOptions = {link:"http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html"};
</script>

dove al posto dell'URL della Pagina di Informazioni sui Cookie di questo sito dovete mettere l'indirizzo della pagina statica che avete appositamente creata. Per testare il funzionamento aprite una pagina in Incognito (Chrome) o  Anonima (Firefox) e cliccate su Ulteriori Informazioni

in modo da controllare che si apra effettivamente la pagina dei cookie che avete pubblicato.

COME MODIFICARE IL TESTO DEI PULSANTI

Solo la modifica al link della Pagina di Informazioni sui Cookie è essenziale mentre il resto è solo una questione di gusti. Se vogliamo modificare il testo dei bottoni possiamo usare questo script

<script type='text/javascript'>
cookieOptions = {close: "Accetto", learn: "+Info", link:"http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html"};
</script>

da incollare sempre sopra a </head> dove oltre al link della Policy Cookie può essere personalizzato il testo dei due bottoni. Si può modificare anche il testo di uno soltanto (close o learn)

COME MODIFICARE IL TESTO DEL MESSAGGIO

Il testo del messaggio inserito di default da Google recita così:

Questo sito si serve dei cookie di Google per l'erogazione dei servizi, la personalizzazione degli annunci e l'analisi del traffico. Le informazioni sul tuo utilizzo del sito sono condivise con Google. Se prosegui la navigazione acconsenti all'utilizzo dei cookie.

in cui si parla solo dei cookie di profilazione di Google. Se come succede di solito usiamo anche script di Facebook, Twitter, Instagram, Pinterest, ecc è più giusto parlare di cookie in senso generico. Per modificare oltre ai parametri precedenti anche il messaggio si può usare questo codice

<script type='text/javascript'>
cookieOptions = {msg: "Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Le info sulla tua navigazione sono condivise con queste terze parti. Navigando nel blog accetti l'uso dei cookie.", close: "Accetto", learn: "+Info", link:"http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html"};
</script>

da incollare sempre sopra a </head> in Modello -> Modifica HTML. Ovviamente il messaggio colorato di blu può essere personalizzato. Ricordo di non usare apostrofi se non sapete come impedire che vengano letti come fossero codice javascript. Il risultato è il seguente:

COME POSIZIONARE IL BANNER NELLA PARTE BASSA DELLA PAGINA

Vediamo adesso come spostare il banner nella parte bassa della pagina. Il posizionamento nella parte alta spesso copre importanti contenuti come l'Intestazione e/o il Menù. Ferme restando le modifiche mostrate in precedenza il codice da usare viene così integrato

<script type='text/javascript'>
cookieOptions = {msg: "Questo sito usa i cookie di terze parti con cui sono condivise le info su di te. Navigando nel blog accetti la nostra politica dei cookie.", close: "OK", learn: "+Info", link:"http://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html"};
</script>
<style>
#cookieChoiceInfo {
top: auto !important;
bottom: 0 !important;
}
</style>

Dopo aver salvato il modello il risultato sarà il seguente

con il banner visibile in basso e fluttuante durante lo scorrimento della pagina. Per fare in modo che questo banner risulti visibile e personalizzato anche nella versione mobile dovete andare su Modello -> Cellulare, cliccare nella ruota dentata in basso, mettere la spunta sul Sì. Mostra il modello per cellulari nei dispositivi mobili per poi scegliere Personalizza tra i modelli disponibili.