Tulukani Mauthenga Owonjezera a Intent Popup mu JavaScript Ndi jQuery
Chimodzi mwama projekiti omwe ndikugwira nawo patsamba lino ndikukhala ndi popup div ndi a CTA zomwe zimalimbikitsa alendo atsopano lembetsani ku Martech Zone pa imelo. Pali zowonjezera zowonjezera zomwe ndikuchita kuti ndithe widgetize njira iyi kwa WordPress ndipo ndikhale ndi gawo lotulukamo likhale lambali kwenikweni… tulukani cholinga chochitika.
Kodi Exit Intent ndi chiyani?
Exit intent ndi njira yomwe mawebusayiti amagwiritsa ntchito kuti azitha kuyang'anira mbewa za wogwiritsa ntchito ndikuzindikira nthawi yomwe wogwiritsa ntchitoyo akufuna kuchoka patsamba. Webusaitiyo ikazindikira kuti wogwiritsa ntchitoyo akuchoka, imatha kuyambitsa mphukira kapena mtundu wina wa uthenga kuyesa kuti wogwiritsa ntchitoyo akhalebe patsambalo kapena kuwakopa kuti abwererenso nthawi ina.
Choka luso lazolinga amagwiritsa ntchito JavaScript kuti azitha kuyang'anira mayendedwe a mbewa ndikuzindikira nthawi yomwe wogwiritsa ntchito akufuna kusiya tsamba. Webusaitiyo ikazindikira kuti wogwiritsa ntchitoyo watsala pang'ono kuchoka, imatha kuwonetsa uthenga wotuluka, kupereka ndalama zapadera, kapena kupereka zolimbikitsira zamtundu wina kuti zilimbikitse wogwiritsa ntchitoyo kukhalabe patsambalo kapena kubwereranso nthawi ina.
Zofuna zotuluka nthawi zambiri zimagwiritsidwa ntchito ndi masamba a e-commerce kuyesa kupewa kusiya ngolo yamagalimoto kapena kulimbikitsa malonda apadera ndi kuchotsera kwa makasitomala omwe atsala pang'ono kuchoka patsamba. Itha kugwiritsidwanso ntchito ndi masamba omwe ali patsamba kulimbikitsa kusaina kwamakalata kapena kulimbikitsa ogwiritsa ntchito kutsatira tsambalo pazama media.
JavaScript's mouseleave function
Kuti mumvetse mmene mouseleave
imagwira ntchito, ndizothandiza kudziwa momwe zochitika za mbewa zimachitikira nthawi zonse. Mukasuntha mbewa yanu patsamba lawebusayiti, zochitika zingapo zimayambitsidwa ndi msakatuli, zomwe zitha kujambulidwa ndikugwiridwa ndi JavaScript code. Zochitika izi zikuphatikizapo mousemove
, mouseover
, mouseout
, mouseenter
ndipo mouseleave
.
The mouseenter
ndi mouseleave
zochitika ndi zofanana mouseover
ndi mouseout
zochitika, koma amachita mosiyana pang'ono. Pamene mouseover
ndi mouseout
kuyambitsa pamene mbewa ilowa kapena kusiya chinthu, motsatira, imayambitsanso pamene mbewa ilowa kapena kusiya zinthu zilizonse za ana mkati mwa chinthucho. Izi zingayambitse khalidwe losayembekezereka pamene mukugwira ntchito ndi zovuta HTML nyumba.
mouseenter
ndi mouseleave
zochitika, kumbali ina, zimangoyambitsa pamene mbewa ilowa kapena kuchoka pa chinthu chomwe chochitikacho chimamangiriridwa, ndipo sichiyambitsa pamene mbewa ilowa kapena kusiya zinthu zilizonse za ana. Izi zimapangitsa kuti zikhale zodziwikiratu komanso zosavuta kugwira nawo ntchito nthawi zambiri.
The mouseleave
chochitika chimathandizidwa ndi asakatuli ambiri amakono, kuphatikiza Chrome, Firefox, Safari, ndi Edge. Komabe, mwina sichidzathandizidwa ndi asakatuli ena akale, monga Internet Explorer 8 ndi akale.
JavaScript Exit Intent Code Snippet
pamene mouseleave
zikuwoneka kuti zikugwira ntchito pa div yopatsidwa, mutha kuyiyikanso patsamba lonse.
Khodiyo imapanga chatsopano div
chinthu chotchedwa overlay
zomwe zimaphimba tsamba lonse ndipo zili ndi maziko akuda owoneka bwino (80% opacity). Timawonjezera chophimba ichi ku mbale tsamba limodzi ndi popup div.
Wogwiritsa ntchito akayambitsa cholinga chotuluka posuntha mbewa yake kunja kwa tsamba, timawonetsa zowonekera komanso zokulirapo. Izi zimalepheretsa wosuta kudina kwina kulikonse patsamba pomwe mphukira ikuwonekera.
Wogwiritsa ntchito akadina kunja kwa mphukira kapena pa batani lotseka, timabisa zonse zowonekera ndi zokutira kuti tibwezeretse magwiridwe antchito patsamba.
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';
});
});
Kuti mugwirizane kwambiri ndi msakatuli, ndingalimbikitse kugwiritsa ntchito jQuery kuti mugwiritse ntchito izi m'malo mwake.
jQuery Exit Intent Code Snippet
Nayi jQuery code snippet, yomwe imagwirizana kwambiri ndi asakatuli onse ( bola ngati mukuphatikiza jQuery patsamba lanu).
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();
});
});