Oggi vi propongo uno script di mia realizzazione: cookie bar jquery responsive per gestire al meglio la cookie EU law obbligatoria per tutti i siti.
Con l’introduzione della cookie law europea praticamente l’80% dei siti deve obbligatoriamente disporre di una barra di notifica all’interno del sito che avverte il visitatore dell’uso di cookie di profilazione, tracciamento o segmentazione.
Di fatto il web si è pertanto “riempito” di barre – più o meno corrette ai fini della cookie law stessa. La soluzione che vi illustrerò di seguito è una soluzione semplice e completa per fronteggiare e districarsi dalla cookie law nel modo piu efficace possibile.
L’accettazione della cookie law avviene sia tramite la pressione del pulsante accetto che tramite lo scroll implicito della pagina.
Demo click:
Demo scroll:
Download – 5€
Disclamer: Non sono responsabile per qualsiasi ripercussione legale dovuta all’uso dello script o a eventuali mancanze dello stesso.
Una volta pagato ti verrà inviato un link all’indirizzo email fornito nel pagamento. Qualora avessi problemi riceverai supporto su [email protected] oppure contattami tramite questo form.
NOTA: non viene fornito nessun supporto per bug, personalizzazione e implementazione dello script. Viene fornito supporto solo per eventuali problemi di reperimento dello script dopo aver effettuato il pagamento.
Uso dello script
CUSTOM / STATICO
Una volta scaricato lo script copiate il file trgcookiebar.js all’interno del vostro hosting. Dopodichè collegate il file all’interno del vostro sito:
<script src="percorso/al/file/trgcookiebar.min.js"></script>
<script type="text/javascript">
//Sviluppata da Riccardo Mel
//www.targetweb.it - riccardomel.com
//Trigger - Dove far generare la cookiebar - default:body
//Dominio - no http
//Link privacy estesa - no http
//Framework - Scegli tra: bootstrap, custom - default:bootstrap
//Position - Scegli tra: fixed, absolute, relative - default:fixed
//Custom CSS - Passa una variabile contenente i tuoi fix css es. var customcss_fix = "#cookiebox{ background:blue;}";
CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", "");
</script>
WORDPRESS
Se utilizzi WordPress aggiungi il codice sopra-indicato all’interno della cartella del tuo tema wp-content/themes/tuotema/js dopodichè usa il seguente codice:
<script src="<?php bloginfo('template_url'); ?>/js/trgcookiebar.min.js"></script>
<script type="text/javascript">
//Sviluppata da Riccardo Mel
//www.targetweb.it - riccardomel.com
//Trigger - Dove far generare la cookiebar - default:body
//Dominio - no http
//Link privacy estesa - no http
//Framework - Scegli tra: bootstrap, custom - default:bootstrap
//Position - Scegli tra: fixed, absolute, relative - default:fixed
//Custom CSS - Passa una variabile contenente i tuoi fix css es. var customcss_fix = "#cookiebox{ background:blue;}";
CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", "");
</script>
NOTA: se utilizzi un child theme al posto di template_url usa get_stylesheet_directory_uri();
Et voilà! barra implementata. Continua a leggere per scoprire come personalizzare il plugin.
Guida alla personalizzazione della cookie bar jQuery
Di default la barra viene innestata automaticamente dentro il body del sito in modo completamente dinamico e viene renderizzata con un colore nero con opacità 0.7 in position fixed (ovvero rimane in sovra-impressione sopra il sito). E’ possibile tuttavia agire su tutta una serie di parametri che vi elenco qui sotto:
1) Trigger – Il primo parametro da passare alla funzione è l’elemento che permette di impostare dove far generare la cookiebar – Di default è il body ma -sopratutto nel caso impostiate il position relative alla cookiebar – è consigliabile usare un trigger differente. Ad esempio possiamo posizione un div del tipo:
<div id="holder_cookiebar"></div> [..RESTO DEL SITO..]
E passare alla cookie bar come primo parametro al posto di “body” “#holder_cookiebar”.
2) Dominio – Il secondo parametro da inserire è il dominio. Di fatto serve per rendere l’accettazione persistente in tutto il dominio in esame, sottodomini compresi. Inserisci solo il dominio ad esempio : targetweb.it senza http:// davanti.
3) Inserisci il link alla privacy estesa senza http:// davanti. es: targetweb.it/privacy/
4) Framework – Scegli tra: bootstrap, custom – default:bootstrap
Il quarto parametro serve per comunicare allo script quale framework css state utilizzando. Qualora usaste “bootstrap” (che è la soluzione di default) il plugin sarà generato in modo automatico completamente responsivo e pronto all’uso. Potete però passare la variabile “custom” se usate un differente framework o un css personalizzato. In questo caso ecco la lista delle classi e ID css da usare per personalizzare la barra:
#cookiebox #cookiebox p #cookiebox span .cookie-container .cookie-row #cookie-text #cookie-controlbar .close-cookiebar
5) Position – Scegli tra: fixed, absolute, relative – default:fixed
Il position è utile per variare il comportamento della barra a seconda del vostro progetto. In alcuni casi/progetti certi clienti non desiderano il position fixed in quanto la barra potrebbe coprire il logo o il menu. In questi casi prediligete la soluzione “relative” (impostando un opportuno trigger al punto #1).
6) Custom CSS – Di fatto il sesto parametro permette di passare una variabile contenente i tuoi fix css personalizzati e innestarli direttamente all’interno dello script. Per farlo vi basterà impostare una variabile contente le regole css da innestare:
var customcss_fix = "#cookiebox{ background:blue;}"; // in questo hook rendo la barra blu
Una volta impostata la variabile modificate la funzione in questo modo:
CookieBar("body","localhost","localhost/trgcookiebar/privacy-estesa.html","bootstrap","fixed", customcss_fix);
E’ tutto! dovreste avere tutto il necessario per implementare la barra cookie nel vostro sito/progetto web in modo professionale e altamente personalizzabile a seconda delle esigenze specifiche di ogni sito. E’ vietato eliminare il credits all’interno del codice dello script.
Se questo articolo ti è stato utile condividilo sui tuoi social network preferiti!
Image credits “Cookie” @Shutterstock
