ynhâld MarketingE-postmarketing en automatisearring

Exit Intent Popup Code Snippet yn JavaScript en jQuery

Ien fan 'e projekten dêr't ik oan wurkje foar dizze side is in popup div mei in CTA dat stimulearret nije besikers ta Ynskriuwe foar Martech Zone troch e-mail. D'r is ekstra ûntwikkeling wêr't ik oan wurkje, sadat ik kin widgetize dizze metoade foar WordPress en hawwe de seksje útgongsbedoeling in wirklike sydbalke wêze ... mar ik woe wol de jQuery-funksje diele en foarbyldkoadesnippet dy't oaren helpt om in útgong yntinsje barren.

Wat is Exit Intent?

Utgongsbedoeling is in technyk dy't brûkt wurdt troch websiden om de mûsbeweging fan in brûker te folgjen en te detektearjen wannear't de brûker op it punt is de side te ferlitten. As de webside ûntdekt dat de brûker fuortgiet, kin it in popup of in oar type berjocht triggerje om te besykjen de brûker op 'e side te hâlden of har te ferlieden om letter werom te kommen.

Exit intent technology brûkt JavaScript om mûsbewegingen te folgjen en te bepalen wannear't in brûker op it punt is om in side te ferlitten. As de webside ûntdekt dat de brûker op it punt is te ferlitten, kin it in popup-berjocht werjaan, in spesjale deal oanbiede, of in oare soarte stimulâns leverje om de brûker oan te moedigjen om op 'e side te bliuwen of letter werom te gean.

Utgongsbedoeling wurdt faak brûkt troch e-commerce-websides om te besykjen te foarkommen winkelkarre ferlitte of om spesjale oanbiedingen en koartingen te befoarderjen oan klanten dy't op it punt steane om de side te ferlitten. It kin ek brûkt wurde troch ynhâldwebsides om oanmeldingen foar nijsbrief te befoarderjen of om brûkers oan te moedigjen de side op sosjale media te folgjen.

JavaScript's mouseleave-funksje

Om te begripen hoe mouseleave wurket, it is nuttich om te witten hoe't mûseveneminten yn it algemien behannele wurde. As jo ​​​​jo mûs oer in webside ferpleatse, wurdt in searje eveneminten trigger troch de browser, dy't kin wurde fêstlein en behannele troch JavaScript-koade. Dizze eveneminten befetsje mousemove, mouseover, mouseout, mouseenter, en mouseleave.

De mouseenter en mouseleave eveneminten binne fergelykber mei de mouseover en mouseout eveneminten, mar se gedrage in bytsje oars. Wylst mouseover en mouseout trigger as de mûs respektivelik in elemint ynkomt of ferlit, se trigger ek as de mûs in bernelemint yn dat elemint ynkomt of ferlit. Dit kin liede ta ûnferwacht gedrach by it wurkjen mei kompleks HTML struktueren.

mouseenter en mouseleave events, oan 'e oare kant, allinne trigger as de mûs komt of ferlit it elemint dat it evenemint is hechte oan, en net oansette as de mûs komt of ferlit gjin bern eleminten. Dit makket se mear foarsisber en makliker om mei te wurkjen yn in protte gefallen.

De mouseleave evenemint wurdt stipe troch de measte moderne browsers, ynklusyf Chrome, Firefox, Safari, en Edge. It kin lykwols net wurde stipe troch guon âldere browsers, lykas Internet Explorer 8 en earder.

JavaScript Exit Intent Code Snippet

Wylst mouseleave liket te wurkjen op in opjûne div, kinne jo it ek tapasse op in hiele webside.

De koade makket in nij div elemint neamd overlay dat beslacht de hiele side en hat in semy-transparante swarte eftergrûn (80% dekking). Wy foegje dizze overlay oan de side tegearre mei de popup div.

As de brûker de útgongsintinsje trigger troch har mûs bûten de side te ferpleatsen, litte wy sawol de popup as de overlay sjen. Dit foarkomt dat de brûker earne oars op de side klikt wylst de popup sichtber is.

As de brûker bûten de popup of op de knop slute klikt, ferbergje wy sawol de popup as de overlay om normale funksjonaliteit op 'e side te herstellen.

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

Foar maksimale browserkompatibiliteit ried ik lykwols oan om jQuery te brûken om dit ynstee te ymplementearjen.

jQuery Exit Intent Code Snippet

Hjir is it jQuery-koadefragment, dat folle mear kompatibel is mei alle browsers (sa lang as jo jQuery op jo side opnimme).

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 is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.