Come mostrare per una sola volta un oggetto o codice in una pagina web

Salve, diciamo che se avessi trovato un articolo come questo qualche giorno fa, avrei risparmiato un intero pomeriggio di ricerche e di prove.

Può succedere a volte di aver bisogno di inserire in una pagina web una schermata, un popup e in generale un annuncio di cui però abbiamo la necessità che venga visualizzato una sola volta all’utente.

Sul web ci sono delle domande e alcuni consigli su vari forum a riguardo, ma niente di completo e spiegato in maniera semplice, così che chiunque possa farlo anche senza conoscenze particolari.

Se proprio vuoi saperlo, questo problema si risolve attraverso l’uso e la gestione dei cookies, ed ho dovuto fare una ricerca “trasversale” sull’uso dei cookie per trovare la giusta soluzione al problema specifico.

Per dirtela tutta, avrai notato come non appena entri in ComputerGeek.it si apre automaticamente un footer in basso. Avrai anche notato come ci siano due opzioni di chiusura “Chiudi per ora” fa si che il footer si apra ogni volta ricarichi una qualsiasi pagina del blog, l’altra opzione “Non mostrare più” invece fa in modo che il footer non si apra più per le prossime due ore. Come fare l’ultimo passaggio è stato il motivo della mia ricerca ed ora ti mostro come l’ho risolto.

Poche chiacchiere e passiamo alla risoluzione del problema. Se vuoi far visualizzare su una tua pagina web un qualsiasi elemento, che sia un popup, che sia una immagine o un qualsiasi codice HTML la procedura è semplice ed è questa (in fondo all’articolo troverai i link per tutte le risorse che ho utilizzato).

Dopo aver scaricato l’intero kit di istruzioni per la gestione dei cookies con javascript (è possibile farlo anche con PHP, ma vedrai come anche con javascript è molto semplice) puoi inserire il contenuto (gest_cookies.js + file di esempio) nella cartella in cui è c’è la pagina web a cui vuoi applicare “l’effetto” e eventualmente inviarlo al tuo server web via FTP.

Vediamo adesso, un classico esempio di pagina web in cui grazie ai cookie puoi visualizzare un determinato oggetto o contenuto ed un utente una sola volta.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="gest_cookies.js"></script>
   <script type="text/javascript">
	if (leggiCookie('ComputerGeek') == false)
	{
		< INSERISCI QUI IL CODICE CHE VUOI FAR APPARIRE
                ALLA PRIMA VISITA DELL’UTENTE >
                creaCookie('ComputerGeek','OK',120);
	}
</script>

Strano ma vero, la soluzione è questa. Semplice, veloce, ma che purtroppo non ho trovato da altre parti dopo quasi un intero pomeriggio di ricerche. Il tutto stava nel creare un codice javascript semplice ma soprattutto “incapsulato” in modo tale che l’utente non deve far altro che sapere come utilizzare le istruzioni e le funzioni, piuttosto che sapere come è fatto dall’interno quel particolare codice.

<script type="text/javascript" src="gest_cookies.js"></script>

Con questo codice viene semplicemente richiamato il file .js contenente le istruzioni e le funzioni per la gestione dei cookies. Nel caso il file si trova in una posizione diversa da quella in cui si trova la pagina web devi cambiare il percorso. (Ad esempio: includes/gest_cookies.js)

if (leggiCookie('ComputerGeek') == false)

leggiCookie altro non è che una funzione booleana che restituisce “false” in caso il cookie non è ancora presente all’interno del browser e “true” nel caso contrario, in cui il cookie è presente. In questo caso quindi non facciamo altro che dire al browser “Se il cookie di nome ComputerGeek non è ancora presente nel browser esegui il codice sottostante”.

creaCookie('ComputerGeek', 'OK', 120);

Richiamando questa funzione creiamo il nostro cookie con le seguenti proprietà:
Nome = ComputerGeek;
Valore = OK;
Durata del cookie = 120 minuti (ovviamente puoi cambiarlo a tuo piacimento). Se lasci vuoto il campo, il cookie avrà una scadenza indeterminata.

Detto questo e ritornando al caso del footer di questo blog, avrai ora capito in pratica cosa succede. Il sistema controlla se è già presente un cookie nel tuo browser, nel caso non fosse presente, ti viene mostrato il footer a comparsa, altrimenti ci sono due possibilità: quella che clicchi su “Chiudi per ora” in cui il footer scompare “momentaneamente”, e quella in cui clicchi su “Non mostrare più” che crea un cookie sul tuo browser della durata di due ore in modo tale da non farti visualizzare più il footer per le prossime due ore (e questa mi sembra essere la scelta giusta e che tutti dovrebbero adottare).

Qui trovi il kit per creare, eliminare e leggere i cookies tramite javascript con la pagina di esempio:
Scarica Pacchetto Gestione Cookie Javascript