Välju Intenti hüpikakna koodijupist JavaScriptis ja jQuerys

Üks projektidest, mille kallal sellel saidil töötan, on hüpikakna lisamine a-ga CTA mis julgustab uusi külastajaid tellima Martech Zone meili teel. Töötan täiendava arenduse kallal, et saaksin seda teha vidinad selle meetodi jaoks WordPress ja laskma väljumiskavatsuse jaotiseks olla tegelik külgriba… aga ma tahtsin jagada jQuery funktsiooni ja näidiskoodilõiku, mis aitab teistel luua väljumise kavatsuste sündmus.

Mis on väljumiskavatsus?

Väljumise kavatsus on tehnika, mida veebisaidid kasutavad kasutaja hiire liikumise jälgimiseks ja tuvastamiseks, millal kasutaja hakkab lehelt lahkuma. Kui veebisait tuvastab, et kasutaja lahkub, võib see käivitada hüpikakna või muud tüüpi sõnumi, et püüda kasutajat lehel hoida või meelitada teda hiljem tagasi pöörduma.

Välju kavatsuste tehnoloogiast kasutab JavaScripti, et jälgida hiire liikumist ja määrata, millal kasutaja hakkab lehelt lahkuma. Kui veebisait tuvastab, et kasutaja on lahkumas, võib see kuvada hüpikakna, pakkuda eripakkumist või pakkuda muud tüüpi stiimulit, mis julgustab kasutajat lehele jääma või hiljem tagasi pöörduma.

Väljumise kavatsust kasutavad e-kaubanduse veebisaidid sageli ennetamiseks ostukorvi hülgamine või reklaamida eripakkumisi ja allahindlusi klientidele, kes hakkavad saidilt lahkuma. Seda saavad kasutada ka sisuveebisaidid, et reklaamida uudiskirjaga liitumist või julgustada kasutajaid seda saiti sotsiaalmeedias jälgima.

JavaScripti mouseleave funktsioon

Et mõista, kuidas mouseleave töötab, on kasulik teada, kuidas hiiresündmusi üldiselt käsitletakse. Kui liigutate kursorit veebilehe kohal, käivitab brauser sündmuste jada, mida saab püüda ja käsitleda JavaScripti koodiga. Nende sündmuste hulka kuuluvad mousemove, mouseover, mouseout, mouseenterja mouseleave.

. mouseenter ja mouseleave sündmused on sarnased mouseover ja mouseout sündmustest, kuid need käituvad veidi erinevalt. Kuigi mouseover ja mouseout käivituvad, kui hiir vastavalt elemendile siseneb või sealt lahkub, käivituvad need ka siis, kui hiir siseneb või lahkub selle elemendi mis tahes alamelemendist. See võib kompleksiga töötamisel kaasa tuua ootamatu käitumise HTML struktuurid.

mouseenter ja mouseleave sündmused seevastu käivituvad ainult siis, kui hiir siseneb elementi, millega sündmus on seotud, või lahkub sellest, ja ei käivitu, kui hiir siseneb alamelementi või lahkub sellest. See muudab need paljudel juhtudel etteaimatavamaks ja nendega töötamise lihtsamaks.

. mouseleave sündmust toetavad enamik kaasaegseid brausereid, sealhulgas Chrome, Firefox, Safari ja Edge. Mõned vanemad brauserid, näiteks Internet Explorer 8 ja varasemad brauserid, ei pruugi seda siiski toetada.

JavaScripti väljumise kavatsuse koodilõik

Kui mouseleave Näib, et antud div puhul töötab, saate selle rakendada ka tervele veebilehele.

Kood loob uue div nimetatakse elementi overlay mis katab kogu lehe ja millel on poolläbipaistev must taust (80% läbipaistmatus). Lisame selle ülekatte leht koos hüpikaknaga div.

Kui kasutaja käivitab väljumiskavatsuse, liigutades hiirt lehest väljapoole, kuvame nii hüpikakna kui ka ülekatte. See takistab kasutajal klõpsamast mujal lehel, kui hüpikaken on nähtav.

Kui kasutaja klõpsab väljaspool hüpikakent või sulgemisnupul, peidame nii hüpikakna kui ka ülekatte, et taastada lehe normaalne funktsionaalsus.

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';
    });
});

Maksimaalse brauseri ühilduvuse tagamiseks soovitaksin selle rakendamiseks siiski kasutada jQueryt.

jQuery Exit Intent Code Snippet

Siin on jQuery koodilõik, mis ühildub palju paremini kõigi brauseritega (kui lisate oma lehele jQuery).

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();
    });
});