内容营销电子邮件营销与自动化

JavaScript 和 jQuery 中的退出意图弹出代码片段

我正在为这个网站做的项目之一是有一个带有 CTA 鼓励新访客 订阅 Martech Zone 通过电子邮件。 我正在进行额外的开发,以便我可以 小部件化 这种方法用于 WordPress 并让退出意图部分成为一个实际的侧边栏……但我确实想分享 jQuery 函数和示例代码片段,以帮助其他人创建一个 退出意图 事件。

什么是退出意图?

退出意图是网站用来跟踪用户鼠标移动并检测用户何时即将离开页面的技术。 当网站检测到用户离开时,它可以触发弹出窗口或其他类型的消息,以试图让用户留在页面上或吸引他们稍后返回。

退出意图技术 使用 JavaScript 跟踪鼠标移动并确定用户何时要离开页面。 当网站检测到用户即将离开时,它可以显示弹出消息、提供特价商品或提供其他类型的激励措施来鼓励用户留在页面上或稍后返回。

电子商务网站经常使用退出意图来试图阻止 购物车放弃 或向即将离开网站的客户推销特价商品和折扣。 内容网站也可以使用它来促进时事通讯注册或鼓励用户在社交媒体上关注该网站。

JavaScript 的 mouseleave 函数

为了了解如何 mouseleave 有效,了解鼠标事件的一般处理方式很有帮助。 当你将鼠标移到网页上时,浏览器会触发一系列事件,这些事件可以被 JavaScript 代码捕获和处理。 这些事件包括 mousemove, mouseover, mouseout, mouseentermouseleave.

mouseentermouseleave 事件类似于 mouseovermouseout 事件,但它们的行为略有不同。 尽管 mouseovermouseout 当鼠标分别进入或离开元素时触发,当鼠标进入或离开该元素内的任何子元素时,它们也会触发。 在处理复杂的情况时,这可能会导致意外行为 HTML 结构。

mouseentermouseleave 另一方面,事件仅在鼠标进入或离开事件所附加的元素时触发,而不会在鼠标进入或离开任何子元素时触发。 这使它们在许多情况下更可预测且更易于使用。

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 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。