ອອກຈາກ Intent Popup Code Snippet ໃນ JavaScript ແລະ jQuery
ຫນຶ່ງໃນໂຄງການທີ່ຂ້ອຍກໍາລັງເຮັດວຽກຢູ່ໃນເວັບໄຊທ໌ນີ້ແມ່ນມີ popup div ກັບ a CTA ທີ່ຊຸກຍູ້ໃຫ້ນັກທ່ອງທ່ຽວໃຫມ່ ສະ ໝັກ ສະມາຊິກ Martech Zone ທາງອີເມລ໌. ມີການພັດທະນາເພີ່ມເຕີມທີ່ຂ້ອຍກໍາລັງເຮັດວຽກເພື່ອໃຫ້ຂ້ອຍສາມາດເຮັດໄດ້ widgetize ວິທີການນີ້ສໍາລັບ WordPress ແລະມີສ່ວນຄວາມຕັ້ງໃຈອອກເປັນແຖບດ້ານຂ້າງຕົວຈິງ ... ແຕ່ຂ້ອຍຢາກແບ່ງປັນຟັງຊັນ jQuery ແລະຕົວຢ່າງລະຫັດທີ່ຊ່ວຍໃຫ້ຄົນອື່ນສ້າງ ຄວາມຕັ້ງໃຈອອກ ເຫດການ.
ຄວາມຕັ້ງໃຈອອກແມ່ນຫຍັງ?
Exit intent ແມ່ນເຕັກນິກທີ່ໃຊ້ໂດຍເວັບໄຊທ໌ເພື່ອຕິດຕາມການເຄື່ອນໄຫວຫນູຂອງຜູ້ໃຊ້ແລະກວດພົບເວລາທີ່ຜູ້ໃຊ້ກໍາລັງຈະອອກຈາກຫນ້າ. ເມື່ອເວັບໄຊທ໌ກວດພົບວ່າຜູ້ໃຊ້ກໍາລັງອອກໄປ, ມັນສາມາດເຮັດໃຫ້ເກີດປ໊ອບອັບຫຼືຂໍ້ຄວາມປະເພດອື່ນໆເພື່ອພະຍາຍາມຮັກສາຜູ້ໃຊ້ຢູ່ໃນຫນ້າຫຼືຊັກຊວນໃຫ້ພວກເຂົາກັບຄືນມາຕໍ່ມາ.
ອອກຈາກເຕັກໂນໂລຢີທີ່ຕັ້ງໃຈ ໃຊ້ JavaScript ເພື່ອຕິດຕາມການເຄື່ອນໄຫວຂອງຫນູແລະກໍານົດເວລາທີ່ຜູ້ໃຊ້ກໍາລັງຈະອອກຈາກຫນ້າ. ເມື່ອເວັບໄຊທ໌ກວດພົບວ່າຜູ້ໃຊ້ກໍາລັງຈະອອກໄປ, ມັນສາມາດສະແດງຂໍ້ຄວາມທີ່ປາກົດ, ສະເຫນີຂໍ້ສະເຫນີພິເສດ, ຫຼືສະຫນອງສິ່ງຈູງໃຈປະເພດອື່ນໆເພື່ອຊຸກຍູ້ໃຫ້ຜູ້ໃຊ້ຢູ່ໃນຫນ້າຫຼືກັບຄືນມາຕໍ່ມາ.
ຄວາມຕັ້ງໃຈອອກມັກຈະຖືກນໍາໃຊ້ໂດຍເວັບໄຊທ໌ອີຄອມເມີຊເພື່ອພະຍາຍາມປ້ອງກັນ ການປະຖິ້ມໂຄງຮ່າງການຊື້ເຄື່ອງ ຫຼືເພື່ອສົ່ງເສີມຂໍ້ສະເຫນີພິເສດແລະສ່ວນຫຼຸດໃຫ້ກັບລູກຄ້າທີ່ກໍາລັງຈະອອກຈາກເວັບໄຊທ໌. ມັນຍັງສາມາດຖືກນໍາໃຊ້ໂດຍເວັບໄຊທ໌ເນື້ອຫາເພື່ອສົ່ງເສີມການລົງທະບຽນຈົດຫມາຍຂ່າວຫຼືເພື່ອຊຸກຍູ້ໃຫ້ຜູ້ໃຊ້ຕິດຕາມເວັບໄຊທ໌ໃນສື່ສັງຄົມ.
ຟັງຊັນຂອງ mouseleave ຂອງ JavaScript
ເພື່ອເຂົ້າໃຈວິທີການ mouseleave
ມັນເປັນປະໂຫຍດທີ່ຈະຮູ້ວ່າເຫດການຂອງຫນູຖືກຈັດການໂດຍທົ່ວໄປແນວໃດ. ເມື່ອທ່ານຍ້າຍເມົ້າໄປເທິງໜ້າເວັບ, ເຫດການຕ່າງໆຈະຖືກກະຕຸ້ນໂດຍບຣາວເຊີ, ເຊິ່ງສາມາດຈັບ ແລະຈັດການດ້ວຍລະຫັດ JavaScript. ເຫດການເຫຼົ່ານີ້ລວມມີ mousemove
, mouseover
, mouseout
, mouseenter
, ແລະ mouseleave
.
ໄດ້ mouseenter
ແລະ mouseleave
ເຫດການແມ່ນຄ້າຍຄືກັນກັບ mouseover
ແລະ mouseout
ເຫດການ, ແຕ່ພວກເຂົາປະຕິບັດຕົວແຕກຕ່າງກັນເລັກນ້ອຍ. ໃນຂະນະທີ່ mouseover
ແລະ mouseout
ກະຕຸ້ນໃນເວລາທີ່ຫນູເຂົ້າໄປໃນຫຼືອອກຈາກອົງປະກອບຕາມລໍາດັບ, ພວກມັນຍັງກະຕຸ້ນເມື່ອຫນູເຂົ້າໄປໃນຫຼືອອກຈາກອົງປະກອບຂອງເດັກນ້ອຍພາຍໃນອົງປະກອບນັ້ນ. ນີ້ສາມາດນໍາໄປສູ່ພຶດຕິກໍາທີ່ບໍ່ຄາດຄິດໃນເວລາທີ່ເຮັດວຽກກັບສະລັບສັບຊ້ອນ HTML ໂຄງສ້າງ.
mouseenter
ແລະ mouseleave
ໃນທາງກົງກັນຂ້າມ, ເຫດການພຽງແຕ່ກະຕຸ້ນເມື່ອຫນູເຂົ້າໄປໃນຫຼືອອກຈາກອົງປະກອບທີ່ເຫດການຖືກຕິດຢູ່, ແລະຢ່າກະຕຸ້ນເມື່ອຫນູເຂົ້າໄປໃນຫຼືອອກຈາກອົງປະກອບຂອງເດັກນ້ອຍ. ນີ້ເຮັດໃຫ້ພວກເຂົາສາມາດຄາດເດົາໄດ້ຫຼາຍຂຶ້ນແລະງ່າຍຕໍ່ການເຮັດວຽກໃນຫຼາຍໆກໍລະນີ.
ໄດ້ mouseleave
ເຫດການແມ່ນສະຫນັບສະຫນູນໂດຍຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທີ່ສຸດ, ລວມທັງ Chrome, Firefox, Safari, ແລະ Edge. ຢ່າງໃດກໍ່ຕາມ, ມັນອາດຈະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍບາງຕົວທ່ອງເວັບທີ່ເກົ່າແກ່, ເຊັ່ນ Internet Explorer 8 ແລະກ່ອນຫນ້ານັ້ນ.
JavaScript Exit Intent Code Snippet
ໃນຂະນະທີ່ mouseleave
ເບິ່ງຄືວ່າຈະເຮັດວຽກຢູ່ໃນ div ໃດຫນຶ່ງ, ທ່ານຍັງສາມາດນໍາໃຊ້ມັນກັບຫນ້າເວັບທັງຫມົດ.
ລະຫັດສ້າງໃຫມ່ div
ອົງປະກອບທີ່ເອີ້ນວ່າ overlay
ເຊິ່ງກວມເອົາໜ້າທັງໝົດ ແລະ ມີພື້ນຫຼັງສີດຳເຄິ່ງໂປ່ງໃສ (ຄວາມໂປ່ງໃສ 80%). ພວກເຮົາເພີ່ມການວາງຊ້ອນນີ້ໃສ່ ໜ້າພ້ອມກັບປັອບອັບ div.
ເມື່ອຜູ້ໃຊ້ກະຕຸ້ນຄວາມຕັ້ງໃຈອອກໂດຍການຍ້າຍເມົ້າຂອງພວກເຂົາອອກໄປຂ້າງນອກຂອງຫນ້າ, ພວກເຮົາສະແດງທັງປ໊ອບອັບແລະການວາງຊ້ອນ. ນີ້ປ້ອງກັນບໍ່ໃຫ້ຜູ້ໃຊ້ຄລິກບ່ອນອື່ນໃນຫນ້າໃນຂະນະທີ່ປ໊ອບອັບຈະເຫັນໄດ້.
ເມື່ອຜູ້ໃຊ້ຄລິກຢູ່ນອກປ໊ອບອັບຫຼືປຸ່ມປິດ, ພວກເຮົາຊ່ອນທັງປັອບອັບແລະການວາງຊ້ອນເພື່ອຟື້ນຟູຫນ້າທີ່ປົກກະຕິໃຫ້ກັບຫນ້າ.
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';
});
});
ເພື່ອຄວາມເຂົ້າກັນໄດ້ສູງສຸດຂອງຕົວທ່ອງເວັບ, ຂ້ອຍຂໍແນະນໍາໃຫ້ໃຊ້ jQuery ເພື່ອປະຕິບັດມັນແທນທີ່ຈະ.
jQuery Exit Intent Code Snippet
ນີ້ແມ່ນຂໍ້ມູນຫຍໍ້ຂອງລະຫັດ jQuery, ເຊິ່ງເຂົ້າກັນໄດ້ຫຼາຍກັບທຸກບຣາວເຊີ (ຕາບໃດທີ່ເຈົ້າຍັງລວມ jQuery ໃນໜ້າເວັບຂອງເຈົ້າ).
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();
});
});