內容營銷電子郵件營銷與自動化

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% 不透明度)。 我們將這個疊加層添加到 頁面和彈出窗口 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 退出意圖代碼片段

下面是 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 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。