Il garante della privacy ha imposto a tutti coloro che possiedono dei siti in grado di tracciare gli utenti tramite i cookie, di avvisarli la prima volta che accedono ad esso attraverso due metodi: la barra delle notifiche o la schermata iniziale per ricevere il loro consenso all'uso dei cookie. Tra i due metodi, il meno invasivo risulta la barra delle notifiche che in base alle proprie esigenze la si può installare in cima o in fondo al blog; in entrambi i casi si dovrà visualizzare senza utilizzare la scrollbar e scorrendo la pagina dovrà mantenersi in una posizione sempre in evidenza, cioè sopra il contenuto. A tal proposito ho già creato un articolo dove viene spiegato più dettagliatamente cosa sia e come si abilita l'informativa per il consenso dei cookie ma è facilmente intuibile che per gli utenti di Blogger non si tratta di un'operazione tanto facile. In questo articolo verranno presentate alcune soluzioni solo per i blog su Blogger, viene utilizzato ugualmente il codice ufficiale, ma è leggermente modificato in modo che possa essere incluso nel modello di Blogger.
In entrambi i codici va sostituito il link in rosso con la pagina relativa alla Privacy/Policy del proprio blog. Invece le scritte in blu si possono modificare o lasciare invariate.
Il testo della barra lo si può sostituire con quest'altro che è più informativo e corretto se si utilizzano cookie di profilazione di terze parti:
La barra dei cookie sarà visualizzabile sia nella versione desktop sia nella versione mobile del blog (dovete selezionare il modello personalizzato per cellulari). Assicuratevi che tale scritta non venga coperta da altri elementi del blog come banner pubblicitari, menù o dall'header. Utilizzando in modo opportuno i tag condizionali sarà anche possibile decidere di usare la barra delle notifiche in alto solo agli utenti che si collegano da PC e la barra delle notifiche in basso per gli utenti che si collegano dai dispositivi mobili o viceversa. La barr
Essendo un codice css, presenta codici esadecimali e dimensioni in pixel. Questi possono essere personalizzati a proprio piacimento o anche per esigenze particolari, ad esempio scritte che non risultano visibili nel tema o font poco adatto per la barra dell'accettazione dei cookie.
Ecco alcune possibili personalizzazioni:
- background-color: #000 !important; --> è il colore nero di sfondo della barra.
- color:#FFF; --> è il colore bianco della frase presente nella barra.
- color: #FFF; --> in questo caso è il colore bianco utilizzato per le scritte dei pulsanti.
In ogni caso le modifiche apportate varranno sia per la versione desktop sia per la versione mobile, quindi sconsiglio di variare anche le dimensioni dei pulsanti o l'altezza della barra perché si potrebbero creare degli inestetismi.
Il risultato finale con l'aggiunta del css per la personalizzazione è il seguente:
LEGGI ANCHE:
Come conoscere i cookie di ogni sito
1) Navbar
Il metodo della navbar non è più funzionante, lo è stato solo per un breve periodo. Probabilmente l'avranno tolta perché non appare nella versione mobile di Blogger e poi perché, diciamoci la verità, è un po' inutile. Questo è un esempio del risultato che si riusciva a ottenere usando la classica navbar:
2) Barra cookie ufficiale
Quelli di Google hanno introdotto una barra per i cookie e per impostazione predefinita è presente in ogni blog della piattaforma Blogger. Potrebbe sembrare una soluzione definitiva ed invece non è così. L'informativa completa che indirizza in una pagina di Google, fa riferimento a tutti i servizi inerenti a Google come Analytics, Adsense (forse anche i video di Youtube) ecc. Quindi chi sta utilizzando alcuni widget esterni tipo Facebook, pubblicità o altri servizi che registrano cookie di profilazione, dovrà sostituire il link con la propria informativa, in essa ci dovrà essere l'elenco dei cookie di terze parti, il loro utilizzo, la loro provenienza e, soprattutto, il metodo di rimozione.
3) Barra alternativa in alto
Se siete tra quelli che odiate la navbar e preferite mostrare una diversa barra dei cookie ma che si va a posizionare sempre in alto, dovete andare su Modello > Modifica HTML, poi cercare il tag </body> e prima di esso incollare il seguente codice:
<!-- Codice barra dei cookie - Inizio -->
<script type='text/javascript'>
//<![CDATA[
(function(window) {
if (!!window.cookieChoices) {
return window.cookieChoices;
}
var document = window.document;
var supportsTextContent = 'textContent' in document.body;
var cookieChoices = (function() {
var cookieName = 'displayCookieConsent';
var cookieConsentId = 'cookieChoiceInfo';
var dismissLinkId = 'cookieChoiceDismiss';
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';
var cookieConsentElement = document.createElement('div');
cookieConsentElement.id = cookieConsentId;
cookieConsentElement.style.cssText = butterBarStyles;
cookieConsentElement.appendChild(_createConsentText(cookieText));
if (!!linkText && !!linkHref) {
cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
}
cookieConsentElement.appendChild(_createDismissLink(dismissText));
return cookieConsentElement;
}
function _createDialogElement(cookieText, dismissText, linkText, linkHref) {
var glassStyle = 'position:fixed;width:100%;height:100%;z-index:999;' +
'top:0;left:0;opacity:0.5;filter:alpha(opacity=50);' +
'background-color:#ccc;';
var dialogStyle = 'z-index:1000;position:fixed;left:50%;top:50%';
var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';
var cookieConsentElement = document.createElement('div');
cookieConsentElement.id = cookieConsentId;
var glassPanel = document.createElement('div');
glassPanel.style.cssText = glassStyle;
var content = document.createElement('div');
content.style.cssText = contentStyle;
var dialog = document.createElement('div');
dialog.style.cssText = dialogStyle;
var dismissLink = _createDismissLink(dismissText);
dismissLink.style.display = 'block';
dismissLink.style.textAlign = 'right';
dismissLink.style.marginTop = '8px';
content.appendChild(_createConsentText(cookieText));
if (!!linkText && !!linkHref) {
content.appendChild(_createInformationLink(linkText, linkHref));
}
content.appendChild(dismissLink);
dialog.appendChild(content);
cookieConsentElement.appendChild(glassPanel);
cookieConsentElement.appendChild(dialog);
return cookieConsentElement;
}
function _setElementText(element, text) {
if (supportsTextContent) {
element.textContent = text;
} else {
element.innerText = text;
}
}
function _createConsentText(cookieText) {
var consentText = document.createElement('span');
_setElementText(consentText, cookieText);
return consentText;
}
function _createDismissLink(dismissText) {
var dismissLink = document.createElement('a');
_setElementText(dismissLink, dismissText);
dismissLink.id = dismissLinkId;
dismissLink.href = '#';
dismissLink.style.marginLeft = '24px';
return dismissLink;
}
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement('a');
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = '_blank';
infoLink.style.marginLeft = '8px';
return infoLink;
}
function _dismissLinkClick() {
_saveUserPreference();
_removeCookieConsent();
return false;
}
function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {
if (_shouldDisplayConsent()) {
_removeCookieConsent();
var consentElement = (isDialog) ?
_createDialogElement(cookieText, dismissText, linkText, linkHref) :
_createHeaderElement(cookieText, dismissText, linkText, linkHref);
var fragment = document.createDocumentFragment();
fragment.appendChild(consentElement);
document.body.appendChild(fragment.cloneNode(true));
document.getElementById(dismissLinkId).onclick = _dismissLinkClick;
}
}
function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) {
_showCookieConsent(cookieText, dismissText, linkText, linkHref, false);
}
function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) {
_showCookieConsent(cookieText, dismissText, linkText, linkHref, true);
}
function _removeCookieConsent() {
var cookieChoiceElement = document.getElementById(cookieConsentId);
if (cookieChoiceElement != null) {
cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);
}
}
function _saveUserPreference() {
// Durata del cookie di un anno
var expiryDate = new Date();
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString();
}
function _shouldDisplayConsent() {
// Per mostrare il banner solo in mancanza del cookie
return !document.cookie.match(new RegExp(cookieName + '=([^;]+)'));
}
var exports = {};
exports.showCookieConsentBar = showCookieConsentBar;
exports.showCookieConsentDialog = showCookieConsentDialog;
return exports;
})();
window.cookieChoices = cookieChoices;
return cookieChoices;
})(this);
document.addEventListener('DOMContentLoaded', function(event) {
cookieChoices.showCookieConsentBar('Utilizzando questo sito si accettano e si autorizzano i cookies necessari',
'OK', '+Info', 'http://www.scuolissima.com/2012/11/disclaimer-scuolissimacom.html');
});
//]]>
</script>
<!-- Codice barra dei cookie - Fine -->
4) Barra alternativa in basso
Se invece preferite la soluzione ancora meno invasiva, potete installare la barra delle notifiche dei cookie nella parte bassa del blog, andando ad incollare quest'altro codice prima del tag </body> :<!-- Codice barra dei cookie - Inizio -->
<script type='text/javascript'>
//<![CDATA[
(function(window) {
if (!!window.cookieChoices) {
return window.cookieChoices;
}
var document = window.document;
var supportsTextContent = 'textContent' in document.body;
var cookieChoices = (function() {
var cookieName = 'displayCookieConsent';
var cookieConsentId = 'cookieChoiceInfo';
var dismissLinkId = 'cookieChoiceDismiss';
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
'margin:0; left:0; bottom:0;padding:4px;z-index:1000;text-align:center;';
var cookieConsentElement = document.createElement('div');
cookieConsentElement.id = cookieConsentId;
cookieConsentElement.style.cssText = butterBarStyles;
cookieConsentElement.appendChild(_createConsentText(cookieText));
if (!!linkText && !!linkHref) {
cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
}
cookieConsentElement.appendChild(_createDismissLink(dismissText));
return cookieConsentElement;
}
function _createDialogElement(cookieText, dismissText, linkText, linkHref) {
var glassStyle = 'position:fixed;width:100%;height:100%;z-index:999;' +
'bottom:0;left:0;opacity:0.5;filter:alpha(opacity=50);' +
'background-color:#ccc;';
var dialogStyle = 'z-index:1000;position:fixed;left:50%;top:50%';
var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';
var cookieConsentElement = document.createElement('div');
cookieConsentElement.id = cookieConsentId;
var glassPanel = document.createElement('div');
glassPanel.style.cssText = glassStyle;
var content = document.createElement('div');
content.style.cssText = contentStyle;
var dialog = document.createElement('div');
dialog.style.cssText = dialogStyle;
var dismissLink = _createDismissLink(dismissText);
dismissLink.style.display = 'block';
dismissLink.style.textAlign = 'right';
dismissLink.style.marginTop = '8px';
content.appendChild(_createConsentText(cookieText));
if (!!linkText && !!linkHref) {
content.appendChild(_createInformationLink(linkText, linkHref));
}
content.appendChild(dismissLink);
dialog.appendChild(content);
cookieConsentElement.appendChild(glassPanel);
cookieConsentElement.appendChild(dialog);
return cookieConsentElement;
}
function _setElementText(element, text) {
if (supportsTextContent) {
element.textContent = text;
} else {
element.innerText = text;
}
}
function _createConsentText(cookieText) {
var consentText = document.createElement('span');
_setElementText(consentText, cookieText);
return consentText;
}
function _createDismissLink(dismissText) {
var dismissLink = document.createElement('a');
_setElementText(dismissLink, dismissText);
dismissLink.id = dismissLinkId;
dismissLink.href = '#';
dismissLink.style.marginLeft = '24px';
return dismissLink;
}
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement('a');
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = '_blank';
infoLink.style.marginLeft = '8px';
return infoLink;
}
function _dismissLinkClick() {
_saveUserPreference();
_removeCookieConsent();
return false;
}
function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {
if (_shouldDisplayConsent()) {
_removeCookieConsent();
var consentElement = (isDialog) ?
_createDialogElement(cookieText, dismissText, linkText, linkHref) :
_createHeaderElement(cookieText, dismissText, linkText, linkHref);
var fragment = document.createDocumentFragment();
fragment.appendChild(consentElement);
document.body.appendChild(fragment.cloneNode(true));
document.getElementById(dismissLinkId).onclick = _dismissLinkClick;
}
}
function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) {
_showCookieConsent(cookieText, dismissText, linkText, linkHref, false);
}
function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) {
_showCookieConsent(cookieText, dismissText, linkText, linkHref, true);
}
function _removeCookieConsent() {
var cookieChoiceElement = document.getElementById(cookieConsentId);
if (cookieChoiceElement != null) {
cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);
}
}
function _saveUserPreference() {
// Durata del cookie di un anno
var expiryDate = new Date();
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString();
}
function _shouldDisplayConsent() {
// Per mostrare il banner solo in mancanza del cookie
return !document.cookie.match(new RegExp(cookieName + '=([^;]+)'));
}
var exports = {};
exports.showCookieConsentBar = showCookieConsentBar;
exports.showCookieConsentDialog = showCookieConsentDialog;
return exports;
})();
window.cookieChoices = cookieChoices;
return cookieChoices;
})(this);
document.addEventListener('DOMContentLoaded', function(event) {
cookieChoices.showCookieConsentBar('Utilizzando questo sito si accettano e si autorizzano i cookies necessari',
'OK', '+Info', 'http://www.scuolissima.com/2012/11/disclaimer-scuolissimacom.html');
});
//]]>
</script>
<!-- Codice barra dei cookie - Fine -->
In entrambi i codici va sostituito il link in rosso con la pagina relativa alla Privacy/Policy del proprio blog. Invece le scritte in blu si possono modificare o lasciare invariate.
Il testo della barra lo si può sostituire con quest'altro che è più informativo e corretto se si utilizzano cookie di profilazione di terze parti:
Questo sito utilizza i cookie di profilazione di terze parti. Se continui la navigazione consideriamo che accetti il loro uso.
La barra dei cookie sarà visualizzabile sia nella versione desktop sia nella versione mobile del blog (dovete selezionare il modello personalizzato per cellulari). Assicuratevi che tale scritta non venga coperta da altri elementi del blog come banner pubblicitari, menù o dall'header. Utilizzando in modo opportuno i tag condizionali sarà anche possibile decidere di usare la barra delle notifiche in alto solo agli utenti che si collegano da PC e la barra delle notifiche in basso per gli utenti che si collegano dai dispositivi mobili o viceversa. La barr
Personalizzazioni
Per personalizzare la barra dei cookie (quella tramite codice) si deve andare su Modello > Modifica HTML e prima della riga ]]></b:skin> bisogna andare ad incollare il seguente codice css:
/* CSS Barra dei Cookie */
div#cookieChoiceInfo {
background-color: #000 !important;
color:#FFF;
font-weight:bold;
font-size:14px;
font-family: Georgia;
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color: #FFF;
background: #e50909;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
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 {
color:#FFF;
text-decoration:none;
position: relative;
top:1px;left:1px;
}
Essendo un codice css, presenta codici esadecimali e dimensioni in pixel. Questi possono essere personalizzati a proprio piacimento o anche per esigenze particolari, ad esempio scritte che non risultano visibili nel tema o font poco adatto per la barra dell'accettazione dei cookie.
Ecco alcune possibili personalizzazioni:
- background-color: #000 !important; --> è il colore nero di sfondo della barra.
- color:#FFF; --> è il colore bianco della frase presente nella barra.
- color: #FFF; --> in questo caso è il colore bianco utilizzato per le scritte dei pulsanti.
In ogni caso le modifiche apportate varranno sia per la versione desktop sia per la versione mobile, quindi sconsiglio di variare anche le dimensioni dei pulsanti o l'altezza della barra perché si potrebbero creare degli inestetismi.
Come bloccare i cookie su Blogger
Sul web si discute anche dei cookie di profilazione (anche di terze parte) che differiscono dai cookie tecnici. Tutt'ora non si riesce a capire se effettivamente è presente l'obbligo di nascondere qualsiasi cosa utilizzi questi cookie di profilazione prima che l'utente dia il suo consenso (banner pubblicitari e pulsanti di condivisione sui social network). Al momento sembra che pochi siti si siano adeguati in modo restrittivo, tuttavia nel peggiore delle ipotesi ho scritto in un'altra pagina come bloccare i cookie di profilazione su Blogger.LEGGI ANCHE:
Come conoscere i cookie di ogni sito
