Nilalaman MarketingEmail Marketing at Automation

Lumabas sa Intent Popup Code Snippet sa JavaScript At jQuery

Isa sa mga proyektong ginagawa ko para sa site na ito ay ang pagkakaroon ng popup div na may a CTA na naghihikayat sa mga bagong bisita na mag-subscribe sa Martech Zone gamit ang email. May karagdagang development na ginagawa ko para magawa ko widgetize paraang ito para sa WordPress at gawing aktwal na sidebar ang exit intent section... ngunit gusto kong ibahagi ang jQuery function at halimbawang code snippet na tumutulong sa iba na lumikha ng exit hangarin kaganapan.

Ano ang Exit Intent?

Ang exit intent ay isang pamamaraan na ginagamit ng mga website upang subaybayan ang paggalaw ng mouse ng isang user at makita kung kailan aalis na ang user sa page. Kapag nakita ng website na aalis ang user, maaari itong mag-trigger ng popup o iba pang uri ng mensahe upang subukang panatilihin ang user sa page o hikayatin silang bumalik sa ibang pagkakataon.

Lumabas na teknolohiya ng hangarin gumagamit ng JavaScript upang subaybayan ang mga paggalaw ng mouse at matukoy kung kailan aalis ang isang user sa isang pahina. Kapag natukoy ng website na aalis na ang user, maaari itong magpakita ng popup na mensahe, mag-alok ng espesyal na deal, o magbigay ng iba pang uri ng insentibo upang hikayatin ang user na manatili sa page o bumalik sa ibang pagkakataon.

Ang exit intent ay kadalasang ginagamit ng mga website ng e-commerce upang subukang pigilan pag-abandona sa shopping cart o para mag-promote ng mga espesyal na deal at diskwento sa mga customer na malapit nang umalis sa site. Maaari din itong gamitin ng mga website ng nilalaman upang i-promote ang mga pag-signup sa newsletter o upang hikayatin ang mga user na sundan ang site sa social media.

Ang function ng mouseleave ng JavaScript

Upang maunawaan kung paano mouseleave gumagana, nakakatulong na malaman kung paano pinangangasiwaan ang mga kaganapan sa mouse sa pangkalahatan. Kapag inilipat mo ang iyong mouse sa isang web page, ang isang serye ng mga kaganapan ay na-trigger ng browser, na maaaring makuha at pangasiwaan ng JavaScript code. Kasama sa mga kaganapang ito mousemove, mouseover, mouseout, mouseenter, at mouseleave.

Ang mouseenter at mouseleave ang mga pangyayari ay katulad ng mouseover at mouseout mga kaganapan, ngunit bahagyang naiiba ang kanilang pag-uugali. Habang mouseover at mouseout trigger kapag pumasok o umalis ang mouse sa isang elemento, ayon sa pagkakabanggit, nagti-trigger din sila kapag pumasok o umalis ang mouse sa anumang elemento ng bata sa loob ng elementong iyon. Maaari itong humantong sa hindi inaasahang pag-uugali kapag nagtatrabaho sa kumplikado HTML istruktura.

mouseenter at mouseleave Ang mga kaganapan, sa kabilang banda, ay nagti-trigger lamang kapag ang mouse ay pumasok o umalis sa elemento kung saan naka-attach ang kaganapan, at hindi nagti-trigger kapag ang mouse ay pumasok o umalis sa anumang mga elemento ng bata. Ginagawa nitong mas predictable at mas madaling gamitin ang mga ito sa maraming kaso.

Ang mouseleave Ang kaganapan ay sinusuportahan ng karamihan sa mga modernong browser, kabilang ang Chrome, Firefox, Safari, at Edge. Gayunpaman, maaaring hindi ito suportado ng ilang mas lumang browser, gaya ng Internet Explorer 8 at mas maaga.

JavaScript Exit Intent Code Snippet

Habang mouseleave mukhang gumagana sa isang partikular na div, maaari mo rin itong ilapat sa isang buong web page.

Lumilikha ang code ng bago div elemento na tinatawag overlay na sumasaklaw sa buong page at may semi-transparent na itim na background (80% opacity). Idinaragdag namin ang overlay na ito sa page kasama ang popup div.

Kapag na-trigger ng user ang exit intent sa pamamagitan ng paggalaw ng kanilang mouse sa labas ng page, ipinapakita namin pareho ang popup at ang overlay. Pinipigilan nito ang user na mag-click saanman sa page habang nakikita ang popup.

Kapag nag-click ang user sa labas ng popup o sa close button, itatago namin pareho ang popup at ang overlay para maibalik ang normal na functionality sa page.

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

Para sa maximum na pagiging tugma ng browser, inirerekumenda ko ang paggamit ng jQuery upang ipatupad ito sa halip, bagaman.

jQuery Exit Intent Code Snippet

Narito ang snippet ng jQuery code, na mas tugma sa lahat ng browser (hangga't isinama mo ang jQuery sa iyong pahina).

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 ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.