Вміст МаркетингЕлектронний маркетинг і автоматизація

Фрагмент коду спливаючого вікна наміру вийти в JavaScript і jQuery

Одним із проектів, над яким я працюю для цього сайту, є спливаюче вікно div з a CTA що заохочує нових відвідувачів передплатити Martech Zone електронною поштою. Є додатковий розвиток, над яким я працюю, щоб я міг віджетувати цей метод для WordPress і зробити розділ намірів виходу справжньою бічною панеллю… але я хотів поділитися функцією jQuery та прикладом фрагмента коду, який допомагає іншим створювати вихід із наміру події.

Що таке намір виходу?

Намір вийти – це техніка, яка використовується веб-сайтами для відстеження руху миші користувача та визначення моменту, коли користувач збирається залишити сторінку. Коли веб-сайт виявляє, що користувач виходить, він може викликати спливаюче вікно або повідомлення іншого типу, щоб спробувати утримати користувача на сторінці або спонукати його повернутися пізніше.

Технологія намірів виходу використовує 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

У той час як mouseleave працює на певному div, ви також можете застосувати його до всієї веб-сторінки.

Код створює новий div елемент називається overlay який покриває всю сторінку та має напівпрозорий чорний фон (непрозорість 80%). Ми додаємо це накладення до сторінку разом із спливаючим вікном дів.

Коли користувач запускає намір вийти, переміщаючи мишу за межі сторінки, ми показуємо як спливаюче вікно, так і накладення. Це запобігає користувачеві клацанням будь-де ще на сторінці, поки видиме спливаюче вікно.

Коли користувач клацає за межами спливаючого вікна або на кнопці закриття, ми приховуємо і спливаюче вікно, і накладення, щоб відновити нормальну функціональність сторінки.

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

Ось фрагмент коду 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. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.