Pubblicato il 29/09/16 - aggiornato il  | 14 commenti :

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

banner-cooki-blogger

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)

modificare-testo-bottoni-banner-cookie


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:

personalizzare-messaggio-banner


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

banner-posizionato-basso-pagina

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.


14 commenti :

  1. Grazie, per il tuo post. Proverò con il mio blog e continuerò a seguire i tuoi preziosi consigli.

    RispondiElimina
  2. Ciao, sono onnipresente :)
    Quindi consigli di togliere il precedente script/css sui cookie che avevi creato tempo fa con un lungo codice html? In tal caso devo cercare di capire dove inizia e dove finisce il codice. Penso sia più sensato perché attualmente mi appaiono due banner cookie: il tuo vecchio e quello di Google

    RispondiElimina
    Risposte
    1. Occorre togliere tutto il codice precedente per poi aggiungere solo quello necessario seguendo questo post che è quello definitivo sul tema
      http://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      @#

      Elimina
  3. Ernesto tra i vari link da mettere nella pagina statica (io copierei la tua) devo linkare anche la pagina della Policy Cookie di Google o è già inclusa tra i tuoi link?
    Grazie.

    RispondiElimina
  4. Mi pare che la Policy di Google sia già presente al punto 4). E un link vecchio di tre anni quindi non si se apre la pagina giusta. Penso di sì. Sono al cell e non posso controllare al momento
    @#

    RispondiElimina
  5. fatto e funziona. una curiosita esiste anche il modo per modificare la dimensione dei caratteri del banner della policy ?

    RispondiElimina
    Risposte
    1. Segui le istruzioni di questo post
      https://www.ideepercomputeredinternet.com/2015/08/banner-cookie-blogger-google-personalizzare-desktop-mobile.html
      Puoi personalizzare le dimensioni del testo su desktop e su mobile. La riga su cui intervenire è
      font-size:13px !important;
      per poi modificare il 13px in un altro valore
      @#

      Elimina
  6. sempre io con i miei dubbi.
    ridotta dimensione banner tranne che per "MAGGIORI INFORMAZIONI" e "ACCETTO" che rimangono inalterati. poi ci sarebbe una cosa che non capisco. Nel mio testo prima c'è "accetto" e poi "maggiori informazioni" (tra l'altro in minuscolo) e non il contrario.
    sicuramente c'è un motivo. mi sapresti dire qual'è ?

    grazie ancora
    cookieOptions = {msg: "Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookies installati da terze parti autorizzate, rispettando la privacy dei tuoi dati personali e secondo le norme previste dalla legge. Navigando nel blog accetti la politica dei cookies.", close: "Accetto", learn: "Maggiori Informazioni"

    RispondiElimina
  7. Basta che tu sostituisca
    close: "Accetto", learn: "Maggiori Informazioni"
    con
    learn: "MAGGIORI INFORMAZIONI", close: "ACCETTO"
    Sei tu che scegli cosa deve venite prima e cosa dopo e cosa deve essere in maiuscolo e in minuscolo
    @#

    RispondiElimina
  8. Come sempre il migliore sito dove trovare utili informazioni anche per chi è alle prime armi ..... TOP TOP!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy