GDPR: come personalizzare l'informativa breve in Blogger

Come modificare l'aspetto e il testo del banner per personalizzare l'informativa breve in funzione del GDPR

Con l'introduzione di questo nuovo regolamento denominato GDPR ho timore che mi succeda quello che è avvenuto circa tre anni fa. Mi fusi il cervello per settimane per trovare una soluzione alla introduzione del banner per la Cookie Law e, il giorno della entrata in vigore della legge, Google implementò automaticamente i banner in tutti i siti sulla piattaforma Blogger.

Non mi stupirei se il 26 Maggio 2018 succedesse la stessa cosa, però non si può attendere fino a quel giorno senza provare a risolvere il problema da soli. Come ho già spiegato nei post precedenti dedicati a questo tema, gli utenti di Blogger possono solo modificare la informativa breve, la informativa lunga e aggiungere dei link a modulo di contatto, modulo dei commenti e al modulo di verifica della sottoscrizione della Newsletter.

In questo post vedremo appunto come personalizzare il testo della Informativa breve che si mostra in tutti i blog di Blogger quando si aprono per la prima volta o quando si aprono con una scheda in incognito. Nei blog con i vecchi Temi, anche quelli del tipo Dynamic View, il banner viene mostrato in alto. Invece nei nuovi Temi Responsive, il banner ufficiale di Blogger è posizionato nella parte bassa del layout.

Vediamo come modificare il Template per visualizzare una scritta che informi gli utenti anche della tutela della privacy derivante dal regolamento GDPR oltre che della accettazione o meno della politica dei cookie.

MODIFICA DEL TEMA DI BLOGGER

Prima di procedere, si deve andare su Tema -> Backup/Ripristino e salvare il Tema per ripristinarlo se le modifiche non andassero a buon fine. Si va poi su Tema -> Modifica HTML e si cerca la riga ]]></b:skin>.  Per mostrare il banner nella parte bassa, subito sopra a questa riga, si incolla il seguente codice

/* CSS Cookie e GDPR */
#cookieChoiceInfo {
top: auto !important; /* Banner in basso */
bottom: 0 !important; /* Banner in basso */
}
div#cookieChoiceInfo {
font-family: Georgia;
}

quindi si salva il template. Se il vostro banner è già posizionato nella parte bassa, non avete bisogno di incollare questo codice. La famiglia di font colorata di rosso può essere ovviamente personalizzata.

Aprendo una finestra di navigazione in Incognito, controllate che il banner venga effettivamente visualizzato nella parte bassa del layout. Adesso cercate la riga </head> e, subito sopra, incollate questo codice

<!-- Personalizzazione banner cookie e GDPR inizio-->
<b:if cond='!data:blog.isMobile'>
<!-- Banner Desktop -->
<style>
span.cookie-choices-text {font-size:14px !important; color: #fff !important;}
</style>
       <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito su Blogger usa cookie Google e di altre terze parti per analizzare il traffico, per statistiche e pubblicità personalizzata. Navigando nel blog accetti l\47uso dei cookie e il trattamento dei dati secondo il GDPR.&quot;, close: &quot;OK Accetto&quot;, learn: &quot;+Informazioni&quot;, link:&quot;https://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
</script>
     <b:else/>
<!-- Banner Mobile -->
     <style>
span.cookie-choices-text {font-size:11px !important; color:#fff !important;}
</style>
       <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito su Blogger usa cookie Google e di altre terze parti per analizzare il traffico, per statistiche e pubblicità personalizzata. Navigando nel blog accetti l\47uso dei cookie e il trattamento dei dati secondo il GDPR.&quot;, close: &quot;OK&quot;, learn: &quot;+Info&quot;, link:&quot;https://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
</script>
     </b:if>
<!-- Personalizzazione banner cookie e GDPR fine-->

quindi salvate il modello. Le personalizzazioni per l'aspetto del banner sono le seguenti:

1. Il codice è suddiviso in due parti per la versione mobile e quella desktop. Si può modificare il testo colorato di blu per renderlo più sintetico nella versione mobile, così come i bottoni colorati di viola.
2. La dimensione del testo, 14 pixel per il desktop e 11 pixel per il mobile
3. Il colore del testo scelto #fff bianco per entrambe le versioni
4. L'URL della Policy Privacy estesa da sostituire a quella di questo sito.
5. Ho inserito un apostrofo con la regola l\47uso al posto di l'uso. Bisogna ricordarsi che il javascript interpreta l'apostrofo come parte del codice e non come testo. Evitare apostrofi e altri simboli speciali. 

Chi abbia un blog con gli ultimi modelli Responsive, può incollare, sempre sopra a </head>, questo codice

<!-- Personalizzazione banner cookie e GDPR inizio-->
  <style>
span.cookie-choices-text {font-size:12px !important; color: #fff !important;}
  </style>
        <script type='text/javascript'>
cookieOptions = {msg: &quot;Questo sito su Blogger usa cookie Google e di altre terze parti per analizzare il traffico, per statistiche e pubblicità personalizzata. Navigando nel blog accetti l\47uso dei cookie e il trattamento dei dati secondo il GDPR.&quot;, close: &quot;OK Accetto&quot;, learn: &quot;+Informazioni&quot;, link:&quot;https://www.ideepercomputeredinternet.com/p/politica-dei-cookie.html&quot;};
  </script>    
  <!-- Personalizzazione banner cookie e GDPR fine-->

più semplice, con le stesse personalizzazioni già viste in precedenza. Si può personalizzare ulteriormente l'aspetto del banner, nei colori e nei pulsanti, seguendo le istruzioni del post su come personalizzare il banner di Google. Nel prossimo articolo vedremo come aggiornare la Informativa Estesa ovvero la Policy Privacy.

AGGIORNAMENTO: Google ha implementato in modo nativo un nuovo Banner nei siti di Blogger. Leggere il post per apportare le necessarie modifiche al testo del banner da desktop e da mobile.

Tutte le info e i link sul GDPR li trovi in questo post e in quelli linkati in calce
GDPR per Blogger, come mettersi in regola