Personalizzare il banner per il consenso all’uso dei cookie

24 ottobre 2014 Teresa nessun commento

Eccoci giunti all’ultima puntata sull’argomento “banner per il consenso all’uso dei cookie”. Dopo l’articolo “Il banner per il consenso all’uso dei cookie” e “Inserire il banner per il consenso all’uso dei cookie” dove rispettivamente trovate le spiegazioni del perchè deve essere inserito e come inserirlo, questa volta è il momento di vedere come personalizzare la grafica del banner per integrarlo al meglio nelle pagine del proprio sito web.

Dunque, per informare i visitatori e permettergli di accettare la cookie policy, google mette a disposizione uno script che risolve il problema con due soluzioni: la prima soluzione, prevede una “finestra di dialogo” (Dialog Box) che appare all’utente alla prima visita e che lascia spazio alle pagine del sito web solo dopo aver cliccato sul pulsante “accetta”

La seconda soluzione invece, sovrappone un banner in basso o in alto nelle pagine in cui viene inserito lo script lasciando libera la navigazione anche se l’utente non compie alcuna azione sui pulsanti del banner.

Per personalizzare la dialogbox o il banner è necessario modificare il file del foglio stile del sito web (in genere style.css) ed agire sui seguenti selettori: #cookieChoiceInfo, #cookieInfoLink, #cookieChoiceDismiss.

Il selettore #cookieChoiceInfo, permette di modificare le proprietà della finestra o del banner, quindi colore e opacità dello sfondo e dimensioni, caratteri e colore del messaggio.

Il selettore #cookieInfoLink, permette di modificare le proprietà (sfondo, colore, testo, ecc) del link/pulsante che porta alla pagina della cookie policy.

Il selettore #cookieChoiceDismiss infine, permette di modificare le proprietà (sfondo, colore, testo, ecc) del link/pulsante che chiude il banner o la dialogbox.

Nello specifico, dopo aver installato sul server che ospita il proprio sito web lo script come descritto nell’articolo “Inserire il banner per il consenso all’uso dei cookie“, bisogna aprire il file style.css ed aggiungere le seguenti righe alla fine.

#cookieChoiceInfo {           /* Imposto le proprietà del banner/dialog box e caratteri del messaggio */
  background-color: #000;     /* Lo fondo è di colore nero (#000) */
				 
  font-size: 16px;            /* i caratteri devono essere grandi 16 pixel */
  color: #DDD;                /* il colore dei caratteri è grigio chiaro (#DDD) */
  padding: 10px;              /* lo spazio intorno al messaggio (sopra, sotto e di lato) quindi il bordo dista 10 pixel */  
  opacity: .8;                /* questa proprietà modifica la trasparenza del banner/dialogbox */
}
#cookieInfoLink {                      
  color: #E00;                /* il testo del link che aprire la pagina della cookie policy è rosso (#E00)  */
  text-decoration: underline; /* questa proprietà indica che il testo del link è sottolineato  */
}
#cookieInfoLink:hover {       /* la parola hover, vicino al selettore, indica che le proprietà seguenti verranno applicate... */
                              /* ... al link che conduce alla cookie policy solo quando il mouse ci passa sopra  */
  color: #F44;                /* il testo del link in questo caso diventa di un rosso più chiaro al passaggio del mouse...  */
  test-decoration:none;       /*   .... e allo stesso tempo il testo non sarà più sottolineato            */
}
#cookieChoiceDismiss {        /* Impostiamo per il link "accetto/ok/chiudi" le proprietà per renderlo... */
			      /* ...visivamente come un pulsante */
  background-color: #0A0;     /* lo sfondo è verde (#0A0) */
  color: #FFF;                /* Il colore del testo è bianco (#FFF) */
  text-decoration: none;      /* Il testo non è sottolineato         */
  font-weight: 600;           /* Il testo è in grassetto             */
  font-size: 16px;
  padding: 3px 10px;          /* Imposto lo spazio tra i caratteri e il bordo del pulsante 2pixel sopra e sotto e 10px ai lati */
  border-radius:  3px;        /* Lo sfondo del pulsante ha i bordi arrotondati con un raggio di 3 pixel */
}
#cookieChoiceDismiss:hover {  /* Passando il mouse sopra il pulsante, questo cambia colore in verde chiaro. */
  background-color: #0F0;
}

Come potete notare, conoscere un minimo di CSS è necessario per poter ottenere il risultato voluto. Comunque, l’esempio, dovrebbe almeno riuscire a rendere l’idea di come personalizzare il banner o la dialogbox utilizzando gli script do google.

Se siete alle prese con l’inserimento del banner per il consenso dell’uso dei cookie e non riuscite a venirne a capo, scrivete qui sotto nei commenti le vostre difficoltà e troveremo insieme una soluzione.