Popup exit intent con JS Vanilla

Un popup con exit intent, cookie di sessione ed esempio pratico da copiare e incollare. Ho intenzione di condividere con voi uno dei componenti comunemente utilizzati, soprattutto in contesti Ads.

L’obiettivo è mostrare un contenuto all’interno di un popup nel momento in cui, durante la navigazione, il cursore del mouse esce dalla finestra. E una volta chiuso evitare di mostrarlo nuovamente per il resto della sessione di navigazione.

Cos’è l’exit intent?

L’exit intent (intenzione d’uscita, tradotto dall’inglese) non è altro che la volontà dell’utente di spostare il focus dal contenuto della pagina web ad un altro elemento del browser o al di fuori di esso.

Come viene intercettato? Generalmente si utilizza l’evento mouseleave associato alla finestra di navigazione. Il perché della scelta di questo evento è che l’utente, spostando il mouse al di fuori della finestra, esegue in seguito una di queste interazioni:

• vuole chiudere la finestra o il browser,
• vuole cambiare la tab di navigazione,
• vuole cambiare indirizzo nella barra dell’URL.

Perché è importante?

Tutte le interazioni appena definite portano l’utente lontano dai contenuti di una pagina web, magari dimenticandola senza più tornarci. Ecco quindi che l’intenzione di uscita dalla pagina viene rilevata e il pop-up diventa l’ultima risorsa per cercare di attirare l’attenzione dell’utente e non perdere il suo valore potenziale.

Deve però evitare di diventare un elemento fastidioso, sconfortando ulteriormente la navigazione. Ecco perché è necessario controllare se il popup è già stato chiuso, magari dopo aver cliccato un pulsante call-to-action o semplicemente con il bottone apposito, generalmente la ‘X’.

Visto l’aspetto teorico necessario a comprendere lo scopo del popup con exit intent, passiamo all’aspetto pratico. Su CodePen puoi trovare il mio pin con l’esempio pratico completo, ecco il link: https://codepen.io/GRiefolo/pen/wvpbOyJ.

HTML

La struttura del markup è molto semplice. Un pop-up per l’exit intent ha bisogno di un paio di cose:

1. Il contenitore del popup, con un’ombra che prenda l’intera pagina;
2. Uno pulsante di chiusura.

<div id="popup">
	<div id="popup__close-btn">&times;</div>
  	<h1>Lorem ipsum dolor sit amet</h1>
</div>

Javascript

Lo script è suddiviso in tre parti:

1. Definizione delle variabili;
2. Definizione dell’evento che esegue la funzione per l’apertura del popup;
3. Definizione della funzione di apertura del popup.

Come prima cosa prendiamo gli elementi fondamentali: il popup e il bottone di chiusura.

// define popup element...
var popupModal = document.getElementById("popup");
// ... and popup close button inside popupModal
var popupModalCloseBtn = popupModal.querySelector("#popup__close-btn");

In seguito usiamo l’evento mouseleave, assieme ad un controllo sulla posizione del cursose, per eseguire la funzione openModal() che apre la modale.

// executing openModal() function when DOM is loaded
document.addEventListener("mouseleave", (event) => {
    if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
    ) {
        openModal();
    }
});

Alla fine definiamo la funzione openModal(). Il meccanismo è semplice:

1. Verifichiamo con if(popupModal) che il popup esista nel markup;
2. Se l’esito è positivo, definiamo una variabile che recuperi il cookie di sessione sessionModalCookie;
3. In base alla presenza o meno del cookie definiamo la visibilità del popup;
4. Se viene eseguito un click sul bottone di chiusura si rimuove il popup e si imposta per la prima volta il cookie di sessione.

// Define openModal function
function openModal() {
    // if popupModal exists ...
    if (popupModal) {
        // ... get a session storage cookie and define visibility ...
        let sessionModalCookie = sessionStorage.getItem("modal_closed");
        if (sessionModalCookie) {
            popupModal.classList.remove("show");
            popupModal.remove();
        } else {
            popupModal.classList.add("show");
        }
        if (popupModal) {
            //  ... and add a click event listener for close it
            document.addEventListener("click", function (e) {
                if (e.target == popupModalCloseBtn) {
                    popupModal.classList.remove("show");
                    popupModal.remove();
                    sessionStorage.setItem("modal_closed", "true");
                }
            });
        }
    }
}

Il fatto che abbia usato un event listener globale verificando il target del clic potrebbe risultarti strano, ma torna utile se vuoi – ad esempio – impostare la chiusura della modale cliccando su altri elementi.

Conclusione

Questo componente è uno dei più usati in ambito marketing, ma questo codice può tornare utile in molti altri casi. Ad esempio potrebbe tornare utile modificare l’evento che apre il popup – magari all’apertura della pagina web – o riutilizzarlo per mostrare avvisi specifici.

Sentitevi liberi di scrivere un commento se volete integrare questo codice o suggerire una modifica!