Content SuuqIimayl Suuqgeynta & Automation-ka

Ka bixi Intent Popup Code Snippet ee JavaScript iyo jQuery

Mid ka mid ah mashaariicda aan ka shaqeynayo goobtan ayaa ah in aan haysto div pop-up leh a CTA taas oo dhiirigelisa booqdayaasha cusub rukumo Martech Zone email ahaan. Waxaa jira horumar dheeraad ah oo aan ka shaqeynayo si aan awoodo widgetize habkan loogu talagalay WordPress oo ha ahaato qaybta ka bixida inay noqoto bar-side dhab ah… laakiin waxaan rabay inaan wadaago shaqada jQuery iyo koodka jeexjeexa tusaalaha kaas oo caawiya dadka kale inay abuuraan ujeedada bixitaanka dhacdo.

Waa maxay Ujeeddada Bixinta?

Ujeedka bixitaanku waa farsamada ay adeegsadaan mareegaha si ay ula socdaan dhaqdhaqaaqa jiirka isticmaalaha oo ay ogaadaan marka isticmaaluhu ku dhow yahay inuu ka tago bogga. Marka website-ku ogaado in isticmaaluhu baxayo, waxay kicin kartaa soo-bandhig ama nooc kale oo fariin ah si ay isugu dayaan in ay ku hayaan isticmaalaha bogga ama ku sasabto inay mar dambe soo noqdaan.

Tignoolajiyada ujeedka ka bax wuxuu adeegsadaa JavaScript si uu ula socdo dhaqdhaqaaqa jiirka oo uu u go'aamiyo marka isticmaaluhu uu ku dhow yahay inuu ka tago bog. Marka shabakadu ay ogaato in isticmaaluhu uu ku dhow yahay inuu baxo, waxay soo bandhigi kartaa fariin soo baxday, waxay bixin kartaa heshiis gaar ah, ama waxay siin kartaa nooc kale oo dhiirigelin ah si loogu dhiirigaliyo isticmaalaha inuu ku sii jiro bogga ama uu soo laabto mar dambe.

Ujeedada ka bixitaanka ayaa inta badan isticmaala shabakadaha e-commerce si ay isugu dayaan in ay ka hortagaan Gawaarida dukaanka oo laga tago ama si kor loogu qaado heshiisyada gaarka ah iyo qiimo dhimista macaamiisha ku dhow inay ka baxaan goobta. Waxa kale oo loo isticmaali karaa mareegaha waxyaabaha ku jira si ay kor ugu qaadaan saxiixyada wargeysyada ama in lagu dhiirigeliyo isticmaalayaasha inay la socdaan goobta warbaahinta bulshada.

JavaScript's mouseleave function

Si loo fahmo sida mouseleave shaqeeya, waa waxtar leh in la ogaado sida dhacdooyinka jiirka loo maareeyo guud ahaan. Marka aad mouse-kaagu dul marto bogga shabakadda, dhacdooyin taxane ah waxa kiciyay browser-ka, kaas oo lagu qabsan karo oo uu maamuli karo koodka JavaScript. Dhacdooyinkaas waxaa ka mid ah mousemove, mouseover, mouseout, mouseenter, Iyo mouseleave.

The mouseenter iyo mouseleave dhacdooyinka waxay la mid yihiin kuwa mouseover iyo mouseout dhacdooyinka, laakiin waxay u dhaqmaan wax yar ka duwan. Halka mouseover iyo mouseout kiciya marka jiirku soo galo ama ka baxo curiye, siday u kala horreeyaan, waxay sidoo kale kiciyaan marka jiirku galo ama ka tago wax kasta oo canaasiir ah oo ku jira curiyahaas. Tani waxay u horseedi kartaa dabeecad lama filaan ah marka la shaqeynayo adag HTML dhismayaasha.

mouseenter iyo mouseleave Dhacdooyinka, dhinaca kale, kaliya waxay kiciyaan marka jiirku galo ama ka baxo curiyaha ay dhacdada ku xiran tahay, mana kiciyaan marka uu jiirku soo galo ama ka tago wax kasta oo cunug ah. Tani waxay ka dhigaysaa kuwo la saadaalin karo oo ay fududahay in lala shaqeeyo marar badan.

The mouseleave Dhacdada waxaa taageera inta badan daalacashada casriga ah, oo ay ku jiraan Chrome, Firefox, Safari, iyo Edge. Si kastaba ha ahaatee, waxaa laga yaabaa in aysan taageerin qaar ka mid ah daalacayaasha hore, sida Internet Explorer 8 iyo ka hor.

Koodhka ka bixida JavaScript jajabka ujeedada

Inkastoo mouseleave Waxay u muuqataa inay ku shaqeyso div la bixiyay, waxaad sidoo kale codsan kartaa bogga shabakadda oo dhan.

Codku wuxuu abuuraa mid cusub div curiye loo yaqaan overlay kaas oo daboolaya bogga oo dhan oo leh asal madow oo badh ah (80% indho-furnaan). Waxaan ku darnaa dulsaarkan bogga oo ay weheliso soo-bandhigista qod.

Marka isticmaaluhu uu kiciyo ulajeedka bixitaanka isaga oo u dhaqaajinaya mouse-ka meel ka baxsan bogga, waxaanu tusinaa soo-boodka iyo dulka labadaba. Tani waxay ka hortagtaa isticmaaluhu inuu gujiyo meel kasta oo kale oo bogga ah inta uu muuqanayo.

Marka isticmaaluhu uu gujiyo meel ka baxsan popup-ka ama badhanka u dhow, waxaanu qarinaa labadaba popup-ka iyo dulka si aanu dib ugu soo celino shaqayntii caadiga ahayd ee bogga.

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

La jaanqaadka browserka ugu sarreeya, waxaan ku talin lahaa isticmaalka jQuery si loo hirgeliyo tan, in kastoo.

jQuery Exit Intent Code Snippet

Waa kan jQuery koodka jeexjeexa, kaas oo aad ula jaan qaadaya dhammaan daalacashada (ilaa inta aad ku darayso jQuery boggaaga).

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 waa CMO INSIGHTS iyo aasaasihii Martech Zone. Douglas waxa uu caawiyay daraasiin guulo bilaabay MarTech, waxa uu ka caawiyay dadaalka saxda ah ee ka badan $5 bilyan ee iibsiga iyo maalgashiga Martech, waxana uu sii wadaa in uu ka caawiyo shirkadaha hirgelinta iyo habaynta xeeladahooda iibka iyo suuqgeynta. Douglas waa isbeddel dhijitaal ah oo caalami ah oo la aqoonsan yahay iyo khabiir MarTech iyo afhayeenka. Douglas sidoo kale waa qoraa la daabacay ee hagaha Dummie iyo buug hogaaminta ganacsiga.

Qodobbo la xiriira

Gadaal u laab
Close

Adblock waa la ogaaday

Martech Zone wuxuu awoodaa inuu ku siiyo macluumaadkan lacag la'aan sababtoo ah waxaanu ka galnay boggayaga dakhliga xayaysiiska, xidhiidhada xiriirka, iyo kafaalaqaadyada. Waanu qadarin lahayn haddii aad ka saari lahayd xannibaadahaaga xayaysiisyada markaad aragto boggayaga.