Content MarketingEmail Marketing & Automation

Mialà Intent Popup Code Snippet amin'ny JavaScript sy jQuery

Ny iray amin'ireo tetik'asa izay iasako ho an'ity tranokala ity dia manana div popup misy a CTA izay mamporisika mpitsidika vaovao misoratra anarana amin'ny Martech Zone amin'ny mailaka. Misy fivoarana fanampiny iandrasako mba ho azoko widgetize ity fomba ity ho an'ny WordPress ary asaivo ho sidebar tena izy ny fizarana intent… fa tiako ny hizara ny jQuery function sy ohatra snippet code izay manampy ny hafa hamorona fivoahana hetsika.

Inona no atao hoe Exit Intent?

Ny fikasana hivoaka dia teknika ampiasain'ny vohikala hanaraha-maso ny fihetsiky ny totozy ary hamantatra ny fotoana handaozan'ny mpampiasa ny pejy. Rehefa hitan'ny vohikala fa miala ilay mpampiasa, dia afaka manetsika pop-up na karazana hafatra hafa hanandrana hitazona ilay mpampiasa ao amin'ny pejy na hitaona azy hiverina any aoriana.

Miala amin'ny teknolojia fikasana mampiasa JavaScript hanaraha-maso ny fihetsiky ny totozy sy hamaritana hoe rahoviana ny mpampiasa iray no handao pejy. Rehefa hitan'ny vohikala fa efa hiala ilay mpampiasa, dia afaka mampiseho hafatra mipoitra, manolotra fifanarahana manokana, na manome karazana fandrisihana hafa hanentanana ny mpampiasa hijanona ao amin'ny pejy na hiverina any aoriana.

Ny fikasana hivoaka dia matetika ampiasain'ny tranokala e-varotra hanandrana hisoroka fandaozana sarety fiantsenana na hampiroborobo tolotra manokana sy fihenam-bidy ho an'ny mpanjifa izay handao ny tranokala. Azo ampiasaina amin'ny tranokala votoaty ihany koa izy io mba hampiroboroboana ny fisoratana anarana amin'ny gazetiboky na hamporisika ny mpampiasa hanaraka ny tranokala amin'ny media sosialy.

Ny asan'ny mouseleave JavaScript

Mba hahatakarana ny fomba mouseleave miasa, mahasoa ny mahafantatra ny fomba fitantanana ny hetsika totozy amin'ny ankapobeny. Rehefa manetsika ny totozy eo amin'ny pejin-tranonkala ianao, dia misy andiana hetsika entin'ny navigateur, izay azo alaina sy karakaraina amin'ny alàlan'ny code JavaScript. Anisan'ireny hetsika ireny mousemove, mouseover, mouseout, mouseenter, ary mouseleave.

The mouseenter ary mouseleave ny hetsika dia mitovy amin'ny mouseover ary mouseout zava-nitranga, saingy hafa kely ny fitondran-tenany. raha mouseover ary mouseout trigger rehefa miditra na mandao singa iray ny totozy, dia mipoitra ihany koa izy ireo rehefa miditra na miala ao anatin'io singa io ny totozy. Mety hitarika fihetsika tsy ampoizina izany rehefa miasa amin'ny complex HTML rafitra.

mouseenter ary mouseleave Ny zava-mitranga kosa dia mipoitra rehefa miditra na miala amin'ilay singa ampifandraisina amin'ilay hetsika ny totozy, ary tsy mipoitra rehefa miditra na miala amin'ny singa ankizy ny totozy. Izany dia mahatonga azy ireo ho azo vinaniana kokoa sy mora kokoa ny miasa amin'ny tranga maro.

The mouseleave Ny hetsika dia tohanan'ny ankamaroan'ny navigateur maoderina, anisan'izany ny Chrome, Firefox, Safari ary Edge. Na izany aza, mety tsy tohanan'ny navigateur tranainy sasany, toy ny Internet Explorer 8 sy taloha.

JavaScript Exit Intent Code Snippet

raha mouseleave toa miasa amin'ny div iray nomena, azonao atao koa ny mampihatra izany amin'ny pejin-tranonkala iray manontolo.

Mamorona vaovao ny code div singa antsoina overlay izay mandrakotra ny pejy manontolo ary manana ambadika mainty semi-mangarahara (80% opacity). Manampy an'io overlay io amin'ny pejy miaraka amin'ny popup div.

Rehefa manetsika ny fikasana hivoaka ny mpampiasa amin'ny alàlan'ny fanosehana ny totozy ivelan'ny pejy, dia asehontsika ny popup sy ny overlay. Izany dia manakana ny mpampiasa tsy hikasika na aiza na aiza amin'ny pejy raha mbola hita ny popup.

Rehefa manindry ivelan'ny pop-up na eo amin'ny bokotra akaiky ny mpampiasa, dia afeninay ny popup sy ny overlay mba hamerenana ny fiasa mahazatra amin'ny pejy.

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

Ho an'ny fampifanarahana ambony indrindra amin'ny navigateur, dia manoro hevitra ny fampiasana jQuery aho mba hampiharana izany.

jQuery Exit Intent Code Snippet

Ity ny sombin-kaody jQuery, izay mifanentana kokoa amin'ny navigateur rehetra (raha mbola ampidirinao ao amin'ny pejinao ny 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();
    });
});

Douglas Karr

Douglas Karr dia CMO ny OpenINSIGHTS ary ny mpanorina ny Martech Zone. Nanampy tamin'ny fanombohana MarTech am-polony maro i Douglas, nanampy tamin'ny fahazotoana mitentina 5 miliara dolara amin'ny fividianana sy fampiasam-bola Martech, ary manohy manampy ireo orinasa amin'ny fampiharana sy ny automatique ny paikady momba ny varotra sy ny varotra. Douglas dia fanovàna nomerika eken'ny sehatra iraisam-pirenena ary manampahaizana sy mpandahateny MarTech. Douglas dia mpanoratra navoakan'ny torolàlana Dummie ary boky fitarihana orinasa.

Related Articles

Miverina amin'ny bokotra ambony
akaiky

Adblock hita

Martech Zone dia afaka manome anao ity votoaty ity tsy misy vidiny satria ataonay vola ny tranokalanay amin'ny alàlan'ny fidiram-bolan'ny doka, ny rohy mifandray, ary ny fanohanana. Mankasitraka izahay raha esorinao ny fanakanana dokao rehefa mijery ny tranokalanay ianao.