Pubblicato il 28/07/15e aggiornato il

Come linkare la nostra Policy Privacy nel banner per i cookie di Blogger o come eliminarlo.

Come disattivare il banner di Blogger o come personalizzarlo linkando la nostra Pagina con la Policy Cookie al posto di quella generica di Google. Si possono anche modificare colori e testo del messaggio.
Da poche ore in tutti i blog di Blogger sono stati implementati i banner di Google per la cosiddetta Cookie Law come ho già illustrato in un precedente articolo introduttivo. Questo banner ha il grande merito di essere visto anche nei blog a Visualizzazione Dinamica ma ha il difetto di linkare la pagina della Informativa Estesa di Google e non la nostra. 

Molti di noi avevano usato soluzioni diverse da questa proposte da Google nel suo Cookie Choices come del resto avevo fatto anche io e adesso si trovano con ben due banner mostrati ai lettori per la accettazione dei cookie. A questo punto si possono si possono scegliere sostanzialmente due tipi di soluzione. O si sceglie di lasciare il banner di Google e si personalizza oppure si decide di disattivarlo.

COME DISATTIVARE IL BANNER DI BLOGGER


Se avete una soluzione per i cookie che vi soddisfa pienamente e che magari avete pure pagato allora la scelta migliore è la prima cioè quella di disattivare il javascript di Google. Questo per fortuna è semplicissimo. Si va su Modello > Modifica HTML, si cerca la riga </head> e subito sopra si incolla questo semplicissimo javascript

<script type='text/javascript'>
cookieChoices = {};
</script>

Si salva il modello e non si vedrà più il banner di Google ma solo l'altro cha avevamo implementato. Questo a meno che l'altro non sia stato realizzato proprio con lo script di Google cioè che abbia la funzione "cookieChoices" perché in questo caso non si vedrà neppure quello.

MODIFICARE MESSAGGIO E LINK DEL BANNER


Blogger ci ha indicato il modo come modificare messaggio, testo dei bottoni e link anche se lo ha fatto in un modo che solo in pochissimi credo che abbiano compreso e questo purtroppo non è cosa nuova. I tecnici di Blogger si devono rendere conto che non tutti i loro utenti sono ingegneri informatici. Comunque dopo un paio di test sono riuscito a venire a capo della questione. Andate sempre su Modello > Modifica HTML, cercate la riga </head> e, subito sopra, incollate

<script type='text/javascript'>
cookieOptions = {msg: "Questo sito usa i cookie di terze parti per migliorare i servizi e analizzare il traffico. Navigando nel blog accetti la politica dei cookie.", close: "OK", learn: "+Info", link:"https://goo.gl/wuWQ2h"};
</script>

con le parti colorate di blu che possono essere modificate a piacere e l'ultima di queste è il link alla Policy Privacy che nel mio caso è una pagina esterna al blog.

personalizzazione-banner


SCRIPT DEI COOKIE PRESENTI IN TUTTI I SITI


Se lasciamo il banner di Google potremo eliminare dai nostri modelli i javascript utilizzati per i Cookie visto che in tutti i blog di Blogger è stato inserito uno script in modo automatico. Infatti basta aggiungere all'URL del dominio questa stringa /js/cookiechoices.js per aprire una pagina con il javascript che anche io avevo utilizzato per la creazione dei banner.  

PERSONALIZZAZIONE DEL BANNER


Se decidete di lasciare il banner di Google lo potete anche personalizzare nei colori. I CSS sono praticamente gli stessi di quelli che abbiamo già visto. Comunque se decidete di farlo andate su Modello > Modifica HTML, cercate la riga ]]></b:skin> e, subito sopra incollate questo codice

/* CSS Accettazione Cookie */
div#cookieChoiceInfo {
background-color: rgba(31,224,201,0.95) !important; /* Colore di sfondo con trasparenza */
color:#fff;
min-height: 20px;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > div > span.cookie-choices-text {color:#fff !important;}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1), #cookieChoiceInfo > div > a:nth-child(2) {
color: #eee;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',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 > a:nth-child(2):hover, a#cookieChoiceDismiss:hover, #cookieChoiceInfo > div > span.cookie-choices-buttons > a:nth-child(1):hover, #cookieChoiceInfo > div > a:nth-child(2):hover {
color:#fff;
box-shadow: 1px 1px 1px  #aaa;
text-shadow:0px 0px 0px #ccc;
text-decoration:none;
position: relative;
top:1px;
left:1px;
}

Con l'ultimo blocco di codice si inserisce anche una traslazione di un pixel che produce un effetto schiacciamento quando con il mouse si passa sopra a uno dei due bottoni. Prima di incollare questo codice verificate che non ce ne sia già uno simile. I codici dei colori possono naturalmente essere modificati a piacere così come il grado di opacità scelto al 95%.

visualizzazione-banner-mobile

Nei prossimi post mostrerò come si possa posizionare il banner nella parte bassa sia per la versione desktop sia per quella mobile e altre possibili personalizzazioni. Concludo ricordando che per testare il funzionamento del banner bisogna aprire il blog con una pagina in incognito e per controllare se funziona nei dispositivi mobili la pagina in incognito va aperta con il tool Screenfly.




43 commenti :

  1. Grande, lo levo subito, aspettavo questo Tuo post!!

    RispondiElimina
  2. Velocissimo :) sul tardi aggiorno, ma per la pagina con la privacy è meglio utilizzare quella che avevo creato sul blog o mi conviene farne una esterna come hai fatto tu??

    RispondiElimina
    Risposte
    1. È uguale. Ora sono al cellulare ma poi ho intenzione di linkare quella esterna nel desktop e quella del sito nel mobile
      @#

      Elimina
    2. Perfetto grazie, appena aggiornato :)

      Elimina
  3. A questo punto se gli devo linkare il mio post nel blog con la politica dei cookie più completa, elimino direttamente quella di Google. Anche perchè mi chiedo.. che necessità si avrebbe a tenere quello di google?Grazie mille Ernesto...

    RispondiElimina
    Risposte
    1. Sì, infatti, anch'io me lo chiedevo. Ma mettere il banner sopra o sotto fa qualche differenza?

      Elimina
    2. È solo un fatto estetico. Non so se sarà possibile modificare la posizione perché lo script è nei server di Blogger e quindi non è modificabile
      @#

      Elimina
  4. Grazie Ernesto. Sempre il nostro punto di riferimento. Aggiornato. Ma per i blog a visualizzazione dinamica non trovo la riga /head e quindi......

    RispondiElimina
    Risposte
    1. C'è per forza :)
      Altrimenti non sarebbe una pagina web :) Non sei abituato con i codici con quel template. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
  5. Hai ragione!!! Trovato. Aspettiamo qualche altro suggerimento per spostare il banner in basso. Grazieeeeeeeee

    RispondiElimina
    Risposte
    1. Aspetto anch'io il codice per spostare in basso il codice.

      Elimina
  6. Ottimo. Per fortuna che ho fatto una pagina unica per l'informativa :)

    RispondiElimina
  7. Ringraziamo ( !!!!! :( ) Google per i "soli" quasi 2 mesi di ritardo per aver messo a norma il suo prodotto.

    RispondiElimina
  8. Salve io ho messo il codice per modificare il banner di Google nel modello HTML come indicato, ma mi appare ancora quello originale di Google.All'inizio mi appariva quello suggerito da voi, ma adesso è ritornato l'altro. Potete dirmi il perchè? Grazie.L'ho copiato anche a mano il codice ed inserito.Il mio sito è theearthpaper.blogspot.com.

    RispondiElimina
    Risposte
    1. Si vede quello di Google. Va benissimo. Per cambiare i colori puoi usare il codice di questo post
      @#

      Elimina
    2. Grazie per la risposta, proverò a cambiare il colore del banner di Google che adesso è nero.Quindi visto che io sul blog ho solo il servizio di Google Adsense e le funzioni di blogger, tipo il pulsante +1 o il Follower Google+, va bene tenere il banner che mi ha messo Google? Per servizi di terze parti s'intende mettere il pulsante "mi piace" di Facebook, il "seguimi sui vari social network ( Facebook, Istangram, Twitter, ecc.. ) o mettere banner pubblicitari di aziende terze non collegate ad Adsense? In questo caso se ho ben capito ci vuole un'integrazione all'informativa del banner sui cookie messo da Google.
      Grazie per la risposta, e scusate per queste domande che a voi utenti di questo sito sembreranno banali, ma io non mi sono mai interessato a questi aspetti fino a ieri.
      Saluti

      Elimina
    3. Su questioni di tipo legale non sono così ferrato. Informati in qualche forum. Il mio parere generico comunque è "melius abundare quam deficere"
      @#

      Elimina
    4. Non ho intenzione di inserire servizi extra-Google in futuro nel blog, era solo una curiosità personale.Se rimango quindi solo con il blog standard di Blogger, con le funzioni del +1 e di Google+ follower e con il servizio Adsense, il banner informativo inserito da Google è quindi sufficiente, visto che in pratica utilizzo solo i suoi servizi? Posso cambiare il colore se non mi piace.
      Grazie della risposta

      Elimina
    5. Non posso prendermi la responsabilità di darti un parere "legale" su questo tema. Prova a rivolgerti a qualche forum però per come la penso io è "melius abundare quam deficere"
      @#

      Elimina
  9. Salve a tutti. Contribuisco alla discussione, portando la mia esperienza di ieri.
    Avevo implementato nei miei blog, il codice di Ernesto che consentiva di personalizzare la barra dei cookie con testo, link esterno e posizionamento in basso.
    Ieri, dopo le modifiche di Google, la barra è rimasta in basso e personalizzata con i miei colori; era cambiato solo il testo e il link che portava alla pagina di Google. Aggiungendo il codice messo a disposizione ieri da Ernesto, ho potuto modificare il testo e il link, pur mantenendo le personalizzazioni e la barra in basso...

    RispondiElimina
    Risposte
    1. io vorrei linkare entrambe le pagine, la mia con le info e quella di google, così da star tranquilla anche per i social. Ernesto diventerò di nuovo la tua stalker di commenti principale... mi sa :)

      Elimina
    2. Al momento non si possono linkare entrambe. Meglio linkare la nostra nella quale inserire un link a quella di Google per informazioni ulteriori per chi le voglia
      @#

      Elimina
    3. giusto, proverò a far così grazie. :)

      Elimina
  10. Io per il momento penso che lo toglierò. L'unica cosa che mi scoccia è che con questo potrei ripristinare la visualizzazione mobile, che ho dovuto togliere con lo script di Ernesto, che però risulta a mio parere più completo U_U

    RispondiElimina
  11. Non so come faremmo senza di te. Ho scritto il tuo codice modificando il banner di google e funziona perfettamente. Ma ovviamente nella versione mobile mi mostra quello vecchio di google e non il mio modificato. Avresti mica una soluzione? Grazie

    RispondiElimina
    Risposte
    1. Forse non hai Personalizza su Modello > Cellulare perché si dovrebbe vedere anche da mobile. Poi leggi qui
      http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
      @#

      Elimina
  12. Temevo di dover perdere ore per sistemare la questione, invece grazie alla vostra guida è stato facile e indolore. Grazie, grazie e grazie!

    RispondiElimina
  13. Salve Ernesto, inserendo il codice per la disattivazione del banner di Google, non mi fa riapparire il mio originale.

    RispondiElimina
    Risposte
    1. Non è originale :)
      Probabilmente lo avevi preso da me che a mia volta avevo utilizzato quello di Google. Ora se si disattiva quello di Google viene disattivato anche quell'altro perché hanno le funzione con lo stesso nome. Se a te piace la configurazione che hai nel blog puoi seguire copiare solo il CSS e cancellare il resto per poi seguire le istruzioni di questo post
      http://www.ideepercomputeredinternet.com/2015/07/blogger-dynamic-views-banner-customized.html
      dove al posto del CSS proposto da me inserisci quello che hai attualmente nel tuo sito
      @#

      Elimina
    2. Io forse potrei avere lo stesso problema, nel senso che tempo fa avevo seguito le tue istruzioni per personalizzare il banner, adesso però vedo quello di Google, modificandolo secondo le istruzioni in questo post non funziona, rimane sempre quello di Google. Immagino che se lo disattivo non vedrò più nessun banner, ma non riesco a capire bene le tue ultime istruzioni per Tiziana - che immagino dovrei seguire anche io.
      La cosa strana è che quando faccio "anteprima modello" vedo ancora il banner personalizzato, ma se vado a controllare con Screenfly appare quello Google recente.

      Elimina
    3. Anteprima Modello non farlo neppure che non serve a nulla. Hai detto bene devi seguire le istruzioni del commento 13.a. Segnatamente quelle di questo post
      http://www.ideepercomputeredinternet.com/2015/07/blogger-dynamic-views-banner-customized.html
      Se continui a vedere quello di Google è probabile che tu abbia inserito un testo con degli apostrofi o altri caratteri che sono stati recepiti come codice javascript
      @#

      Elimina
    4. Grazie, ho riprovato a copiare ed incollare bene sia il tuo codice che il mio link personale e adesso funziona.

      Elimina
  14. Ciao Ernesto,
    complimenti per l tuo Blog e per la precisione delle indicazioni che ci fornisci.
    Ti voglio sottoporre un problema che sto incontrando: non so se riesci a rispondermi su una questione così specifica, comunque provo.
    Io vorrei utilizzare il banner di Google personalizzandolo seguendo le tue istruzioni, ma il banner di Google sul mio blog non si vede. Uso un template personalizzato (Setiva di PBT) ma su altri blog di prova che ho il banner appare, eccome. Non riesco a capire che cosa, nel mio blog, gli impedisce di apparire.
    Ora sto usando il banner che avevi proposto tu qualche post fa, ma da Firefox non si vede. Non posso disattivare il banner di google, altrimenti disattiverei anche quello che uso adesso.
    Ti ringrazio anticipatamente e buon lavoro.

    RispondiElimina
    Risposte
    1. Prova con questa soluzione che non utilizza lo script di Google
      http://www.ideepercomputeredinternet.com/2015/05/banner-accettazione-cookie.html
      @#

      Elimina
  15. Grazie, ho provato e funziona. Avrei voluto eliminare il terzo pulsante ma non sono riuscito, alla fine ho lasciato così.

    RispondiElimina
    Risposte
    1. Il terzo pulsante si può eliminare facilmente cancellando questa parte di codice
      < br/ > Come < a href='URL_POLICY' target=' _blank ' > eliminare i cookie < /a > già presenti.
      fino al < /div >
      @#

      Elimina
  16. Grazie mille, ora mi funziona bene sia su desktop che su mobile!!

    RispondiElimina
  17. Io ho eliminato il banner di google perché ne avevo uno già mio ma ora non riesco ad accedere alla pagina dove avevo scritto la politica dei cookie senza che io abbia fatto nulla. Mi dice: The requested URL /p/cookie.html was not found on this server. That’s all we know.

    Cosa facciamo? Dici che è meglio tenere e personalizzare quello di google?

    RispondiElimina
    Risposte
    1. La pagina però la vedi? Se la vedi vuol dire che è online. Aprila e clicca sulla icona della matita per modificarla. Se invece non c'è più la devi riscrivere di nuovo. Per il resto segui questo post
      http://www.ideepercomputeredinternet.com/2015/07/cookie-blogger-banner-customize.html
      @#

      Elimina
    2. Mi segnala che la pagina non c'è se clicco su ulteriori informazioni, se scrivo per esteso l'url della pagina dei cookie la trovo tranquillamente. Forse, aggiungendo la stringa per eliminare il banner di google, c'è qualcosa che fa contrasto con i mio banner. Tu hai modificato quella di google? Come mai non hai tenuto la tua?

      Elimina
    3. Allora hai sbagliato a incollare l'URL della pagina nel codice del banner. Ho tenuto il banner di Google perché lo script esiste di default in tutti i blog. In questo è qui
      http://www.ideepercomputeredinternet.com/js/cookiechoices.js
      allora aggiungendone un altro si finirebbe per appesantire ulteriormente la pagina. Questa è la ragione principale
      @#

      Elimina
  18. Ciao vorrei un'informazione su una questione: per chi usa Adsense su blogger è sufficiente avere la barra con l'informativa e il pulsante del consenso o bisogna bloccare anche i cookie di profilazione del programma prima del consenso? Nel 99% dei siti che lo usano ho visto che appena si entra ci sono le barre informative ma i banner di Adsense si vedono lo stesso anche prima di dare il consenso.Ma nel regolamento del programma dice che non si può modificare il codice di Adsense, e nell'informativa inviata via mail da Google si dice solo che bisogna segnalare la loro presenza sul sito e il modo di disattivarli.Ma c'è un modo per eliminarli dunque questi cookie di profilazione Adsense prima del consenso dell'utente oppure basta la barra e l'informativa?? E se Adsense è installato su blogger di chi è la responsabilità?
    Nel forum di Google su quest'argomento c'è il caos più totale, e molti utenti dicono che in realtà oltre al banner informativo con il consenso bisognerebbe non far vedere gli annunci prima dell'accettazione del consenso da parte dell'utente; ma come si fa se Google non ci da gli strumenti per farlo da noi??
    Grazie della risposta

    RispondiElimina
    Risposte
    1. Scusami se sono brusco ma mi sono stancato a rispondere a questa domanda.
      Questo è il massimo che si può fare con Blogger e lo stesso Google non ha saputo fare di più. Se a qualcuno riesce di bloccare preventivamente i cookie su Blogger si faccia avanti
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.