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 di 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.
Se hai problemi con l’installazione o con la personalizzazione dello script, leggi:
Le 10 domande più frequenti sul banner per il consenso all’uso dei cookie
Info sull'autore
Vuoi offrirmi un caffè?
Ti ringrazio per il pensiero, ma fallo solo per ringraziarmi nel caso il blog ti sia stato utile o per il semplice piacere di farlo. Utilizza il metodo di donazione sicuro PayPal
franco: 
Guirdano: 
Giovanni: 
ugo erio pizzatti sertorelli: 
Franco: 
Franco: 
Visto che il tuo articolo è di qualche anno fa, mi confermi Teresa che basta inserire il banner e la policy dei cookie e della privacy per essere in regola con le nuove leggi in materia?
Ciao Laura, no… non posso confermarti perché sono cambiate alcune regole in materia. Conviene approfondire di più l’argomento!
Ciao Teresa, scusa se rispolvero questo thread, avrei modificato il javascript per renderlo più leggibile su desktop e smartphone…
Testato su Chrome, Firefox, Opera, in versione Mobile e Desktop… spero ti piaccia…
https://www.dropbox.com/s/japclnje431vfhh/CookiePolicyNaviBarExample.zip?dl=0
L’ho messo sul mio dropbox… inoltre è ottimo per linkare la nuova disciplina su GDPR (regolamento Europeo sulla Privacy)… In questo modo oltre che per la cookie policy va benissimo anche per la privacy policy…
Un consiglio: se vuoi mettere una contact form multilingua con GDPR visita il mio sito sezione download e preleva quello che più ti piace e ti serve.
Ciao Teresa!
Premetto che non sono un guru dei codici html ma creo sito della mia scuola solo per divertimento.
Anni fa e stato creato il codice per la privacy sui cookie
Ora nel mio sito mi accorgo che entrando con smartphone la pagina rimane annebbiata e solo dopo cliccato il pulsante sul consenso si va avanti ma è difficile a trovarlo visto che la pagina creata non è supportata da cell…
Se vedete http://www.apneateamtorino.it lo noterete
E possibile con il mio codice inserire qualcosa per fare in modo che rimanga la casella ma non annebbi la pagina?
Perché penso che il visitatore esca e nn prosegue con la visita grazie
Ciao Teresa, ho seguito (credo) passo passo le tue istruzioni di cui al punto 4 delle FAQ sul banner cookie, ma non sono riuscito a far digerire il . Pur avendo sostituito la riga 74 del cookiechoices con le righe successivamente indicate nella FAQ, non riesco a fare andare a capo il testo del banner al momento inserito solo in home….lo avrai già più e più volte spiegato, ma io non ci sono riuscito…. riesci a darmi una mano?
Grazie
Ciao Teresa,
ho inserito nei fogli di stile
#cookieChoiceInfo a {
color: #FFF;
}
Per cambiare il colore della scritta al passaggio del mouse ho provato ad inserire anche
#cookieChoiceInfo a {
color: #FFF;
}
La cosa funziona ma mi cambia anche il colore della scritta del pulsante OK al passaggio del mouse.
E’ possibile differenziare le due cose?
Ti ringrazio!
Ciao Rosanna, benvenuta… qual’è il tuo sito? così ti dico come modificare…
Ciao Teresa, volevo farti i complimenti per l’articolo. Sono riuscito a fare tutto quanto e ho risolto alcuni problemi guardando le risposte che hai dato ad altri utenti. Però avrei bisogno di un aiuto. C’è un modo per cambiare la struttura del banner? Intendo farlo simile al tuo, con testo su più righe e formattarlo diversamente? Il mio testo è tutto su una riga e non riesce a prendere il css che ho scritto in un file esterno.
Non ho un sito online da mostrarti perché sto lavorando in locale. Ti lascio dei link alle foto sperando vadano bene lo stesso.
Link alle foto: https://drive.google.com/folderview?id=0B2521BX1YbBtY2EwWjkzdzZoaWM&usp=sharing
Grazie in anticipo dell’aiuto e spero di ricevere una tua risposta 🙂
Niccolò.
Ciao Niccolò, nei commenti ai vari articoli sull’argomenti, ormai trovi un pò tutto… prova a dare uno sguardo all’articolo https://www.mammachebrava.com/le-10-domande-piu-frequenti-sul-banner-per-il-consenso-alluso-dei-cookie/ alla domanda n° 4 spiego come far andare a capo il testo del bannar…
Prefetto grazie mille. Non avevo miniamente visto l’articolo che mi hai menzionato. Grazie ancora
Sai come posso spostare il banner in basso? Ora mi compare in alto ma viene coperto dalla barra delle pagine del template che sto usando su blogger.
Ciao ti devo ringraziare per i tuoi consigli perche’ sono riuscita amettere il banner senza problemi.Ora pero’ ne vorrei personalizzare uno ingrandendo i caratteri (per passare il test di sito mobile friendly9Ho scaricato il file cookie policy css dal server ma ora ho apura a modificarlo avendo paura di fare pasticci.I tuoi consigli qui’ sopra li debbo aggiungere in fondo al codice che ho o devo cambiare qualcosa ?Il mio codice e’ /* the norm */
#gritter-notice-wrapper {
position:fixed;
top:20px;
right:20px;
width:301px;
z-index:9999;
}
#gritter-notice-wrapper.top-left {
left: 20px;
right: auto;
}
#gritter-notice-wrapper.bottom-right {
top: auto;
left: auto;
bottom: 20px;
right: 20px;
}
#gritter-notice-wrapper.bottom-left {
top: auto;
right: auto;
bottom: 20px;
left: 20px;
}
.gritter-item-wrapper {
position:relative;
margin:0 0 10px 0;
background:url(‘ie-spacer.gif’); /* ie7/8 fix */
}
.gritter-top {
background:url(gritter.png) no-repeat left -30px;
height:10px;
}
.hover .gritter-top {
background-position:right -30px;
}
.gritter-bottom {
background:url(gritter.png) no-repeat left bottom;
height:8px;
margin:0;
}
.hover .gritter-bottom {
background-position: bottom right;
}
.gritter-item {
display:block;
background:url(gritter.png) no-repeat left -40px;
color:#eee;
padding:2px 11px 8px 11px;
font-size: 11px;
font-family:verdana;
}
.hover .gritter-item {
background-position:right -40px;
}
.gritter-item p {
padding:0;
margin:0;
word-wrap:break-word;
}
.gritter-close {
display:none;
position:absolute;
top:5px;
right:3px;
background:url(gritter.png) no-repeat left top;
cursor:pointer;
width:30px;
height:30px;
}
.gritter-title {
font-size:14px;
font-weight:bold;
padding:0 0 7px 0;
display:block;
text-shadow:1px 1px 0 #000; /* Not supported by IE 🙁 */
}
.gritter-image {
width:48px; Grazie!!
Ciao Daniela, benvenuta… puoi aggiungere lo style del banner tranquillamente alla fine del file che hai postato oppure modificare direttamente il file cookiechoices.js. In ques’ultimo casa dai uno sguardo al post https://www.mammachebrava.com/le-10-domande-piu-frequenti-sul-banner-per-il-consenso-alluso-dei-cookie/
Ciao
sto applicando cookiechoices su un sito e mi sono accorto che la finestrella del consenso appare 2 volte in base al percorso di visualizzazione.
Accade anche su questo sito e vado con l’esempio per mostrarvi il problema…
Senza alcun cookie di consenso visito per la prima volta questa URL
https://www.mammachebrava.com/personalizzare-banner-per-consenso-alluso-dei-cookie/
ACCETTO e successivamente passo al HOME e quindi https://www.mammachebrava.com/
visitando una qualsiasi pagina della root mi riappare il banner dell’informativa
Accade sia con Chrome sia con Firefox…
Cancellate i cookie e provate anche voi.
Ciao
Ciao Alessandro, grazie della segnalazione…. in una delle tante modifiche al file coockiechoices.js mi ero persa un pezzo!!!
Praticamente nella function _saveUserPreference() {
bisogna aggiungere path=/; nella riga seguente:
document.cookie = cookieName + ‘=y; path=/; expires=’ + expiryDate.toGMTString();
Ciao e grazie… 😀
Ciao Teresa,
grazie alle vostre indicazioni ho inserito il banner.
Il problema che riscontro è che nel testo riesco solo ad inserire “CHIUDENDO QUESTO BANNER ACCONSENTI COOKIE” Ogni parola in più inserita mi fa scomparire del tutto la scritta del banner.
Devo intervenire sul file cookiechoices.js? E come?
Grazie
Ciao Vittorio, benvenuto! Probabilmente, l’errore lo riscontri quando nel messaggio da visualizzare includi un apostrofo. Per correggere quindi, anteponi all’apostrofo un backslash e vedrai che funziona.
Per esempio:
di terze parti per statistiche sull\\’utilizzo del sito.
ATTENZIONE!!! nell’esempio compaiono due backslash, ma bisogna metterne solo uno!!!
Grazie al tuo prezioso supporto ho risolto.
Grande disponibilità e professionalità
ciao Teresa,
si! è copiata nella stessa cartella delle pagine…., cosa posso fare?
Controlla allora i permessi del file… l’errore è quello che ti ho scritto nel messaggio precedente, le tue pagine, non riescono a caricare il file cookiechoices.js (403)… fammi sapere…
Ciao! ho inserito il banner cookie utilizzando dreamweaver ed in locale tutto funziona alla perfezione. Una volta messo in rete però non si vede… ho diversi js nelle pagine. Come posso evitare il conflitto per i due browser principali?
Grazie per il supporto
Ciao Cri, benvenuta! Il browser mi da questo errore: Failed to load resource: the server responded with a status of 403 (Forbidden)
Sei sicura di aver copiato il file cookiechoices.js nella cartella giusta???
Ciao Teresa,
ti ringrazio per lo splendivo lavoro che hai fatto.
Volevo chiederti, se puoi, due info.
La prima è quella se posso personalizzare il carattere di una parte del testo (es. definire un titolo INFORMATIVA COOKIES) e inoltre mi servirebbe mettere a capo o vicino al chiudi la parte relativa al linkText.
Grazie
Ciao Teresa… grazie per il tuo articolo. Ti volevo chiedere, se possibile inserire una immagine al posto del testo, come faccio? Grazie
Mi è venuta un’altra idea, permettere il ritorno a capo solo in presenza di una risoluzione bassa, in questo modo chi ha risoluzioni elevate e la stringa contenente il testo da mostrare non è troppo lunga può aggiustare il banner mandando a capo solo i due link (chiudi o accetta e leggi l’informativa). Quindi trovare la linea:
cookieConsentElement.appendChild(_createConsentText(cookieText));
aggiungere esattamente dopo le linee che seguono e ovviamente cambiare la risoluzione che si vuole aggiustare:
var wBrowser = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (wBrowser < 1280) {
cookieConsentElement.appendChild(document.createElement('br'));
}
Ciao Teresa. Se mi vengono in mente altre cose non ti dispiace se le scrivo? 😉
Vai tranquillo Alessandro… fai come se fossi a casa tua! 😀 😀 😀
Grazie sempre per la collaborazione 😉
Ciao Teresa, ho un’ultimissima domanda da fare e poi, almeno per me, è perfetto!
Vorrei sapere se è possibile fare in modo che il banner scompaia anche se clicco semplicemente sul sito (a prescindere se sia su un link o al di fuori…praticamente se clicco ovunque)
Grazie
Allora, modifica lo script come ho suggerito a lorenzo in questa discussione:
https://www.mammachebrava.com/personalizzare-banner-per-consenso-alluso-dei-cookie/#comment-3551
con queste modifiche dopo 15 secondi, se si effettua uno scroll sulla pagina, il banner scompare. Se vuoi farlo scomparire al click devi sostituire la funzione document.onscroll con document.onclick o se vuoi puoi utilizzarle tutte e due. 😉
Ciao Teresa, ho scritto in questo modo ma non funziona, come mai?
function detectScroll() {
document.onscroll = function() {
document.onclick = function() {
_dismissLinkClick();
}};
}
Ciao Andrew, come hai scritto non va bene… prova in questo modo:
function detectScroll() {
document.onscroll = function() {
_dismissLinkClick();
}
document.onclick = function() {
_dismissLinkClick();
}
}
Ciao Teresa, avevo già provato anche prima in questo modo, ma non funziona, anzi è peggio perché il banner non si toglie ne con il click e neanche più con lo scroll…
Scusami, ho dimenticato i punti e virgola!!!
Questa è la funzione che “funziona” 😀 e che utilizzo sul mio blog… 😉
function detectScroll() {
document.onscroll = function() {
_dismissLinkClick();
};
document.onclick = function() {
_dismissLinkClick();
};
}
Anzi, aspetta, nell’ultima modifica, ho spostato la riga onclick nella function _showCookieConsent precisamente in questo punto:
if (_shouldDisplayConsent()) {
_removeCookieConsent();
document.onclick = function() { _dismissLinkClick(); };
setTimeout(detectScroll,8000);
ho modificato in questo modo, perchè ho immaginato che se uno clicca lo fa volontariamente (rispetto allo scroll che potrebbe invece essere accidentale) e quindi non ho reputato necessario attendere un tot di secondi… Tu che ne pensi?
Ciao Teresa, la prima soluzione non mi funziona proprio (io già l’avevo provata in modo corretto, cioè con i punti e virgola), mentre la seconda (quella nell’ “IF”) funziona bene.
Ho diminuito anche un pò i secondi dello scroll, a tuo giudizio questi sono pochi? Per banner di Iubenda basta un piccolissimo scroll e subito scompaiono…io ho settato in questo modo
setTimeout(detectScroll,3000);
Non vedo il link al tuo sito, quindi non so dirti se va bene o meno… io ho impostato 8 secondi, semplicemente perchè avevo notato su altri siti che non si faceva neanche in tempo a caricare tutta la pagina e quindi a visualizzare il banner che questo scompariva per via di scroll involontari… Regolati quindi secondo la velocità di caricamento del tuo sito.
Salve, vorrei sapere se è possibile esportare la parte testuale del banner in un file esterno (js o altro) poiché il mio sito è composto da molte pagine html e in caso di modifiche dovrei editarle tutte.
Grazie!
Ciao Andrew, puoi utilizzare la soluzione che ho suggerito a Maurizio qui:
https://www.mammachebrava.com/inserire-banner-per-consenso-alluso-dei-cookie/#comment-38622
Anche questo ho risolto ^_^ praticamente ho esportato il tutto in uno script esterno, mentre nella pagina html ho inserito questo richiamo:
Ho provato e sembra funzionare, vorrei solo avere conferma se poi il tutto è compatibile anche con altri browser o sistemi operativi.
Grazie
Teresa grazie mille! 🙂
Salve, vorrei sapere come faccio ad eliminare la scritta iniziale “Informativa”.
Grazie
Per l’eliminazione dell’Informativa ho risolto rimuovendo la relativa stringa di codice nello script, ora però ho un altro problema…nella versione mobile il banner non si vede bene, in pratica se ho il cell in verticale manca la parte iniziale del banner e della scritta, se invece metto il cell in orizzontale il banner non si vede affatto. E’ un problema di css o di js visto che ho messo mano su entrambi?
Grazie
ciao andrew, probabilmente é un problema di css, metti il link al tuo sito cosí posso dare uno sguardo.
…ho risolto anche questo problema, riguardava il posizionamento dei div (z-index), è bastato semplicemente cambiare il valore.
Grazie ugualmente!
Scusami ancora Teresa ma vedo i miei commenti in fase pendente di approvazione e manca del codice che sarà stato digerito dal tuo sito 😉 Comunque tanto per non lasciare nulla di fatto ti metto a disposizione la mia modifica che include il cookie valido per l’intero sito e gli stili inline js. Così chi non può allegare fogli di stile esterni si ritrova pochissimo lavoro da fare.
https://www.dropbox.com/s/japclnje431vfhh/CookiePolicyNaviBarExample.zip?dl=0
Ho predisposto un esempio di pagina html quindi basta cliccare sul file Example.html e vedere come viene. Però perché funzioni in locale bisogna cancellare i precedenti cookie dello stesso tipo.
1) usare cclenaer e fargli cancellare tutti i cookie (http://filehippo.com/it/download_ccleaner/)
2) usare webdeveloper (https://addons.mozilla.org/it/firefox/addon/web-developer/) e tramite il menù cookies cancellare i cookie che ci interessano lasciando stare gli altri…
Ciao Teresa e grazie.
Ciao Alessandro, ti ringrazio per il tuo contributo! 😉
Ecco ho rimediato, sto postando su pastebin il codice che il tuo blog ha digerito 😉
Prima cosa, create nella root del vostro sito le cartelle jsc e php.
Dunque copiate e incollate il contenuto di http://pastebin.com/LRPvrbyS dentro un file vuoto che salverete come cookiechoices.js (va dentro la cartella jsc).
Poi copiate e incollate il contenuto di http://pastebin.com/EajAFchN dentro un file vuoto che salverete come policy.php (va dentro la cartella php).
Infine copiate e incollate il contenuto di http://pastebin.com/S3ajDRus dentro tutti i file che vi interessano subito dopo di
Fine.
Grazie Teresa e scusa se sto profittando della tua pazienza.
Ecco ho rimediato, sto postando su pastebin il codice che il tuo blog ha digerito
Prima cosa, create nella root del vostro sito le cartelle jsc e php.
Dunque copiate e incollate il contenuto di http://pastebin.com/LRPvrbyS dentro un file vuoto che salverete come cookiechoices.js (va dentro la cartella jsc).
Poi copiate e incollate il contenuto di http://pastebin.com/EajAFchN dentro un file vuoto che salverete come policy.php (va dentro la cartella php).
Infine copiate e incollate il contenuto di http://pastebin.com/S3ajDRus dentro tutti i file che vi interessano subito dopo di body.
Fine.
Grazie Teresa e scusa se sto profittando della tua pazienza.
Ma che approfittando!?!? Ti ringrazio per aver condiviso il tuo lavoro…. 😉
Scusami ancora Teresa, nella mia modifica non so se hai notato che ho reso il cookie valido per l’intero sito comprese sottocartelle e radici…
document.cookie = cookieName + \'=y; expires=\' + expiryDate.toGMTString() + \'; path=/\';
Questo renderà valido il cookie per l’intero dominio indipendentemente da dova si trova lo script… Ciao.
Ciao Teresa, molto interessante e vedo che sei anche molto brava in programmazione… ti faccio i miei complimenti per la tua ottima preparazione tecnica. Se qualcuno ha problemi a mettere dei css aggiuntivi alle proprie pagine o non può o non vuole farlo, esiste una tecnica semplicissima che sfrutta gli stile inline js. Mi permetto di aggiungere le mie modifiche…
File: cookiechoices.js
/*
Copyright 2014 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the \"License\");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an \"AS IS\" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
(function(window) {
if (!!window.cookieChoices) {
return window.cookieChoices;
}
var document = window.document;
// IE8 does not support textContent, so we should fallback to innerText.
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 = \'font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #cccccc; position: fixed; width: 100%; background-color: #003366; margin: 0; left: 0; top: 0; padding: 10px; z-index: 1000; text-align: center; line-height: 25px;\';
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: #cccccc;\';
var dialogStyle = \'z-index: 1000; position: fixed; left: 50%; top: 50%\';
var contentStyle = \'font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #cccccc; border: 2px solid #808080; border-radius: 5px; position: relative; left: -50%; margin-top: -25%; background-color: #003366; padding: 20px; box-shadow: 4px 4px 25px #888888;\';
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\';
dismissLink.style.color = \'#cccccc\';
dismissLink.style.whiteSpace = \'nowrap\';
dismissLink.style.textDecoration = \'none\';
dismissLink.style.borderWidth = \'1px\';
dismissLink.style.borderStyle = \'solid\';
dismissLink.style.borderColor = \'#cccccc\';
dismissLink.style.backgroundColor = \'#c71585\';
dismissLink.style.borderTopLeftRadius = \'3px\';
dismissLink.style.borderTopRightRadius = \'3px\';
dismissLink.style.borderBottomLeftRadius = \'3px\';
dismissLink.style.borderBottomRightRadius = \'3px\';
dismissLink.style.paddingLeft = \'3px\';
dismissLink.style.paddingRight = \'3px\';
dismissLink.style.paddingTop = \'1px\';
dismissLink.style.paddingBottom = \'1px\';
dismissLink.style.boxShadow = \'inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15)\';
return dismissLink;
}
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(\'a\');
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = \'_blank\';
infoLink.style.marginLeft = \'24px\';
infoLink.style.color = \'#cccccc\';
infoLink.style.whiteSpace = \'nowrap\';
infoLink.style.textDecoration = \'none\';
infoLink.style.borderWidth = \'1px\';
infoLink.style.borderStyle = \'solid\';
infoLink.style.borderColor = \'#cccccc\';
infoLink.style.backgroundColor = \'#c71585\';
infoLink.style.borderTopLeftRadius = \'3px\';
infoLink.style.borderTopRightRadius = \'3px\';
infoLink.style.borderBottomLeftRadius = \'3px\';
infoLink.style.borderBottomRightRadius = \'3px\';
infoLink.style.paddingLeft = \'3px\';
infoLink.style.paddingRight = \'3px\';
infoLink.style.paddingTop = \'1px\';
infoLink.style.paddingBottom = \'1px\';
infoLink.style.boxShadow = \'inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15)\';
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() {
// Set the cookie expiry to one year after today.
var expiryDate = new Date();
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
document.cookie = cookieName + \'=y; expires=\' + expiryDate.toGMTString() + \'; path=/\';
}
function _shouldDisplayConsent() {
// Display the header only if the cookie has not been set.
return !document.cookie.match(new RegExp(cookieName + \'=([^;]+)\'));
}
var exports = {};
exports.showCookieConsentBar = showCookieConsentBar;
exports.showCookieConsentDialog = showCookieConsentDialog;
return exports;
})();
window.cookieChoices = cookieChoices;
return cookieChoices;
})(this);
File: policy.php
<script type="text/javascript" src="\">
document.addEventListener(\'DOMContentLoaded\', function(event) {
cookieChoices.showCookieConsentBar(\'Questo sito utilizza alcuni cookie tecnici per migliorare l\'esperienza dei lettori. Se continui la navigazione di questo sito o chiudi questo banner accetti il loro uso\', \'Chiudi\', \'Informativa\', \'\');
});
Infine basta mettere in tutti i file dopo per chi ha un sito statico oppure nel template per chi ha un CMS o WP…
Grazie Teresa, ottimo post il tuo! Ciao.
Ciao teresa, grazie mille per la guida, semplice e molto chiara. Ti scrivo perchè ho bisogno di un’informazione che non trovo né nella guida né nelle risposte agli altri utenti. Volevo sapere se c’è un modo per far si che nel caso l’utente ignori il messaggio e scorra esso si chiuda automaticamente (dopo circa 10/15 secondi) come se i cookie fossero accettati. Grazie mille e complimenti ancora 🙂
Ciao Lorenzo, benvenuto sul blog! 😉
Allora, fai in questo modo: apri il file cookiechoices.js
cerca la riga seguente: function _showCookieConsent(cookieText, cookieText2, dismissText, linkText, linkHref, isDialog) {
prima della riga precedentemente trovata inserisci la seguente funzione:
function detectScroll() {
document.onscroll = function() {
_removeCookieConsent();
};
}
ora bisogma modificare la function _showCookieConset (la funzione che hai trovato prima) in questo modo:
function _showCookieConsent(cookieText, cookieText2, dismissText, linkText, linkHref, isDialog) {
if (_shouldDisplayConsent()) {
_removeCookieConsent();
setTimeout(detectScroll,15000);
praticamente va aggiunto setTimeout(detectScroll,15000); 15000 equivale a 15 secondi ma puoi regolarti come meglio credi.
infine trova la funzione function _removeCookieConsent() { e aggiungi document.onscroll = null; in questo modo:
function _removeCookieConsent() {
var cookieChoiceElement = document.getElementById(cookieConsentId);
if (cookieChoiceElement != null) {
cookieChoiceElement.parentNode.removeChild(cookieChoiceElement);
document.onscroll = null;
}
}
Testato su chrome. firefox, iexplorer 11
Se hai problemi puoi tranquillamente contattarmi! 😉
Ciao Teresa,
grazie della tua rapidissima risposta, ho testato il codice che mi hai suggerito e funziona, ma purtroppo non è ancora perfetto. Il banner sparisce dopo 15 secondi ma se dopo cambio pagina ricompare poiché non è stato accettato; invece io ho bisogno che quando risulta ignorato è come se l’utente abbia cliccato su Chiudi.
Penso siano un paio di righe di codice ma non so dove andare a mettere mano.
Attendo risposta e ti ringrazio anticipatamente.
Lorenzo
Se vuoi che il banner sparisca sullo scroll come quando si preme sul pulsante “chiudi”, modifica la funzione detectScroll che hai appena aggiunto in questo modo:
function detectScroll() {
document.onscroll = function() {
_dismissLinkClick();
};
}
questa volta non l’ho testato….ma dovrebbe andare 😀
Funziona perfettamente. Grazie mille!!! 🙂
Se ho ancora bisogno (magari per la grafica) ti scrivo.
Buon weekend
Lorenzo
Perfetto!! Buon WE anche a te!
Teresa
ciao, grazie mille per la barra banner funzionante al 100%
Ho solo una domanda, come faccio a portare prima il pulsante “ok/ho capito” e dopo il link per l’informativa cookie??
Ciao Fabrizio, benvenuto!
Apri il file cookiechoices.js e trova la funzione:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref)
al suo interno devi trovare queste righe:
if (!!linkText && !!linkHref) {
cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
}
cookieConsentElement.appendChild(_createDismissLink(dismissText));
e infine devi invertirle in questo modo:
cookieConsentElement.appendChild(_createDismissLink(dismissText));
if (!!linkText && !!linkHref) {
cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
}
buonasera teresa, premetto che il tuo script è l’ unico che funziona veramente e ti ringrazio a mille.
ora vorrei apportare alcune modifiche al banner. malgrado abbia seguito le tue indicazioni nel post di giorgio 20 agosto, non sono riuscito a cambiare il colore del banner. eppure visualizzando la sorgente pagina si vede il mio cookiechoices modificato.
quali errori ho commesso?
buona serata
ancora mille grazie. complimenti per la professionalità e la pazienza.
Ciao Piero… ti ringrazio per i complimente, ma lo script non è mio, ma è quello messo a disposizione da google! 😉
Comunque, le modifiche consigliate a Giorgio, non vanno bene per il te… nel senso che Giorgio ha utilizzato il banner, mentre tu hai utilizzato la dialogbox ed è per questo che non funzionano le modifiche.
Nel tuo caso, devi modificare lo style nella function _createDialogElement e non nella _createHeaderElement
Saluti…
grazie per la tempestività, purtroppo l’ ho letto solo ora. ho provato e funziona benissimo, un ultimo favore, se volessi cambiare lo stile dei testi e il colore?
grazie
ciaoooo
Per cambiare il colore del testo, basta aggiungere l’attributo color allo stile, quindi se vuoi il testo in nero aggiungei color:#000;
Per cambiare il font invece, devi utilizzare font-family per esempio in questo modo:
font-family: “Times New Roman”, Georgia, Serif;
Nell’esempio ho inserito 3 font perchè se il primo non è installato nel client, verrà usato il secondo e così via
questo è valido per i font standard… se ne vuoi uno non standard, lo devi dichiarare nel css in questo modo:
@font-face {
font-family: tuo_nome_font;
src: url(indirizzo_del_font/nome_file_font);
}
e poi per utilizzarlo :
font-family: tuo_nome_font;
Teresa,
ho letto (quasi) tutti gli interventi ma non ci salto fuori…..
Sto tentando di modificare il file js per ottenere due semplici modifiche:
1) mettere in grassetto la parola “Informativa.”
2) cambiare il colore di sfondo del banner.
Siccome mi sembrava la più semplice, sono partito dalla 2^ modifica inserendo nel cookiechoiches.is il codice colore “ffff00” al posto di quello che c’è ora che è “eee”. Però non mi cambia il colore!
A questo punto, mi sono fermato e non ho affrontato nemmeno la 1^ modifica.
Dove sbaglio? e come modifico il grassetto una sola parola?
Grazie
Giusto per completezza, la modifica del colore di sfondo la sto tentando di fare qui:
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:10001;text-align:center;’;
var cookieConsentElement = document.createElement(‘div’);
cookieConsentElement.id = cookieConsentId;
cookieConsentElement.style.cssText = butterBarStyles;
cookieConsentElement.appendChild(_createConsentText(cookieText));
Ciao Giorgio, perfetto il posto giusto è quello che hai indicato. cambia nella variabile butterBarStyles
background-color:#eee;
in
background-color:#ffff00;
e lo sfondo diventerà di un bel giallo canarino!
Teresa,
il problema è proprio quello: non mi cambia colore! Se guardi il sito vedrai che il banner è di un tortora chiaro mentre nel file JS ho modificato in #ffff00 come vedi sotto:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;background-color:#ffff00;’
Ma nel tuo file cookiechoicess.js, leggo:
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;’;
sei sicuro di aver copiato e sovrascritto sul server il file modificato?!?!
certo che ne sono sicuro, mi ci sono scornato “n” volte. Via FTP ho trascinato il nuovo JS dal pc al remoto; comunque, giusto per non lasciare nulla di intentato, ora ho cancellato su remoto il js e caricato EX-NOVO un JS che avevo modificato (con Notepad++) dopo aver controllato (riaprendo il file) che la mnodifica fosse recepita. Non solo, mi sono collegato all’hosting (Aruba), ho portato in locale il JS e l’ho aperto: alla riga 34 il codice colore risulta “ffff00”. Ma se entro nel sito è ancora tortora!! Ma cosa succede? Riesci a dare un’occhiata?
Grazie
Grazie
ferma tutto, annullo il messaggio delle 14.31. Non so come ho fatto ma ora la barra ha cambiato colore!
Guardandolo però lo trovo un pò magrino….. Come posso fare l’area del banner più alta, un carattere con qualche punto in più e la parola “informativa” in grassetto? 🙂
Grazie
‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;’;
Ecco, bravo ora è giallo!!!! per una cura ricostituente, modifica attribuisci allo stile questi valori sempre nella riga precedente:
position: fixed;
width: 90%;
margin: 0px;
left: 0px;
top: 0px;
z-index: 1000;
text-align: center;
background-color: #FFFF00;
line-height: 23px;
font-size: 16px;
padding: 2% 5%;
Sì può andare bene, non ho grandi esigenze estetiche, ci sono però da sistemare 2 cosette:
– il banner non riempie l’intera pagina ma a dx si ferma prima: forse devo aggiungere un “right:0px”?
– potresti darmi l’istruzione per mettere in grassetto “Informativa”?
Grassssie 🙂
Bene, il banner non copre tutta la pagina, perchè hai mancato di inserire il padding. Se non vuoi inserirlo, devi riportare width a 100%. Ti avevo indicato 90% perchè:
90% + padding sinistro 5% + padding destro 5% = 100%
Per mettere in grassetto “informativa”, non puoi utilizzare semplicemente il css, ma devi modificare un bel po’ il js. Se vuoi ti mando in email cookiechoices.js con la modifca, perchè per messaggio, sarebbe uno sbattimento! 😉
il padding era inserito, solo che non avevo messo “:” 🙂
Per quanto al grassetto, no grazie Teresa non voglio tenerti impegnata per una cosa che in fondo in fondo non mi renderebe il banner campione di bellezza grafica. Per i miei scopi amatoriali, ho già perso (e fatto perdere) anche troppo tempo.
Grazie per la collaborazione, sei veramente disponibilissima e gentile!!
Grazie per la risposta Teresa, sei stata molto gentile. Hai ragione stavo navigando in anonimo. Mi è venuta in mente un altra domanda, se posso approfittare della tua competenza e disponibilità.
Come si può stilizzare il titolo dell’informativa breve, dove tu hai scritto nel banner (Informativa) con una scritta più grande, in grassetto e di colore per esempio rosso?
Saluti con immensa gratitudine
Figurati!!! 😉 Pepete, se leggi qualche messaggio più in basso, trovi tutte le info per personalizzare il banner come meglio preferisci…anche con eventuali modifiche al file cookiechoices.js…
Ciao Teresa. Vorrei fare due domande:
Si può fare in modo che quando scrolli la pagina il banner scompaia?
Quando appare il banner dopo che viene cliccato il bottone CHIUDI vuol dire che l’utente ha accettato o cookie, ma secambi pagina il banner compare di nuovo. Si può eliminare questo problema e fare in modo che l’accettazione dei cookie non faccia più apparire il banner? Ho notato che anche nel tuo Blog funziona così. L’utente è costretto a cliccare CHIUDI ogni volta che cambia pagina. Grazie.
Ciao Pepete, benvenuto!
si può fare tutto ciò che vuoi…. io ho preferito non farlo, in quanto navigando in rete ho visto alcuni siti che adottavano questo metodo e mi sono accorta che il banner non faceva in tempo ad essere visualizzato del tutto, perchè avevo già scrollato!!!
Il banner installato sul mio blog, che poi è quello che ho suggerito, funziona proprio come dici tu ed è compatibile con tutti i browser. Dopo aver chiuso il banner, ti ricompare dopo 365giorni!!! Probabilmente hai impostato il tuo browser a non ricevere i cookie oppure stai navigando in anonimo! 😀
Ciao Teresa,
complimenti per il tutorial. Ho installato lo script e funzioina.
Sapresti indicarmi quali parametri modificare per farlo apparire nel footer della pagina anzichè in alto? Proprio come nel tuo blog.
Grazi mille.
Ciao Gabriele, fai in questo modo apri il file cookiechoices.js
alla riga num 34 trovi questa istruzione:
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;’;
modificala con
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; bottom:0;padding:4px;z-index:1000;text-align:center;’;
praticamente va cambiato top:0 con bottom:0
salva e il banner verrà visualizzato in basso… 😉
Ciao Teresa, seguo con interessi i tuoi consigli e li trovo molto utili posso chiederti se puoi visualizzare la sorgente della mia pagina perchè non riesco a chiudere il banner (come vedrai ho preso molti spunti da te)
Grazie per il tuo tempo
Ciao Roberto, benvenuto sul blog! Ho dato uno sguardo al tuo sito… ma non riesco a capire come hai messo il banner !?!?!? 😀
Scusami, ma hai caricato il file cookiechoices.js sul server e richiamato lo script del banner dalla pagina o hai semplicemente copiato la parte di codice html e css che genera il banner dal mio sito?
Se hai utilizzato la seconda soluzione, non riuscirai mai a farlo funzionare!!!! 😉
Ciao! Grazie in anticipo per il suggerimento…ho inserito il banner cookie utilizzando dreamweaver ed in locale tutto funziona alla perfezione. Una volta messo in rete appare solamente su Firefox ma non su Chrome ed Explorer. Premetto ho diversi js (slide , menu a scomparsa e un popup) in home. Come posso evitare il conflitto per i due browser principali?
Grazie per il supporto
Ciao Ila, purtroppo, senza dare uno sguardo al tuo lavoro non riesco ad aiutarti… Non hai una versione online anche di prova?
Grazie mille! Sei davvero una delle migliori blogger 🙂 Come mi ha suggerito Teresa in privato si è trattato di spostare lo script del cookie sotto quello di un banner che ho utilizzato in homepage. In questo modo si è evitato il confitto ed ora è ben visibile su tutti i browser. A volte bisogna spostare il codice javascript sotto ad altri.Niente panico ragazzi! 😀 L’unione fa la forza!!!!
Grazie mille.
era proprio una cavolata…
ma l’avevo guardata e riguardata senza trovarla…
sistemata…
Perfetto…. a volte 4 occhi sono meglio che due!! 😀 alla prossima….
ciao Teresa, scusami, mi tocca chiedere ancora aiuto.
Ho ripetuto la procedura anche nell’altro sito, ma il banner non appare proprio…
Devo aver sbagliato qualcosa…
Riesci a darmi aiuto…
Grazie
Certo che riesco a darti un aiuto!! 😀 Allora, se vai nella frase da visualizzare agli utenti, hai scritto:
qualunque suo elemento acconsenti all/’uso dei cookie.
per far si che funzioni, devi semplicemente inserire il backslash al posto dello slash prima dell’apice…
ciao Teresa e intanto molte grazie per la tua utilissima guida.
sono riuscito a pubblicare il banner.
Poi ho personalizzato i colori agendo sullo script…, per non fare casino con i css
Ma il casino lo devo aver fatto lo stesso… la scritta del link all’informativa estesa è illeggibile… probabilmente dello stesso colore dello sfondo…
Dove posso andare a cambiarla ?
Grazie
Ciao Andrea, ti confermo che il problema è il colore del link uguale allo sfondo… se vuoi modificarlo con i css, non devi fare altro che aggiungere le seguenti linee nel foglio style:
#cookieChoiceInfo a {
color: #000;
}
altrimenti, se non vuoi toccare il file css, ti tocca fare la modifica del file cookiechoices,js che ho indicato a Francesco qualche post più sopra (nella fase 2)
Ciao Teresa, grazie per l’indicazione.
Ho inserito il codice nel css.
Ora il banner è perfetto.
Grazie mille
Ciao Teresa, scusami mi sono persa… ho cercato di aggiungerti nelle cerchie da g+, puoi contattarmi tu? non so bene come fare. Grazie!
Ciao Teresa, complimenti per l’iniziativa, ho joomla 2.5, ho aggiunto al codice lo script per il banner ma adesso lo vorrei modificare ma nei fogli di stile del template non trovo il modulo cookiecoice…? Come puoi aiutarmi? grz
Ciao Giuseppe, puoi inserire il css relativo al banner, semplicemente aggiungendo i selettori nel file css del template che hai installato su joomla…non ricordo bene se è template.css o style.css…
Gentilissima,
innanzi tutto complimenti per il tuo blog è soprattutto per questo articolo, mi è stato utilissimo!
Ho inserito il banner in diversi siti che gestisco, ma in alcuni per qualche ragione a me ignota su internet explorer non vengono visualizzati, mentre su tutti gli altri browser si. Purtrtoppo non si può abolire IE anche se mi piacerebbe, quindi…hai suggerimenti?
Uno dei siti che gestisco è questo http://www.oratoriaforense.unimi.it
Ciao Alice, ti ringrazio per i complimenti! Per la questione iexplorer, non saprei dirti, ma tra un paio di giorni torno a casa e faccio qualche prova. purtroppo con me non ho un portatile con questo browser installato.
Lo script, nelle ultime prove che ho fatto, ho riscontrato problemi con la versione 8 di iexplorer e antecedent…, per le versioni successive invece funziona.
Ciao Teresa,
grazie per la risposta, io l’ho provato sull’11 ma non va, la cosa assurda è che su un altro sito invece funziona correttamente…mistero!
Ciao Alice, ho controllato con iexplorer il sito che hai indicato e a quanto pare funziona tutto correttamente. Hai provato magari a cancellare i cookie dal browser?
Ciao Teresa,
ho risolto l’arcano, avevo messo il dominio unimi in visualizzazione compatibilità, per questo non si vedeva il banner!
Ti ringrazio moltissimo per la pazienza!
Perfetto, in effetti mi sembrava strano… meglio così, l’importante è che alla fine si è risolto tutto! In bocca al lupo…
ciao, grazie per le indicazioni e la guida. l’unica cosa è che il sito che ho io http://www.annoallestero.it non è fatto con wordpress joomla etc ma in dreamweaver quindi manuale diciamo. il banner funziona, ma non riesco a trovare i campi per modificare colore testo, dimensioni testo e trasformare i link accetto o maggiori info in tastini nel rigo sotto al testo. non sapendo creare un css a parte, posso inserire o modificare queste info sul cookiechoices.js? e come? so solo cambiare il background. grazie
Ciao Antonella, benvenuta… se leggi qualche commento più sopra, precisamente la discussione con Francesco troverai tutte le indicazioni per modificare i css direttamente dal file js… 😉
ti ringrazio ma il fatto èche ho usato i codici che avevi mandato a lui e non funziona pià il cookie banner.
usando il tuo primo suggerimento ho modificato la parte
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:80%;background-color:#333;’ +
‘margin:0; left:0; top:0;padding:20px 10%;z-index:1000; color:#FFF; line-height:1.8em’;
in html mi da errore riga 35, ovvero al rigo “margin” .js e infatti il banner che prima funzionava ora non si visualizza più affatto http://www.annoallestero.it, vedi home
non sono quindi andata oltre per non fare altri danni..
puoi dirmi dove sbaglio?
in buona sostanza vorrei il banner fondo nero, scritta bianca, i tastini accetto o maggiori info su un rigo separato dopo il testo del banner, con pulsante rosso e scritta bianca.
grazie e scusa per il distrurbo.
Ciao Antonella, scusami, ma quando ricopio il codice nei commenti c’è sempre qualcosa che si aggiunge da solo…. dopo 1.8em, non bisogna mettere il backslash, quindi la riga, finisce con 1.8em(virgoletta)…
grazie, infatti togliendo ora va. mi spiace farti perdere tempo ma cambiando le altre coordinate come da te indicato mi da ulteriori errori.
ecco il codice, vedi errori?
errore riga 106 da “font weight bold” in poi
function _createDismissLink(dismissText) {
var dismissLink = document.createElement(‘a’);
_setElementText(dismissLink, dismissText);
dismissLink.id = dismissLinkId;
dismissLink.href = ‘#’;
var dismissLinkstyle = ‘marginLeft:24px; padding:5px 8px; color:#BBD; background-color:#58C;’+
‘font-weight:bold; color:#FFF; text-decoration:none; border-radius:4px’;
dismissLink.style.cssText = dismissLinkStyle;
return dismissLink;
}
E idem su
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
var infoLinkStyle = ‘margin-left:8px; color:#8AD;’;
infoLink.style.cssText = infoLinkStyle;
return infoLink;
}
grazie mille come sempre
Figurati Antonella, per me non è una perdita di tempo!!! 😀 allora… se guardi nelle righe
var infoLinkstyle = ‘margin-Left:8px; color:#8AD’;
infoLink.style.cssText = infoLinkStyle;
Nella prima riga quando definisci la variabile hai scritto infoLinkstyle con la s minuscola
mentre nella seconda riga quando fari riferimento a questa variabile hai scritto: infoLinkStyle con la s maiuscola… sistema quindi semplicemente mettendo la maiuscola alla prima riga… 😉 Se ci sono altri errori, non esitare a chiedere, vedrai che la situazione la risolviamo!!!! 😀
Ciao, ho letto la tua cookie policy e ho visto che verso la fine c’è una tabella con tutti i cookie attivi… volevo chiederti se c’è un modo per verificare quali cookie sono presenti nel proprio sito cosi da replicare la tab.
Grazie in anticipo 🙂
Ciao Giuseppe, se hai chrome, vai nel menu e seleziona “Altri strumenti” -> “Strumenti per sviluppatori”. Nella finestra che si apre, clicca su “Resources” a questo punto ti compare l’elenco dove puoi visualizzare i Cookies e non solo 😉
Grazie 1000 🙂
Figurati!!! 😉
Cara Teresa
non sono tanto pratica di codici, ho seguito le tue istruzioni (modifica file del foglio stile del sito web e inserimento script)ma non appare nulla, dove sbaglio?
Il sito è http://www.onoranzefunebripegaso.com, grazie mille in anticipo per la collaborazione
Ciao Steff, hai fatto tutto correttamente…. l’errore sta nel messaggio da visualizzare che include un apostrofo. Per correggere anteponi all’apostrofo un backslash e vedrai che funziona.
Per esempio:
di terze parti per statistiche sull\\’utilizzo del sito.
ATTENZIONE!!! nell’esempio compaiono due backslash, ma bisogna metterne solo uno!!! 😉
Fammi sapere come è andata.
Gent.ma Teresa
avendo dato uno sguardo al tuo blog reputo la tua disponibilità adatta alla mia esigenza di poter risolvere un problema riferito all ‘inserimento del banner per la normativa cookie.
noi abbiamo il sito sviluppato con SUPERSITE DI ARUBA ma dopo aver fatto diversi tentativi per inserire questo banner non sono riuscito a risolvere.
avendo piu volte chiesto assistenza ad aruba non sono in grado di potermi dare risposte valide e pratiche . Confidando nella tua gentilezza , nel limite del possibile , spero in un tuo aiuto. Grazie cordiali saluti
Ciao Francesco, premetto che non conosco il servizio SUPERSITE di Aruba e quindi non ne conosco i limiti. Comunque, ho dato uno sguardo al tuo sito, ed il problema è che non riesce a caricare il file cookiechoices.js. Questo file, a quanto pare è presente sul sito quindi l’hai caricato, ma risulta vuoto.
Se il servizio SUPERSITE, non ti permette di caricare file js su tuo server, usa la soluzione che ho indicato per la piattaforma blogger nell’articolo “Inserire il banner per il consenso all’uso dei cookie” che trovi all’inizio del presente articolo.
Dovrai semplicemente sostituire la riga:
<script src=”/cookiechoices.js”></script>
con l’intero script… lo trovi sempre nell’articolo che ti ho indicato.
Tienimi aggiornata che risolviamo! 😉
Buongiorno Teresa , ti ringrazio per avermi risposto e chiedo venia se non ho avuto la possibilità di risponderti.
Volevo sapere come sostituire la riga di script in questione. Devo ometterla ?
Come posso inviarti le opzioni che mi permette di fare supersite cosi da poter capire meglio ?
Grazie cordiali saluti
Scusami Teresa ho visto lo script da sostituire. Devo caricarlo sul server ? o devo inderirlo in ogni pagina. SuperSite mi da la possibilità di avere per ogni pagina le seguenti opzioni :
SCRIPT PAGINA : script Globali e script specifici della pagina
SCRIPT BODY : script Globali e script specifici della pagina
Teresa puoi dirmi se questo codice è giusto e dove devo inserirlo ?
Alla fine dello script da sostituire ho inserito lo script dialog .
//
//
Ciao Francesco, scusami se ti rispondo solo ora. Ho dato uno sguardo al tuo sito… sbaglio o sei riuscito ad inserire il banner?
Ciao Teresa , si sono riuscito a inserirlo per fare la prova. soltanto che al privo tentativo l’ho visto , poi effettuando la modifica al testo per il visitatore non lo vedo più per verificare se va bene o meno. come puoi aiutarmi ? e se mi puoi dire come modificare il css
Ciao Francesco, non vedo più lo script nel sorgente della tua pagina…
Ciao Teresa scusami sono riuscito ad inserire il banner . vorrei sapere come allineare e aumentare il testo e la grafica senza passare dal css.
Eccomi!! 😀 Perfetto… trova nello script la seguente riga e modifica lo style a tuo piacimento.
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;’;
Buongiorno Teresa , per prima cosa ti ringrazio per avermi dato una mano a risolvere questo incoveniente , sei davvero una persona in gamba e molto disponibile, ed è difficile oggi trovare una collaborazione tra persone che non si conoscono . Grazie ancora
Io non sono molto esperto in questo settore , mi sono cimentato a realizzare dei siti solo per via della mia testardaggine di riuscire. La mia esperienza di fotografo e il mio lavoro abbinato alla grafica mi ha portato ad immettermi in un mondo non mio con discreti risultati , pur non essendo nel settore del web.
Detto ciò avrei l’esigenza di adattare il banner a questo sito e per precisione dovrei cambiare :
lo sfondo del banner : SCURO
il testo: BIANCO
le stringhe di testo : ALLINEATE
Le scritte , “cookie policy” e “chiudi” sulla stessa riga e magari con grafica tipo bottone.
Il tutto prossibilmente da modificare senza css , ma dallo script sorgente.
E’ possibile fare ciò ?
Cordiali Saluti
Ciao Francesco, figurati è un piacere…. vediamo come posso aiutarti.
Inizia con queste impostazioni… mi raccomando, non usare il copia incolla dal messaggio, ma modifica riscrivendo le parti modificate…
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:80%;background-color:#333;’ +
‘margin:0; left:0; top:0;padding:20px 10%;z-index:1000; color:#FFF; line-height:1.8em’;
Ciao Teresa , innanzitutto grazie.
La voce “text-align:center;” la devo togliere e inserire questa ? :
color:#FFF; line-height:1.8em’;
Fatto Teresa ad intuito ho aggiunto il tutto ed è OK. Sei una grande.
Dimmi soltanto come mettere i pulsanti cookie policy e chiudi.
Mi era sembrato di capire che non ti piaceva il testo centrato… se così fosse togli text-align:center;
invece color:#FFF; line-height:1.8em; va aggiunto lo stesso
No Teresa va bene cosi’ e perfetto . Per i pulsanti come faccio ?
Seconda fase… modifica le seguenti funzioni dello script in questo modo per personalizzare i link.. (mi raccomando evita il copiaincolla, di sicura qualcosa andrebbe perduto!!!)
function _createDismissLink(dismissText) {
var dismissLink = document.createElement(‘a’);
_setElementText(dismissLink, dismissText);
dismissLink.id = dismissLinkId;
dismissLink.href = ‘#’;
var dismissLinkStyle = ‘margin-left:24px; padding:5px 8px; color:#BBD; background-color:#58C;’+
‘font-weight:bold; color:#FFF; text-decoration:none; border-radius:4px’;
dismissLink.style.cssText = dismissLinkStyle;
return dismissLink;
}
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
var infoLinkStyle = ‘margin-left:8px; color:#8AD;’;
infoLink.style.cssText = infoLinkStyle;
return infoLink;
}
Scusami Teresa non avevo visto che mi avevi già mandato il procedimento
Buonasera Teresa scusami se ti disturbo ,
puoi controllarmi il codice dello script ? ho fatto le modifiche per quanto riguarda la seconda fase ma non vedo più lo script. Puoi verificare dov’è l’errore ?
Grazie infinite
Eccomi!!! allora, devi mettere le due righe seguenti su di una sola e vedrai che tutto andrà a posto!
var dismissLinkStyle= ‘margin-left:24px; padding:5px 8px;
color:#BBD; background-color:#58C;’+
Ciao Teresa , volevo dirti nuovamente GRAZIEEEE per tutto sei stata gentilissima e molto disponibile. ho ottenuto grazie a te cio che volevo . Ho cambiato anche il colore del banner ed è risultato simle ai colori del sito.
Sicuramente avrò ancora bisogno se per te non è una seccatura . Ma per il momento ti dico grazie ancora.
Un saluto e buone vacanze estive a te e famiglia
Ciao Francesco… grazie, sei troppo gentile!!! Buone vacanze anche a te… 😉 Alla prossima!
Grazie mille Teresa ora funziona tutto… sei stata gentilissima
Buon lavoro 🙂
Stefi
Ciao, vorrei sapere come fare per far andare a capo il messaggio che appare sulla barra di avviso in quanto se troppo lungo va a capo automaticamente ed è brutto, in pratica volevo metterlo su 2 righe però ho provato in vari modi (, r, n) ma non funziona, come posso fare?
Ciao Paolino, la funzione che scrive la stringa sullo schermo dello script, non permette di andare a capo con i soliti metodi… voglio comunque darti una soluzione, visto che questo quesito mi è stato posto da molti…
apri il file cookiechoices.js, trova la riga seguente
content.appendChild(_createConsentText(cookieText));
e sostituiscila con le righe
var elementiInfo = cookieText.split(‘<br>’);
for (var item in elementiInfo) {
content.appendChild(_createConsentText(elementiInfo[item]));
if (item+1<elementiInfo.length)
content.appendChild(document.createElement(‘br’));
}
———— MI RACCOMANDO NON FARE COPIA INCOLLA —————
ora non resta che inserire nel messaggio il tag <br> dove vuoi mandare il testo a capo e il gioco è fatto!
Fammi sapere se funziona… 😉
Grazie Teresa, ma nonostante abbia digitato a mano il codice, NON funziona: resta come prima.
Da così
content.appendChild(_createConsentText(cookieText));
if (!!linkText && !!linkHref) {
content.appendChild(_createInformationLink(linkText, linkHref));
}
è venuto così
var elementiInfo = cookieText.split(”);
for (var item in elementiInfo) {
content.appendChild(_createConsentText(elementiInfo[item]));
if (item+1<elementiInfo.lenght)
content.appendChild(document.createElement('br'));
}
Dov'è lo sbaglio? Grazie
Ciao Paolino, la parte di codice da sostituire è nella funzione function _createHeaderElement e non in function _createDialogElement( dove l’hai messo.
poi aggiusta f (item+1<elementiInfo.lenght) in f (item+1<elementiInfo.length)
ti metto le righe al completo, con una variante
var elementiInfo = cookieText.split(‘<br>’);
for (var item in elementiInfo) {
cookieConsentElement.appendChild(_createConsentText(elementiInfo[item]));
if (item+1<elementiInfo.length)
cookieConsentElement.appendChild(document.createElement(‘br’));
}
questa volta ho provato e così funziona!!! 😉
fammi sapere....
Si ora funziona! Grazie!!!
ciao
Ciao Teresa,
anche io volevo chiederti un aiuto sulla personalizzazione del banner per i cookies.
Nonostate abbia seguito le dettagliate righe di codiceche hai suggerito a Paolino nella mia pagina non riesco ad utilizzare il tag per andare a capo, ma continuo a vedere il tag visualizzato come testo.
Riesci a vedere se nel JS che ho modificato c’e’ qualche errore che non ho capito?
Grazie mille in anticipo.
Daniele
Ciao Daniele, benvenuto…. hai copiato la porzione di codice descritta nel precedente messaggio nel posto sbagliato 😉
devi fare la sostituzione in function _createHeaderElement e non in function _createDialogElement
e poi nella riga if (item+1<elementiInfo.lenght) hai scritto lenght che è va corretto in length!!
Fammi sapere se così funziona....
Grazie mille Teresa, ora funziona!
Ho corretto il typo in “length” e spostato il codice nella funzione corretta.
Ho notato pero’ che la modifica riesce ad intercettare solo un singolo , infatti se ne inserisco due per andare a capo in due punti diversi, non mi accetta il secondo tag .
Secondo te c’e’ modo fargli digerire anche questo secondo “a capo”?
Come si aggiungono altri tags da far riconiscere allo script (es. )?
Grazie mille ancora!
Daniele
Ciao Daniele, i tag non vengono riconosciuti per via della riga:
if (item+1<elementiInfo.length)
modificala in questo modo:
if (parseInt(item)+1<elementiInfo.length)
oppure se preferisci così:
if (item<elementiInfo.length-1)
e vedrai che potrai utilizzare tutti gli "a capo" che vuoi!!!;)
Ciao Teresa,
Grazie di cuore per tutto l’aiuto che mi hai dato per inserire il banner in conformita’ alla cookie law.
Dopo essere impazzita per una settimana ora anche il mio sito, http://www.goingbahamas.com e’ conforme alla legge europea.
La policy non e’stata affatto un problema, mi piace scrivere.
Il banner invece!!! Ho cercato dappertutto ma, anche quelli forniti da cookie.script o da silktide non funzionavano. Mi sono iscritta a cento siti ma nessuno manteneva la promessa di dare un banner gratis.
Sei apparsa come un miracolo quando ero quasi decisa a pagare il servizio.
Ho apportato alcune modifiche ai colori e…voila’.
Non e’ il banner piu’ bello, ma c’e’ spazio per altre modifiche.
Il tuo sito e’ bellissimo. Ci sono approdata solo oggi e non ho avuto il tempo per curiosare. L’hai costruito tu o hai usato una piattaforma?
Grazie ancora e aspetto la risposta.
ciao Sandra, sono molto contenta di esserti stata d’aiuto! Per il mio sito ho usato wordpress, il tema e la maggior parte dei plugin invece li ho realizzati io…;) In realtà il tema che vedi, non è altro che quello di martavi.it (il sito della mia bimba) adattato in attesa di trovare il tempo di realizzarne uno ad hoc.
Ti ringrazio per i complimenti…
Ok. Ho deciso. Per il mio prossimo sito, anzi blog usero’ WordPress.
Questo era solo un sito di prova, l’ho fatto interamente senza appoggiarmi ad alcuna piattaforma, ma quale principiante mi ha richiesto una fatica immane.
Ho imparato mentre lo facevo. Ora sto seguendo un corso edx su HTML5 e CSS3 perche’ ci ho preso gusto, ma il mondo dei programmatori e’ estremamente complicato.
Oggi ho messo a punto il banner di Google e tutto funziona a puntino ora.
Posso suggerire il tema per un futuro post? Come aumentare le dimensioni del banner.
Ancora tante grazie.
S.
Brava Sandra, vedo che sei una persona decisa! Sono sicura che ce la farai alla grande…
Per aumentare le dimensioni del banner, basta modificare il css
per esempio, vai nel file cookiechoices.js e modifica lo style di cookieChoiceInfo riducendo width ed aumentando il padding in questo modo:
position: fixed; width: 80%; margin: 0px; left: 0px; top: 0px; padding: 20px 10%; z-index: 1000; text-align: center; background-color: #EEE;
ricorda solo che width + padding deve fare sempre 100% nell’esempio precedente
il width=80% il padding dx e sx è 10% quindi 80%+10%+10% = 100%
Spero di essere stata chiara!!! In bocca al lupo per tutto…
Whaooo! Velocita’ nel rispondere e grande competenza = successo assicurato.
Mi leggero’ con calma le istruzioni e ti faro’ sapere.
Una curiosita’, dove hai imparato tutte questo?
Grazie
anche il rollOver non mi funziona 🙁
Ciao Anna, Sei su G+ magari in chat riusciamo a sistemare più velocemente… 😉
Grazie Teresa, ho fatto ciò che mi hai scritto ma purtroppo va a capo solo metà del bottone…vorrei metterlo tutto a capo incluso il linl all’informativa…
devo dire anche che il banner lo preferisco che copre tutto il layout a destra, non mi piace molto che finisce prima…
ciao Teresa … ringrazio anticipatamente per il tempo che hai speso per aiutare chi ti ha seguito in questi giorni … di mio non necessito di grande aiuto ma solo non capisco del perché il banner si ripropone dopo un paio di giorni anche se lo chiudo … uso firefox solitamente .. non dovrebbe garantire un minimo di 12 mesi? eppure un giorno si ed uno no poi mi riesce e devo ricliccarlo … il mio sito è http://www.ilcompatibileshop.com Grazie
Ciao Massimiliano… la riga di codice, presente nel file cookiechoices.js presente nel tuo sito, che regola la durata del cookie è questa:
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
Quindi la durata è correttamente impostata a 1 anno (12 mesi).
Hai provato anche con altri pc… posso solo pensare che c’è qualcosa sul tuo pc che cancella il cookie, forse qualche programma antivirus, spyware, malware, ecc
grazie per la risposta, uso norton ma non so se sia quello …. provo a vedere su altri siti dove ho trovato lo stesso banner …. facciamo cosi 🙂 accetta i cokies sul mio sito e tra un paio di giorni ti chiedo di ripassarci , se lo ripropone anche a te allora devo cercare il problema …
Ok, va bene… fammi un segnale di fumo però altrimenti finisce che mi dimentico!!! 😉
Ciao Teresa! Dopo giorni che faccio ricerche sul web per creare questo benedetto banner dei cookies, finalmente ho trovato te che con molta semplicità mi hai risolto il problema! Grazie! devo solo aggiustare un pò di cose…
Allora io nel mio sito ho il foglio di stile che è nominato css.css (grande originalità! :P), ma non sapendo come dovevo collegarlo allo script, ho fatto le modifiche direttamente al file cookiechoices.js.
Tutto ok, funziona benissimo, ma devo correggere un pò di cose. Nella registrazione ho messo il link al mio sito nella versione inglese, perchè il testo che rimanda all’informativa è più lungo e in pratica mi taglia il bottone verde, o se aumento la dimensione del carattere, in quanto lo vorrei più simile ed evidente come il tuo, addirittura metà del bottone mi va a capo, come faccio a mettere sia il link all’informativa che il bottone a capo? E’ possibile? E per far cambiare il colore al link e al bottone in rollOver direttamente dal file .js?
Ciao Anna, benvenuta…. allora fai in questo modo:
nel file .js hai questa riga che hai già modificato
butterBarStyles = ‘position: fixed; width: 100%; margin: 0px; left: 0px; bottom: 0px; z-index: 1000; text-align: center;’+
‘padding: 30px 10px; background-color: #000; font-size: 14px; color: #FFF; opacity: .8’;
elimina width: 100%; e metti display:block; in più ti consiglio di aumentare l’interlinea inserendo line-height:1.5em; per distanziare il pulsante dal testo della riga di sopra…
quindi in definitiva dovresti modificare in questo modo (ho diminuito anche un pò il padding verticale):
butterBarStyles = ‘position: fixed; display:block; line-height:1.8em margin: 0px; left: 0px; bottom: 0px; z-index: 1000; text-align: center;’+
‘padding: 25px 10px; background-color: #000; font-size: 14px; color: #FFF; opacity: .8’;
per quanto riguarda l’hover del pulsante chiudi, puoi inserire le righe seguenti nel file layout.css che è il foglio stile che utilizzi per il tuo sito.
#cookieChoiceDismiss:hover {
background-color: #FFF;
color: #C00;
}
Ciao! 🙂
Innanzitutto, grazie mille per aver scritto questo articolo. Ho seguito i tuoi consigli per aggiungere la barra al mio blog, ma non riesco a fare in modo che il pulsante ok cambi colore al passaggio del mouse: potresti darmi una mano, per favore?
Ciao, benvenuto sul blog! Allora, cancella la riga
dismissLink.style.cssText = ‘background-color:#CC0000; margin-left:8px; color: #FFF; text-decoration: none; font-weight: 600; font-size: .9em;opacity:1;’+
‘padding: 3px 10px; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em;opacity:1;’;
che hai nella function _createDismissLink(dismissText)
poi nello style modifica in questo modo:
#cookieChoiceDismiss {
background-color:#CC0000;
margin-left:8px;
color: #FFF;
text-decoration: none;
font-weight: 600;
font-size: .9em;
opacity:1;
padding: 3px 10px;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
opacity:1;
}
#cookieChoiceDismiss:hover {
background-color: #FFF;
color: #C00;
}
È perfetto, funziona! 😀 Grazie mille!
Ottimo! Figurati…in bocca al lupo! 😉
Ciao Teresa, piacere e complimenti per l’aiuto che dai!
Son finita qui da te via ricerche google e sto seguendo le tue indicazioni per sistemare i siti che gestisco, anche se nessuno usa cookie di profilazione a scopo pubblicitario, (quindi forse non c’è così bisogno del banner visibile, ma solo dell’informativa estesa), ma noto che tanti lo stanno comunque mettendo. Son riuscita ad impostare il banner in basso, qualche modifica grafica gliela sto facendo dal css… ma c’è un grosso problema: si vede nei browser Crome e Mozilla (altri non li ho installati), ma in Explorer no :((. Ho provato anche con la tua pagina e non appare neanche il tuo… è un problema del mio Explorer? o di tutti? 🙁
Grazie infinite per l’aiuto, saluti Gaia
Ciao Gaia, grazie per essere passata sul mio blog… non so che dirti, ho testato con iexplorer, chrome, opera, firefox e safari ed il banner funziona correttamente. Magari lascia il link del tuo sito, così lo provo con i browser che ho installato sui miei pc e ti faccio sapere! 😉
Grazie infinite Teresa, allora sarà un problema del mio iexplorer? 🙁 La prova che ho fatto è per il sito di altre persone (si tratta di una ONG), in loro rispetto ho chiesto se posso far visionare la prova, ti dico appena mi rispondono, se danno l’ok posso inviartelo in email? Altrimenti metto il codice su uno mio così te lo scrivo e faccio vedere.
Grazie ancora e buona giornata
Va bene Gaia, per me non c’è problema… come è più comodo per te, puoi usare anche l’email se vuoi! 😉
Bellissimo e utilissimo sito da cui sono finalmente riuscito ad attivare il banner per cookie (purtroppo non con il codice js di google ma inserendolo nel corpo della home page come javascript, come da Lei proposto). Grazie.
Vorrei però modificare il Link Accetto con un pulsante simile al Suo; mi può indicare il codice da modificare nella pagina htm (tenendo conto che non utilizzo il file style.css).
Ciao Salvatore… perchè mi dai del lei??? siamo blogger e quindi sulla stessa barca, dobbiamo per forza essere amici!!! 😉
Comunque, se guardi qualche commento più sopra, c’è il codice da inserire per ottenere il pulsante come il mio o nel file css oppure nel tuo caso fra i tag <style> che hai nel tuo header.
Guardando il sorgente della tua pagina ho visto che hai:
<style type=”text/css”>
a {
text-decoration:none;
}
a:hover {
color: #8C1428;
}
</style>
potresti quindi aggiungere prima di </style>
queste righe:
#cookieChoiceDismiss {
background-color: #0A0;
color: #FFF;
text-decoration: none;
font-weight: 600;
font-size: .9em;
padding: 3px 10px;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
}
😀 Ottima modifica! Ora su IE funziona: qual è il trucco? Sei fortissima! Ma sei un’informatica di professione? Ne sai una più di Bill Gates! 🙂
HAHAHAAHHA!!! 🙂 Mi hai messo in difficoltà e allora ho dovuto usare l’asso nella manica!!!
Mio marito, lui si che ne sa una più del diavolo…!!!
Purtroppo mi sono giocata una chance, ora chissà quanto dovrò penare per un altro suggerimento 🙁
Comunque, mi ha fatto modificare in questo modo:
function _saveUserPreference() {
// Set the cookie expiry to one year after today.
document.cookie = cookieName + ‘=y; path=/’;
}
l’ultima barra prima dell’apice non devi metterla!! finisce per path=/virgoletta(apice);
Ciao Teresa, sicura che l’unica modifica suggerita da tuo marito sia il codice da te indicato? Perché se sostituisco il codice con quello da ultimo da te indicato a me la barra della cookie policy non compare proprio più… 🙁 P.S. ho corretto anche la parte finale togliendo l’ultima barra prima dell’apice.
Ciao Mirko, si, quella è l’unica modifica che ho apportato… ma hai fatto copia incolla?? te lo dico, perché ho notato che la virgoletta prima di =y non è quella giusta!!!
Prima o poi devo mettermi e sistemare questo sistema dei messaggi che mi sta mandando al manicomio!!! 😀
Maledetti apici a forma di virgolette!!! 🙂 Risolto alla grande! Tu e tuo marito draghi del web! Grazie soprattutto per l’estrema cortesia e disponibilità!
Grazie, ha funzionato
Complimenti
Grazie a te per aver lasciato il commento sul mio blog! 😉
DOMANDA SU COOKIE DI SESSIONE
Ciao Teresa riporto quanto richiestoti in un precedente post e la tua risposta:
DOMANDA
“Mi sai spiegare come modificare lo script in modo che il disclaimer si apra ad ogni nuova sessione. Adesso è impostato su 365 giorni,ma non so quale modifica applicare per renderlo attivo ad ogni sessione.”
RISPOSTA
“Per modificare la durata del cookie, devi modificare il file cookiechoices.js. Quindi, dopo averlo aperto, scorri il codice fino alla funzione:
function _saveUserPreference()
a questo punto non ti resta che variare la riga
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
in
expiryDate.setFullYear(expiryDate.getHours() + 1);
in questo modo la durata del cookie diventa di 1 ora (getHours() + 1) nel caso volessi una durata di 2 ore:
expiryDate.setFullYear(expiryDate.getHours() + 2);
e così via…”
Ho provato a fare come dici (modificando la stringa con expiryDate.getHours) ma impostandolo ad 1 ora ogni volta che chiudi il banner cliccando su “OK” se vai in un altra pagina del sito o se fai un “refresh” della stessa pagina ricompare sempre il banner con la cookie policy.
Questo non avviene invece se rimane la stringa expiryDate.getFullYear.
Come si può quindi impostare/modificare lo script in modo che il disclaimer si apra ad ogni nuova sessione?
Grazie.
M.
Ciao Mirko, scusami… oltre a risponderti frettolosamente, ho interpretato male la domanda 😉
per far scadere il cookie alla fine della sessione, modifica la riga
document.cookie = cookieName + ‘=y; expires=’ + expiryDate.toGMTString();
in questo modo:
document.cookie = cookieName + ‘=y; expires=0′;
invece se vuoi impostare il tempo in ore non era
expiryDate.setFullYear(expiryDate.getHours() + 1);
ma
expiryDate.setHours(expiryDate.getHours() + 1);
Fammi sapere se funziona… 😉
Ciao Teresa grazie mille per le indicazioni ma non funziona: se faccio OK alla cookie policy e poi o vado in un’ altra pagina o faccio il refresh della stessa pagina mi ripropone il banner per la cookie policy mentre se non tocco il codice (lo riporto quindi alla tua versione originale a 365 gg.) la cookie policy dato l’OK una volta non compare più…
Mirko, non so che dirti…. ho impostato su questo blog
document.cookie = cookieName + ‘=y; expires=0′;
e funziona come dici tu…
ogni volta che apro una nuova sessione, ricompare il banner. Se clicco su ok e non chiudo il browser posso navigare nel sito senza che il banner compaia…
Lascio expires=0 fino a domani su mammachebrava.com, così fai qualche prova e mi fai sapere 😉
Ciao Teresa infatti sul tuo sito fa la stessa cosa: se io clicco su OK e poi vado in qualsiasi altra pagina del tuo sito ricompare sempre il banner, mentre non dovrebbe essere così perché è sempre la stessa sessione di navigazione. Anche sul tuo sito con document.cookie = cookieName + ‘=y; expires=0′; dà lo stesso problema. Come fai a dire “Se clicco su ok e non chiudo il browser posso navigare nel sito senza che il banner compaia”: a me compare sempre…Non capisco
Mi è venuto un dubbio ed ho fatto una prova: il codice document.cookie = cookieName + ‘=y; expires=0′funziona correttamente come da te indicato su Google Chrome e su Mozilla Firefox mentre non funziona su Internet Explorer (fai una prova) dove, anche se fai OK e continui a navigare la sessione ti ripropone in ogni pagina il banner ed anche se fai il refresh della pagina in cui hai dato l’OK.
Scusa mirko, ma perchè explore è pure un browser???? HEHEHEEH, Scherzo… in effetti, su explorer c’è un problema con expires=0… ora ho fatto una modifica, vedi se funziona e ti dico come fare!! 😉
Ciao Teresa mi sono perso nella discussione tra te e Mirko, alla fine come si risolve per fa riapparire il banner ad ogni sessione anche con explorer? Ricordi il famoso expires=0 grazie
Ciao Giuseppe…. guarda qualche messaggio più sopra, c’è il resto della discussione precisamente al messaggio di Mirko Inviato il 3 giugno 2015 alle 23:10 😉
Fammi sapere!!!
Avrei necessità di capire come fare per far andare a capo il messaggio che appare sulla barra di avviso in quanto se troppo lungo va a capo automaticamente ed è brutto, in pratica volevo metterlo su 2 righe però ho provato in vari modi (, r, n) ma non funziona, come posso fare?
Ciao Monica, qual’è il tuo sito ?
GRANDE!
Grazie per la condivisione del tuo lavoro! Ben fatto e per la pazienza!
Ti chiedo un aiuto e spero di non disturbarti più!
Vorrei modificare il file .js del banner (che ho inserito per ora solo collegato alla home del sito). Come devo modificare il codice?
Fondo bianco trasparente, testo blu scuro e per il resto come per il tuo sito.
Chiedo troppo? Grazie mille!
Ciao Roberto, apri il file cookiechoices.js trova la riga seguente e modificala con i valori che trovi sotto:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position: fixed; width: 100%; margin: 0px; left: 0px; bottom: 0px; z-index: 1000; text-align: center;padding: 30px 10px; background-color: #FFF; font-size: 1em; color: #0F144C; opacity: .8′;
nel file css poi, per modificare il bottone ‘ok’ aggiungi:
#cookieChoiceDismiss {
background-color: #0A0;
color: #FFF;
text-decoration: none;
font-weight: 600;
font-size: .9em;
padding: 3px 10px;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
}
Grazie!Ho apportato alcune modifiche ma ora è più chiaro.
Solo una domanda.
E possibile definire il font all’interno del .Js ?
Complimenti per il tuo sito!
Certo che è possibile… devi utilizzare la proprietà font-family sempre da inserire nella riga che ti ho indicato prima… se leggi qualche commento più sopra, ho scritto come utilizzare questa proprietà in modo corretto…
Grazie per i complimenti!
Ciao Teresa,
Ho letto più e più volte i suggerimenti dati per inserire il banner per l’informativa ma non ci sono ancora arrivata.
One minute site ti fa creare siti da modelli già preimpostati ma ti fa modificare eventualmente il template dal foglio css.
Avendo solo quello, non so come INSERIRE proprio il banner.
Non trovo, in poche parole, il tag body dove poter inserire il code.. ho anche scaricato il file cookiechoises.js ma sono un po in alto mare
Ciao Silvia, hai un profilo Google+? Magari vediamo insieme come fare…
Ciao seguendo i tuoi consigli sono riuscita a mettere lo script.Lo vorrei personalizzare.Ma debbo mettere quei codici che tu hai messo in fondo al foglio di stile css oppure nel file cookie choice js che ,tra aprentesi non riesco ad aprire?Ti ringrazio
Ciao Dania, il codice che trovi in questo articolo, va messo direttamente nel foglio stile, cioè nel file style.css.
Ho dato uno sguardo al tuo sito ed ho notato due cose:
– hai lo stile direttamente nel file html, quindi apri il file index.html e metti i codici tra <style> e </style>
– hai un sito statico, per cui lo script e lo style andrebbe inserito su tutte le pagine html
Lo ribadisco di nuovo: SE MITICA!!!! Grazie
Però perché continua nell’hover ad andare in BOLD?
Figurati!!! modifica lo style in questo modo e risolvi!!!
#cookieInfoLink {
color: #FFFFFF;
text-decoration: underline;
font-weight: normal;
}
fortunatamente qui non ci sono punteggiature particolari come le virgolette!!! 😉
Non va nemmeno così, senza lo slash…
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.id = ‘cookieInfoLink’;
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
infoLink.style.marginLeft = ‘8px’;
return infoLink;
}
Controlla l’apice come ti dicevo prima!!! è quello che è sbagliato!!! metti quello sul tasto sotto il punto interrogativo….
Ciao Teresa, grazie per tutte le tue “dritte”. Mi aiuti per cortesia? Nella pagina di prova non riesco ad ottenere il background del banner del colore da me impostato. Lo inserisco nel file style.css ma non me lo restituisce nel colore richiesto (#100c08). Non riesco ad uscirne: puoi per cortesia aiutarmi? Grazie
Ciao Mirko, apri il file cookiechoices.js trova la riga:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0;padding:30px;z-index:1000;text-align:center;’;
ed elimina background-color:#eee; in questo modo:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position:fixed;width:100%;’ +
‘margin:0; left:0; top:0;padding:30px;z-index:1000;text-align:center;’;
così dovrebbe funzionare…
Grazie Teresa! Sei un Mito! Ultima domanda: come posso “sganciare” la funzione #cookieInfoLink:hover dalle impostazioni del sito? Ho indicato nel file style.css che la frase “Leggi la Cookie Policy” deve essere di colore bianco al passaggio del mouse e non essere sottolineata, come da te indicato nel file e come fai tu sul tuo sito ma invece prende l’hover del sito (colore blu) e rimane sottolineato. Grazie ancora. M.
Scusa se ti rispondo solo ora…. comunque, ho notato che il file cookiechoices.js è diverso da quello che ho io… probabilmente è stato modificato ed è stato tolto il selettore #cookieInfoLink.
Per ripristinarlo, fai in questo modo:
apri cookiechoices.js
scorri il file fino a trovare la seguente porzione di codice:
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
e modifica in questo modo:
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.id = ‘cookieInfoLink’;
infoLink.href = linkHref;
come puoi vedere, va aggiunta solo la riga infoLink.id = ‘cookieInfoLink’;
in questo modo, puoi personalizzare il link tramite css.
No Teresa, se faccio come dici non compare più il banner: non funziona…
Come no, ho provato e funzionava…. ah aspetta, si è inserito lo slash alla fine di cookieInfoLink!
La riga da aggiungere corretta è:
infoLink.id = ‘cookieInfoLink’;
copialo senza senza lo slash!!!
Niente…
Questo è quello che carico:
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.id = ‘cookieInfoLink’;
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
infoLink.style.marginLeft = ‘8px’;
return infoLink;
}
se tolgo la tua riga
infoLink.id = ‘cookieInfoLink’;
allora funziona però con il problema evidenziato.
Se metto al tau riga non compare più il banner…
MIrko, è solo un problema di copia incolla che da questi messaggi non si riesce a fare bene!!!… ho guardato lo script che hai caricato modificato e c’è la virgoletta davanti a cookieInfoLink che è diversa da quella dopo cookieInfoLink la virgoletta corretta è quella sul tasto del punto interrogativo correggi e vedi che funziona!
Ciao
anche io volevo inserirlo su un sito joomla 3 ma non riesco a farlo funzionare!
ho provato anche con sito in html ma niente
AIUTO grazie
ma se chiudo il messaggio non mi salva la scelta
quando aggiorno la pagina mi ripropone il messaggio
Ciao Angelo, qual è il tuo sito? così posso dare uno sguardo…
ciao
scusa se ti rispondo adesso
sono riuscito a farlo funzionare sbagliavo qualcosa
io vorrei il banner come il tuo ma non riesco per vedere come lo vedo vai su
http://www.fashiongrafic.it/base
il testo è trasparente e il collegamento non si legge
poi e possibile integrare il css nello script?
Ciao Angelo, se vuoi modificare lo syle direttamente nello script js apri il file cookiechoices.js e scorri fino a trovare le righe seguenti.
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:#fff;’;
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 #fff;’;
come puoi vedere, puoi vengono definiti lo style di default dei vari elementi del banner.
Nel tuo caso, la trasparenza è data da opacity:0.5 presente in var glassStyle. io l’ho settato a 0.8
Se non vuoi la trasparenza, basta che cancelli la proprietà oppure metti opacity:1
ciao Teresa
in tanto grazie mille per la tua mega pazienza e delle risposte celeri
allora io sono andato dove mi hai detto
ho modificato opacity:0.5 a 0.8 ma non cambia se lo modifico in questa posizione function _createDialogElement
mentre se aggiungo il la unzione in function _createHeaderElement
diventa tutto trasparente
se vai su http://www.fashiongrafic.it/base vedi
questo e il tuo script ho modificato solo la trasparenza e la dimensione
altro problema se lo inserisco su un sito con joomla lo stesso script diventa http://www.skiteamsauze.com/site/
io vorrei riprodurre il tuo perché è fantastico mi andrebbe bene anche sfondo bianco e scritta nera ma con il colori del link e del ok invariati
e mi piacerebbe che tutta la configurazione sia nello script perché altrimenti se lo inserisco in joomla prende il css del temlate
scusa se ho fatto confusione
Scusa Angelo, hai perfettamente ragione, ti ho ricopiato la parte di codice che riguarda la dialogbox anzichè quella del banner. Se vuoi farlo come il mio, modifica in questo modo:
function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {
var butterBarStyles = ‘position: fixed; width: 100%; margin: 0px; left: 0px; bottom: 0px; z-index: 1000; text-align: center;’+
‘padding: 30px 10px; background-color: #000; font-size: 1em; color: #FFF; opacity: .8’;
e nel file css per il bottone aggiungi:
#cookieChoiceDismiss {
background-color: #0A0;
color: #FFF;
text-decoration: none;
font-weight: 600;
font-size: .9em;
padding: 3px 10px;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
}
Se ti occorre mettere tutto nello script js devi modificare la parte di codice seguente:
per il pulsante “OK”
function _createDismissLink(dismissText) {
var dismissLink = document.createElement(‘a’);
_setElementText(dismissLink, dismissText);
dismissLink.id = dismissLinkId;
dismissLink.href = ‘#’;
dismissLink.style.cssText = ‘background-color: #0A0; margin-left:8px; color: #FFF; text-decoration: none; font-weight: 600; font-size: .9em;’+
‘padding: 3px 10px; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em;’;
return dismissLink;
}
per il link alla pagina della cookie policy:
function _createInformationLink(linkText, linkHref) {
var infoLink = document.createElement(‘a’);
_setElementText(infoLink, linkText);
infoLink.href = linkHref;
infoLink.target = ‘_blank’;
infoLink.style.cssText = ‘margin-left:8px; color: #E00; text-decoration: underline; font-size: .9em;’;
return infoLink;
infoLink.id = cookieInfoLink;
}
Ciao Teresa
Ancora Grazie per il to prezioso aiuto mi hai personalizzato il .js
già che ci siamo un ultima cosa
ma se voglio inserire un carattere specifico qual’è il comando da inserire nella stringa?
grazie :-))
Figurati, è un piacere!
per cambiare il font devi utilizzare font-family per esempio in questo modo:
font-family: “Times New Roman”, Georgia, Serif;
Nell’esempio ho inserito 3 font perchè se il primo non è installato nel client, verrà usato il secondo e così via
questo è valido per i font standard… se ne vuoi uno non standard, lo devi dichiarare nel css in questo modo:
@font-face {
font-family: tuo_nome_font;
src: url(indirizzo_del_font/nome_file_font);
}
e poi per utilizzarlo :
font-family: tuo_nome_font;
ciao Teresa
on mi ero accorto che doo le modifiche di personalizzazione che mi hai comunicato il tasto ok non funziona più e con chrome mi dice che c’è un errore alla riga 128 ma non so come correggerlo
mi puoi aiutare http://www.fashiongrafic.it/base
ciao
Angelo, hai semplicemente cancellato la funzione _dismissLinkClick() 😀
eccola:
function _dismissLinkClick() {
_saveUserPreference();
_removeCookieConsent();
return false;
}
copia il tutto prima della riga
function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) {
Ho inserito lo script su un mio sito ma mi appare in alto, come posso farlo apparire in basso?
Grazie
Ciao Dan, per posizionare il banner in basso, devi modificare il foglio stile (style.css) in questo modo
#cookieChoiceInfo {
position: fixed;
width: 100%;
margin: 0px;
left: 0px;
bottom: 0px;
z-index: 1000;
text-align: center;
}
fammi sapere 😉
Salve Teresa, mi complimento per l’estrema chiarezza delle tue spiegazioni, mi sono risultate utili e di immediata comprensione.
Una nota riguardo al posizionamento dello script in basso, ho provato ad usare il codice di sopra, aggiungendolo a quello già utilizzato sul mio sito, ma non funziona, sono condizionato ad accettare i cookie per poter vedere la pagina. Preferirei invece che funzionasse com’è sul tuo sito.
io al css ho aggiunto questo:
/*Imposto le proprietà del COOKIE PER LA PRIVACY */
#main .wrapper #content .container_12 .wrapper .grid_8 .indent .last .wrapper .grid_4.omega .inside p .car15 {
font-size: 12px;
}
#cookieChoiceInfo { /* Imposto le proprietà del banner/dialog box e caratteri del messaggio */
background-color: #000; /* Lo fondo è di colore nero (#000) */
font-size: 13px; /* i caratteri devono essere grandi 16 pixel */
color: #000; /* 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: 13px;
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;
}
Ciao Francesco, fai in questo modo apri il file cookiechoices.js
alla riga num 34 trovi questa istruzione:
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;’;
modificala con
var butterBarStyles = ‘position:fixed;width:100%;background-color:#eee;’ +
‘margin:0; left:0; bottom:0;padding:4px;z-index:1000;text-align:center;’;
praticamente va cambiato top:0 con bottom:0
salva e tutto dovrebbe andare a posto!!!
Grazie Teresa, tutto facile e perfetto.
Figurati, grazie a te di essere passato sul mio blog!! 😀
Ciao,
avrei un piccolo problemino: Sto utilizzando le tue “dritte” in due siti con joomla 1.5 con un discreto risultato…l’unica cosa è che non riesco a cambiare è il colore dell’link all’informativa.
Dopo alcune prove sono riuscito a modificare tutto quello che mi interessava ma questo mi sfugge…sembra quasi che la sezione #cookieInfoLink non sia “collegata”…
Grazie mille per il post..ottimo lavoro!
P.S.
questo è il sito : http://sirecom.it/
Ciao Vittorio, allora, dando uno sguardo al codice della tua pagina, ho notato che semplicemente hai dimenticato di inserire id=”cookieInfoLink” all’interno del link quindi correggi la riga
a href=”https://www.iubenda.com/privacy-policy/216481″ target=”_blank” style=”margin-left:” rel=”nofollow”>informativa sulla privacy
in
a href=”https://www.iubenda.com/privacy-policy/216481″ id=”cookieInfoLink” target=”_blank” style=”margin-left:” rel=”nofollow”>informativa sulla privacy
e vedrai che dovrebbe funzionare.
Grazie mille..mi era sfuggito..eheh
Ho inserito il richiamo nello cookiechoices.js e adesso funzia!|
Grazie mille!
Figurati!!!
Bellissimo articolo Teresa! mi chiedevo se sai qual è la corretta dicitura da inserire nella barra
Grazie Alessandro.. in realtà non c’è una dicitura precisa da dover inserire, basta informare l’utente che il tuo sito fa uso dei cookie e che quindi se continua a navigare accetta questa pratica.
Ciao Mi sai spiegare come modificare lo script in modo che il disclaimer si apra ad ogni nuova sessione. Adesso è impostato su 365 giorni se non sbaglio,
ma non so quale modifica applicare per renderlo attivo ad ogni sessione.
Grazie
GIuseppe
Ciao Giuseppe, per modificare la durata del cookie, devi modificare il file cookiechoices.js.
Quindi, dopo averlo aperto, scorri il codice fino alla funzione: function _saveUserPreference()
a questo punto non ti resta che variare la riga
expiryDate.setFullYear(expiryDate.getFullYear() + 1);
in
expiryDate.setFullYear(expiryDate.getHours() + 1);
in questo modo la durata del cookie diventa di 1 ora (getHours() + 1) nel caso volessi una durata di 2 ore:
expiryDate.setFullYear(expiryDate.getHours() + 2);
e così via…
Ciao Teresa, ma dovè il file style.css ? bisogna crearlo ?
Ciao davide, il file styles.ccs dovresti averlo nella cartella del tuo tema… utilizzi wordpress ???
Ciao Teresa!
Anche io come Davide non ho css, non uso ne ‘blogger’ ne ‘wordpress’
È una pagina fatta ‘a mano’. Volevo inserire il banner nella pagina
principale,come mi devo comportare?
Basta che metta il file (cookiechoices.js) sul server e lo richiami dalla index?
In questo caso, puoi tranquillamente copiare il file sul server e richiamarlo nel file index con le istruzioni che trovi nell’articolo https://www.mammachebrava.com/inserire-banner-per-consenso-alluso-dei-cookie/
Per quanto riguarda i comandi css o crei un file appunto css e lo richiami nell’ del file index oppure li inserisci tra i tag come ho visto che hai fatto sul tuo sito http://www.vivaldomatteoni.it
mmm…interessante
purtroppo sono un po’ impedito con i css, speriamo di risolverla in qualche modo.. per caso hai degli esempi anche per i css? 🙂
Sono arrivato a questo articolo saltando l’altro, in poche parole qui spieghi come ‘abbellire’ il banner giusto?
Già che ci sono volevo chiederti se posso utilizzare il tuo testo per la “cookie policy” 🙂
Certo che puoi utilzizarlo!!! 😉
(y) Grazzziieee