ຕະຫຼາດເນື້ອໃນການຕະຫຼາດອີເມລ໌ & ອັດຕະໂນມັດ

ອອກຈາກ 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('&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 ແມ່ນ CMO ຂອງ OpenINSIGHTS ແລະຜູ້ກໍ່ຕັ້ງຂອງ Martech Zone. Douglas ໄດ້ຊ່ວຍເຫຼືອຜູ້ເລີ່ມຕົ້ນ MarTech ຫຼາຍໆຄົນທີ່ປະສົບຜົນສໍາເລັດ, ໄດ້ຊ່ວຍເຫຼືອໃນຄວາມພາກພຽນອັນເນື່ອງມາຈາກຫຼາຍກວ່າ $ 5 ຕື້ໃນການຊື້ແລະການລົງທຶນ Martech, ແລະສືບຕໍ່ຊ່ວຍເຫຼືອບໍລິສັດໃນການປະຕິບັດແລະອັດຕະໂນມັດຍຸດທະສາດການຂາຍແລະການຕະຫຼາດຂອງພວກເຂົາ. Douglas ແມ່ນການຫັນເປັນດິຈິຕອນທີ່ໄດ້ຮັບການຍອມຮັບໃນລະດັບສາກົນແລະຜູ້ຊ່ຽວຊານ MarTech ແລະລໍາໂພງ. Douglas ຍັງເປັນຜູ້ຂຽນທີ່ພິມເຜີຍແຜ່ຂອງຄູ່ມືຂອງ Dummie ແລະຫນັງສືຜູ້ນໍາທາງທຸລະກິດ.

ບົດຄວາມທີ່ກ່ຽວຂ້ອງ

ກັບໄປດ້ານເທິງສຸດ
ປິດ

ກວດພົບ Adblock

Martech Zone ສາມາດສະໜອງເນື້ອຫານີ້ໃຫ້ກັບເຈົ້າໄດ້ໂດຍບໍ່ເສຍຄ່າໃຊ້ຈ່າຍໃດໆ ເພາະວ່າພວກເຮົາສ້າງລາຍໄດ້ຈາກເວັບໄຊຂອງພວກເຮົາຜ່ານລາຍໄດ້ໂຄສະນາ, ລິ້ງເຊື່ອມໂຍງ ແລະສະປອນເຊີ. ພວກ​ເຮົາ​ຈະ​ຮູ້​ສຶກ​ດີ​ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຈະ​ເອົາ​ຕົວ​ບລັອກ​ການ​ໂຄ​ສະ​ນາ​ຂອງ​ທ່ານ​ທີ່​ທ່ານ​ເບິ່ງ​ເວັບ​ໄຊ​ຂອງ​ພວກ​ເຮົາ.