Marketing ContentE-mail marketing e automazione

Exit Intent Popup Code Snippet in JavaScript e jQuery

Uno dei progetti su cui sto lavorando per questo sito è avere un div popup con a CTA che incoraggia i nuovi visitatori a Iscriviti a Martech Zone per e-mail. C'è uno sviluppo aggiuntivo su cui sto lavorando in modo che possa farlo widgetizzare questo metodo per WordPress e fare in modo che la sezione dell'intento di uscita sia una barra laterale reale... ma volevo condividere la funzione jQuery e lo snippet di codice di esempio che aiuta gli altri a creare un intento uscita evento.

Cos'è l'intento di uscita?

Exit intent è una tecnica utilizzata dai siti Web per tracciare il movimento del mouse di un utente e rilevare quando l'utente sta per lasciare la pagina. Quando il sito Web rileva che l'utente sta uscendo, può attivare un popup o un altro tipo di messaggio per cercare di mantenere l'utente sulla pagina o invogliarlo a tornare in un secondo momento.

Esci dalla tecnologia dell'intento utilizza JavaScript per tenere traccia dei movimenti del mouse e determinare quando un utente sta per lasciare una pagina. Quando il sito Web rileva che l'utente sta per andarsene, può visualizzare un messaggio popup, offrire un'offerta speciale o fornire qualche altro tipo di incentivo per incoraggiare l'utente a rimanere sulla pagina o tornare più tardi.

L'intento di uscita viene spesso utilizzato dai siti Web di e-commerce per cercare di prevenire abbandono del carrello o per promuovere offerte speciali e sconti ai clienti che stanno per lasciare il sito. Può anche essere utilizzato dai siti Web di contenuti per promuovere le iscrizioni alla newsletter o per incoraggiare gli utenti a seguire il sito sui social media.

Funzione mouseleave di JavaScript

Per capire come mouseleave funziona, è utile sapere come vengono gestiti gli eventi del mouse in generale. Quando si sposta il mouse su una pagina Web, il browser attiva una serie di eventi che possono essere acquisiti e gestiti dal codice JavaScript. Questi eventi includono mousemove, mouseover, mouseout, mouseentere mouseleave.

Le mouseenter ed mouseleave gli eventi sono simili al mouseover ed mouseout eventi, ma si comportano in modo leggermente diverso. Mentre mouseover ed mouseout si attivano quando il mouse entra o esce da un elemento, rispettivamente, si attivano anche quando il mouse entra o esce da qualsiasi elemento figlio all'interno di quell'elemento. Questo può portare a comportamenti imprevisti quando si lavora con i complessi HTML strutture.

mouseenter ed mouseleave gli eventi, d'altra parte, si attivano solo quando il mouse entra o esce dall'elemento a cui è associato l'evento e non si attivano quando il mouse entra o esce da qualsiasi elemento figlio. Ciò li rende più prevedibili e più facili da utilizzare in molti casi.

Le mouseleave event è supportato dalla maggior parte dei browser moderni, inclusi Chrome, Firefox, Safari e Edge. Tuttavia, potrebbe non essere supportato da alcuni browser meno recenti, come Internet Explorer 8 e versioni precedenti.

Frammento di codice dell'intento di uscita JavaScript

Mentre mouseleave sembra funzionare su un dato div, puoi anche applicarlo a un'intera pagina web.

Il codice crea un nuovo div elemento chiamato overlay che copre l'intera pagina e ha uno sfondo nero semitrasparente (80% di opacità). Aggiungiamo questa sovrapposizione al file page insieme al popup div

Quando l'utente attiva l'intento di uscita spostando il mouse all'esterno della pagina, mostriamo sia il popup che l'overlay. Ciò impedisce all'utente di fare clic in qualsiasi altro punto della pagina mentre il popup è visibile.

Quando l'utente fa clic all'esterno del popup o sul pulsante di chiusura, nascondiamo sia il popup che l'overlay per ripristinare la normale funzionalità della pagina.

document.addEventListener('DOMContentLoaded', function() {
    // Create a div element with the desired dimensions and styling
    var popup = document.createElement('div');
    popup.style.position = 'fixed';
    popup.style.top = '50%';
    popup.style.left = '50%';
    popup.style.transform = 'translate(-50%, -50%)';
    popup.style.backgroundColor = '#fff';
    popup.style.border = '1px solid #ccc';
    popup.style.width = '1200px';
    popup.style.height = '630px';
    popup.style.padding = '20px';

    // Create a close button element with the desired styling
    var closeButton = document.createElement('span');
    closeButton.style.position = 'absolute';
    closeButton.style.top = '10px';
    closeButton.style.right = '10px';
    closeButton.style.fontSize = '24px';
    closeButton.style.cursor = 'pointer';
    closeButton.innerHTML = '×';

    // Add the close button to the popup div
    popup.appendChild(closeButton);

    // Create an overlay div with the desired styling
    var overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    overlay.style.zIndex = '999';

    // Add the overlay and popup to the page
    document.body.appendChild(overlay);
    document.body.appendChild(popup);

    // Hide the popup and overlay initially
    popup.style.display = 'none';
    overlay.style.display = 'none';

    // Show the popup and overlay when the user tries to leave the page
    document.addEventListener('mouseleave', function(e) {
        if (e.clientY < 0) {
            popup.style.display = 'block';
            overlay.style.display = 'block';
        }
    });

    // Hide the popup and overlay when the user clicks outside of it
    document.addEventListener('click', function(e) {
        if (!popup.contains(e.target)) {
            popup.style.display = 'none';
            overlay.style.display = 'none';
        }
    });

    // Hide the popup and overlay when the close button is clicked
    closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
        overlay.style.display = 'none';
    });
});

Per la massima compatibilità con il browser, tuttavia, ti consiglio di utilizzare jQuery per implementarlo.

Snippet del codice dell'intento di uscita jQuery

Ecco lo snippet di codice jQuery, che è molto più compatibile con tutti i browser (purché tu includa jQuery nella tua pagina).

jQuery(document).ready(function() {
    // Create a div element with the desired dimensions and styling
    var popup = jQuery('<div></div>').css({
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
        'background-color': '#fff',
        'border': '1px solid #ccc',
        'width': '1200px',
        'height': '630px',
        'padding': '20px'
    });

    // Create a close button element with the desired styling
    var closeButton = jQuery('<span></span>').css({
        'position': 'absolute',
        'top': '10px',
        'right': '10px',
        'font-size': '24px',
        'cursor': 'pointer'
    }).html('&times;');

    // Add the close button to the popup div
    popup.append(closeButton);

    // Create an overlay div with the desired styling
    var overlay = jQuery('<div></div>').css({
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-color': 'rgba(0, 0, 0, 0.8)',
        'z-index': '999'
    });

    // Add the overlay and popup to the page
    jQuery('body').append(overlay, popup);

    // Hide the popup and overlay initially
    popup.hide();
    overlay.hide();

    // Show the popup and overlay when the user tries to leave the page
    jQuery(document).on('mouseleave', function(e) {
        if (e.clientY < 0) {
            popup.show();
            overlay.show();
        }
    });

    // Hide the popup and overlay when the user clicks outside of it
    jQuery(document).on('click', function(e) {
        if (!jQuery(e.target).closest(popup).length) {
            popup.hide();
            overlay.hide();
        }
    });

    // Hide the popup and overlay when the close button is clicked
    closeButton.on('click', function() {
        popup.hide();
        overlay.hide();
    });
});

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.