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