Marketing okhutiraKutsatsa kwa Imelo & Zodzichitira

Tulukani Mauthenga Owonjezera a Intent Popup mu JavaScript Ndi jQuery

Chimodzi mwama projekiti omwe ndikugwira nawo patsamba lino ndikukhala ndi popup div ndi a CTA zomwe zimalimbikitsa alendo atsopano lembetsani ku Martech Zone pa imelo. Pali zowonjezera zowonjezera zomwe ndikuchita kuti ndithe widgetize njira iyi kwa WordPress ndipo ndikhale ndi gawo lotulukamo likhale lambali kwenikweni… tulukani cholinga chochitika.

Kodi Exit Intent ndi chiyani?

Exit intent ndi njira yomwe mawebusayiti amagwiritsa ntchito kuti azitha kuyang'anira mbewa za wogwiritsa ntchito ndikuzindikira nthawi yomwe wogwiritsa ntchitoyo akufuna kuchoka patsamba. Webusaitiyo ikazindikira kuti wogwiritsa ntchitoyo akuchoka, imatha kuyambitsa mphukira kapena mtundu wina wa uthenga kuyesa kuti wogwiritsa ntchitoyo akhalebe patsambalo kapena kuwakopa kuti abwererenso nthawi ina.

Choka luso lazolinga amagwiritsa ntchito JavaScript kuti azitha kuyang'anira mayendedwe a mbewa ndikuzindikira nthawi yomwe wogwiritsa ntchito akufuna kusiya tsamba. Webusaitiyo ikazindikira kuti wogwiritsa ntchitoyo watsala pang'ono kuchoka, imatha kuwonetsa uthenga wotuluka, kupereka ndalama zapadera, kapena kupereka zolimbikitsira zamtundu wina kuti zilimbikitse wogwiritsa ntchitoyo kukhalabe patsambalo kapena kubwereranso nthawi ina.

Zofuna zotuluka nthawi zambiri zimagwiritsidwa ntchito ndi masamba a e-commerce kuyesa kupewa kusiya ngolo yamagalimoto kapena kulimbikitsa malonda apadera ndi kuchotsera kwa makasitomala omwe atsala pang'ono kuchoka patsamba. Itha kugwiritsidwanso ntchito ndi masamba omwe ali patsamba kulimbikitsa kusaina kwamakalata kapena kulimbikitsa ogwiritsa ntchito kutsatira tsambalo pazama media.

JavaScript's mouseleave function

Kuti mumvetse mmene mouseleave imagwira ntchito, ndizothandiza kudziwa momwe zochitika za mbewa zimachitikira nthawi zonse. Mukasuntha mbewa yanu patsamba lawebusayiti, zochitika zingapo zimayambitsidwa ndi msakatuli, zomwe zitha kujambulidwa ndikugwiridwa ndi JavaScript code. Zochitika izi zikuphatikizapo mousemove, mouseover, mouseout, mouseenterndipo mouseleave.

The mouseenter ndi mouseleave zochitika ndi zofanana mouseover ndi mouseout zochitika, koma amachita mosiyana pang'ono. Pamene mouseover ndi mouseout kuyambitsa pamene mbewa ilowa kapena kusiya chinthu, motsatira, imayambitsanso pamene mbewa ilowa kapena kusiya zinthu zilizonse za ana mkati mwa chinthucho. Izi zingayambitse khalidwe losayembekezereka pamene mukugwira ntchito ndi zovuta HTML nyumba.

mouseenter ndi mouseleave zochitika, kumbali ina, zimangoyambitsa pamene mbewa ilowa kapena kuchoka pa chinthu chomwe chochitikacho chimamangiriridwa, ndipo sichiyambitsa pamene mbewa ilowa kapena kusiya zinthu zilizonse za ana. Izi zimapangitsa kuti zikhale zodziwikiratu komanso zosavuta kugwira nawo ntchito nthawi zambiri.

The mouseleave chochitika chimathandizidwa ndi asakatuli ambiri amakono, kuphatikiza Chrome, Firefox, Safari, ndi Edge. Komabe, mwina sichidzathandizidwa ndi asakatuli ena akale, monga Internet Explorer 8 ndi akale.

JavaScript Exit Intent Code Snippet

pamene mouseleave zikuwoneka kuti zikugwira ntchito pa div yopatsidwa, mutha kuyiyikanso patsamba lonse.

Khodiyo imapanga chatsopano div chinthu chotchedwa overlay zomwe zimaphimba tsamba lonse ndipo zili ndi maziko akuda owoneka bwino (80% opacity). Timawonjezera chophimba ichi ku mbale tsamba limodzi ndi popup div.

Wogwiritsa ntchito akayambitsa cholinga chotuluka posuntha mbewa yake kunja kwa tsamba, timawonetsa zowonekera komanso zokulirapo. Izi zimalepheretsa wosuta kudina kwina kulikonse patsamba pomwe mphukira ikuwonekera.

Wogwiritsa ntchito akadina kunja kwa mphukira kapena pa batani lotseka, timabisa zonse zowonekera ndi zokutira kuti tibwezeretse magwiridwe antchito patsamba.

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

Kuti mugwirizane kwambiri ndi msakatuli, ndingalimbikitse kugwiritsa ntchito jQuery kuti mugwiritse ntchito izi m'malo mwake.

jQuery Exit Intent Code Snippet

Nayi jQuery code snippet, yomwe imagwirizana kwambiri ndi asakatuli onse ( bola ngati mukuphatikiza jQuery patsamba lanu).

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 ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.