Come realizzare in 10 minuti un popup per l’informativa cookies con Bootstrap 5

Le attuali normative europee impongono che ogni sito web facente uso di cookies informi preventivamente l’utenza che deciderà se accettare o meno di proseguire la navigazione. In questo tutorial vedremo come realizzare in pochi minuti uno script che ci permetta di adempiere a tali obblighi mediante l’impiego di poche righe di codice javascript ed un’interfaccia html basata sul famoso framework Bootstrap 5.

Primo Step – Creazione dello snippet HTML

in prima istanza creiamo il codice html che comporrà il popup html con l’avviso da mostrare agli utenti con link alla policy completa e bottone di accettazione.

<div class="alert alert-dismissible text-center cookiealert" role="alert">
  <div class="cookiealert-container">
       Questo sito utilizza cookie tecnici “proprietari” e “di terze parti” per garantire il funzionamento del sito e migliorare l’esperienza di navigazione sul medesimo. Questo sito utilizza altresì cookie analitici anonimi per raccogliere informazioni statistiche sugli accessi al sito. Per maggiori informazioni sull’utilizzo dei cookie da parte Nome-del-tuo-sito <a href="https://link-alla-tua-cookie-polici-completa.html" target="_blank">clicca qui</a>

      <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Chiudi">
          Accetto
      </button>
  </div>
</div>

Il codice qui sopra andrà inserito nella pagina principale del tuo sito (generalmente index.html).

Secondo step – Creazione dello script in linguaggio Javascript

Il seguente script in linguaggio javascript controllerà le azioni dello snippet html. Creiamo pertanto un file che chiameremo cookieconsent.js e che per comodità posizioneremo nella stessa directory della home page del sito. Potrai comunque posizionarlo in una sottodirectory differente a tua discrezione, ricorda in tal caso di correggere l’url di inclusione.

Includeremo nel nostro file cookieconsent.js il seguente codice:

(function() {
    "use strict";
    var cookieAlert = document.querySelector(".cookiealert");
    var acceptCookies = document.querySelector(".acceptcookies");
    cookieAlert.offsetHeight;
    if (!getCookie("acceptCookies")) {
        cookieAlert.classList.add("show");
    }
    acceptCookies.addEventListener("click", function() {
        setCookie("acceptCookies", true, 60);
        cookieAlert.classList.remove("show");
    });
})();

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Il codice qui sopra effettuerà le seguenti operazioni:

• identifica nel codice HTML i tag che contengono l’interfaccia del nostro “cookie consent”;
• verifica l’esistenza di un cookie di controllo denominato “acceptCookies”;
• qualora il cookie “acceptCookies” sia già presente sul browser dell’utente non mostreremo alcun popup di avviso (presunzione di informativa già accettata);
• qualora invece il cookie “acceptCookies” non sia presente lo script farà in modo da mostrare il nostro avviso;
• la funzione javascript setCookie() interverrà nel momento in cui l’utente accetterà le condizioni creando un nuovo cookie con nome “acceptCookies” e conseguentemente nascondendo il popup;

Terzo step – Un po di stile al nostro codice: il CSS per la formattazione

Ora che abbiamo entrambe le componenti principali pronte al lancio andremo a definire lo stile grafico per lo stesso, creeremo a questo punto il file cookiestyle.css sulla home directory del nostro sito.

.cookiealert {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0!important;
	z-index: 999;
	opacity: 0;
	border-radius: 0;
	background: #212327 url(cubes.png);
	transform: translateY(100%);
	transition: all 500ms ease-out;
	color: #ecf0f1
}

.cookiealert.show {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 1000ms
}

.cookiealert a {
	text-decoration: underline
}

.cookiealert .acceptcookies {
	margin-left: 10px;
	vertical-align: baseline
}

Quarto step – Integriamo il tutto nella home page del sito

Completiamo il nostro tutorial includendo i due file precedentemente creati nella home page del nostro sito inserendo il codice qui di seguito.

Inclusione del file di stile tra i tag <header></header> del file index.html:

<link rel="stylesheet" href="cookiealert.css">

Ora includiamo il nostro script javascript in fondo alla pagina html prima della chiusura del tag </body>

<script src="cookiealert-standalone.js"></script>

Congratulazioni! Il tuo cookie-consent script è pronto per essere testato!