Содержание маркетингаЭлектронный маркетинг и автоматизация

Фрагмент кода всплывающего окна Exit Intent в JavaScript и jQuery

Один из проектов, над которым я работаю для этого сайта, — это всплывающий элемент div с CTA побуждает новых посетителей к Подписаться Martech Zone по электронной почте. Есть дополнительная разработка, над которой я работаю, чтобы я мог виджет этот метод для WordPress и сделать раздел намерения выхода настоящей боковой панелью… но я действительно хотел поделиться функцией jQuery и фрагментом кода примера, который помогает другим создавать выход намерение мероприятие.

Что такое намерение выхода?

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

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

Намерение выхода часто используется веб-сайтами электронной коммерции, чтобы попытаться предотвратить отказ в корзине покупок или рекламировать специальные предложения и скидки для клиентов, которые собираются покинуть сайт. Он также может использоваться контентными веб-сайтами для продвижения подписки на новостную рассылку или для поощрения пользователей следить за сайтом в социальных сетях.

JavaScript-функция mouseleave

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

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

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