Marketing ContentEmail Marketing & Automation

Tloha Snippet ea Khouto ea Intent ho JavaScript le jQuery

E 'ngoe ea merero eo ke sebetsang ho eona bakeng sa sebaka sena sa marang-rang ke ho ba le popup div e nang le a CTA e khothalletsang baeti ba bacha ho Ingolise ho Martech Zone ka imeile. Ho na le ntlafatso e eketsehileng eo ke sebetsang ho eona e le hore nka khona widgetize mokhoa ona bakeng sa Wordpress 'me u etse hore karolo ea sepheo sa ho tsoa e be sebaka se ka thōko ... empa ke ne ke batla ho arolelana mosebetsi oa jQuery le snippet ea khoutu ea mohlala e thusang ba bang ho theha tsoa sepheo ketsahalo.

Exit Intent ke Eng?

Exit intent ke mokhoa o sebelisoang ke liwebsaete ho lekola motsamao oa litoeba tsa mosebelisi le ho bona ha mosebelisi a le mothating oa ho tsoa leqepheng. Ha sebaka sa marang-rang se lemoha hore mosebelisi oa tsamaea, se ka hlahisa popup kapa mofuta o mong oa molaetsa ho leka ho boloka mosebelisi leqepheng kapa ho ba hohela hore ba khutle hamorao.

Tloha ho theknoloji ea sepheo e sebelisa JavaScript ho lekola metsamao ea litoeba le ho tseba hore na mosebelisi o tla tloha leqepheng lefe. Ha sebaka sa marang-rang se lemoha hore mosebelisi o se a tla tloha, se ka hlahisa molaetsa oa popup, sa fana ka thekiso e khethehileng, kapa sa fana ka mofuta o mong oa khothatso ho khothaletsa mosebelisi ho lula leqepheng kapa ho khutla hamorao.

Sepheo sa ho tsoa hangata se sebelisoa ke liwebsaete tsa e-commerce ho leka ho thibela ho lahloa koloing ea ho reka kapa ho ntšetsa pele litumellano tse khethehileng le litheolelo ho bareki ba haufi le ho tloha sebakeng seo. E ka boela ea sebelisoa ke liwebsaete tsa litaba ho khothaletsa ho ngolisa mangolo a litaba kapa ho khothaletsa basebelisi ho latela sebaka sa marang-rang mecheng ea litaba tsa sechaba.

Mosebetsi oa JavaScript's mouseleave

E le hore u utloisise hore na joang mouseleave e sebetsa, ho molemo ho tseba hore na liketsahalo tsa mouse li sebetsoa joang ka kakaretso. Ha o tsamaisa toeba ea hau leqepheng la webo, letoto la liketsahalo le hlahisoa ke sebatli, se ka nkuoang le ho tšoaroa ka khoutu ea JavaScript. Liketsahalo tsena li kenyelletsa mousemove, mouseover, mouseout, mouseenter, 'me mouseleave.

The mouseenter 'me mouseleave liketsahalo li tšoana le tsa mouseover 'me mouseout liketsahalo, empa li itšoara ka tsela e fapaneng hanyane. Leha ho le joalo mouseover 'me mouseout qala ha toeba e kena kapa e tsoa nthong e 'ngoe, ka ho latellana, e qala hape ha mouse e kena kapa e siea likarolo tsa ngoana ka har'a ntho eo. Sena se ka lebisa boitšoarong bo sa lebelloang ha u sebetsa ka thata HTML dibopeho.

mouseenter 'me mouseleave diketsahalo, ka lehlakoreng le leng, di qhoma feela ha tweba e kena kapa e tswa nthong eo ketsahalo e hoketsweng ho yona, mme ha e qale ha tweba e kena kapa e siya dintho tsa ngwana. Sena se etsa hore ho be bonolo ho sebetsa le bona maemong a mangata.

The mouseleave ketsahalo e tšehetsoa ke libatli tse ngata tsa sejoale-joale, ho kenyelletsa Chrome, Firefox, Safari, le Edge. Leha ho le joalo, e kanna ea se ke ea tšehetsoa ke libatli tse ling tsa khale, joalo ka Internet Explorer 8 le pejana.

Snippet ea Khoutu ea Tloha ea JavaScript

Ha a ntse a mouseleave e bonahala e sebetsa ho div e fanoeng, o ka e sebelisa hape leqepheng lohle la webo.

Khoutu e theha e ncha div element bitsoa overlay e koahelang leqephe lohle 'me e na le bokamorao bo botšo bo sa bonahaleng (80% opacity). Re eketsa sekoahelo sena ho leqepheng la mmoho le popup div.

Ha mosebelisi a hlahisa sepheo sa ho tsoa ka ho suthisetsa toeba ea hae kantle ho leqephe, re bonts'a popup le likoahelo. Sena se thibela mosebelisi ho tobetsa kae kapa kae leqepheng ha popup e bonahala.

Ha mosebelisi a tobetsa ka ntle ho popup kapa konopo e koalang, re pata popup le sekoaelo ho khutlisetsa ts'ebetso e tloaelehileng leqepheng.

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

Bakeng sa tšebelisano e phahameng ea sebatli, ke khothaletsa ho sebelisa jQuery ho kenya ts'ebetsong sena, leha ho le joalo.

Snippet ea Khoutu ea Ts'ebetso ea jQuery

Mona ke snippet ea khoutu ea jQuery, e tsamaellanang le libatli tsohle (ha feela u ntse u kenyelletsa jQuery leqepheng la hau).

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 ke CMO ea Bula LITLHAKISO le mothehi oa Martech Zone. Douglas o thusitse batho ba bangata ba atlehileng ho qala ka MarTech, o thusitse boitelong bo nepahetseng ba chelete e fetang $5 bilione ho reka le matsete a Martech, mme o ntse a tsoela pele ho thusa lik'hamphani ho kenya ts'ebetsong le ho iketsetsa maano a bona a ho rekisa le ho bapatsa. Douglas ke setsebi le sebui sa MarTech se tsebahalang lefatšeng ka bophara. Douglas hape ke sengoli se hatisitsoeng sa tataiso ea Dummie le buka ea boetapele ba khoebo.

Related Articles

Konopo ea holimo
Close

Adblock e fumanwe

Martech Zone e khona ho u fa litaba tsena ntle ho tefo hobane re etsa chelete sebakeng sa rona sa marang-rang ka lekeno la lipapatso, likhokahano tsa kopanelo le lithuso tsa lichelete. Re ka thabela ha o ka tlosa se thibelang lipapatso ha u ntse u sheba sebaka sa rona sa marang-rang.