بازاریابی محتوابازاریابی ایمیلی و اتوماسیون

از قطعه کد پاپ آپ Intent در جاوا اسکریپت و جی کوئری خارج شوید

یکی از پروژه هایی که من روی این سایت کار می کنم داشتن یک popup div با a CTA که بازدیدکنندگان جدید را تشویق می کند اشتراک در Martech Zone با ایمیل. توسعه دیگری وجود دارد که من روی آن کار می کنم تا بتوانم ویجت کردن این روش برای وردپرس و بخش قصد خروج یک نوار کناری واقعی باشد... اما من می‌خواستم تابع jQuery و قطعه کد نمونه را به اشتراک بگذارم که به دیگران کمک می‌کند تا یک قصد خروج رویداد.

Exit Intent چیست؟

قصد خروج تکنیکی است که توسط وب سایت ها برای ردیابی حرکت ماوس کاربر و تشخیص زمانی که کاربر قصد ترک صفحه را دارد استفاده می کند. وقتی وب‌سایت تشخیص می‌دهد که کاربر در حال ترک است، می‌تواند یک پنجره بازشو یا نوع دیگری از پیام را راه‌اندازی کند تا کاربر را در صفحه نگه دارد یا او را ترغیب کند که بعداً برگردد.

خروج از فناوری قصد از جاوا اسکریپت برای ردیابی حرکات ماوس و تعیین زمان خروج کاربر از صفحه استفاده می کند. هنگامی که وب سایت تشخیص می دهد که کاربر در شرف خروج است، می تواند یک پیام بازشو نمایش دهد، یک معامله ویژه ارائه دهد، یا نوع دیگری از انگیزه را برای تشویق کاربر به ماندن در صفحه یا بازگشت بعداً فراهم کند.

قصد خروج اغلب توسط وب سایت های تجارت الکترونیک برای جلوگیری از آن استفاده می شود رها کردن سبد خرید یا برای تبلیغ معاملات و تخفیف های ویژه به مشتریانی که در شرف ترک سایت هستند. همچنین می تواند توسط وب سایت های محتوا برای ترویج ثبت نام در خبرنامه یا تشویق کاربران به دنبال کردن سایت در رسانه های اجتماعی استفاده شود.

تابع برگ موش جاوا اسکریپت

برای اینکه بفهمیم چطور mouseleave کار می کند، دانستن اینکه چگونه رویدادهای ماوس به طور کلی مدیریت می شوند مفید است. هنگامی که ماوس خود را روی یک صفحه وب حرکت می‌دهید، یک سری رویدادها توسط مرورگر ایجاد می‌شوند که می‌توانند توسط کد جاوا اسکریپت ضبط و مدیریت شوند. این رویدادها شامل mousemove, mouseover, mouseout, mouseenterو mouseleave.

La mouseenter و mouseleave رویدادها شبیه به mouseover و mouseout رویدادها، اما آنها کمی متفاوت رفتار می کنند. در حالی که mouseover و mouseout هنگامی که ماوس به یک عنصر وارد یا خارج می شود، به ترتیب، هنگامی که ماوس هر عنصر فرزندی را در آن عنصر وارد می کند یا از آن خارج می شود، فعال می شوند. این می تواند منجر به رفتار غیرمنتظره هنگام کار با پیچیده شود HTML سازه های.

mouseenter و mouseleave از سوی دیگر، رویدادها فقط زمانی فعال می شوند که ماوس به عنصری که رویداد به آن متصل است وارد یا خارج شود، و زمانی که ماوس وارد یا خارج از عناصر فرزند می شود، فعال نمی شوند. این باعث می شود که آنها در بسیاری از موارد قابل پیش بینی تر و راحت تر کار کنند.

La mouseleave رویداد توسط اکثر مرورگرهای مدرن از جمله Chrome، Firefox، Safari و Edge پشتیبانی می‌شود. با این حال، ممکن است توسط برخی از مرورگرهای قدیمی، مانند اینترنت اکسپلورر 8 و نسخه های قبلی، پشتیبانی نشود.

قطعه کد هدف خروج از جاوا اسکریپت

در حالی که 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(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 است. داگلاس همچنین نویسنده کتاب راهنمای Dummie و کتاب رهبری تجاری است.

مقالات مرتبط

بازگشت به دکمه بالا
نزدیک

Adblock شناسایی شد

Martech Zone می تواند این محتوا را بدون هیچ هزینه ای در اختیار شما قرار دهد زیرا ما از طریق درآمد تبلیغاتی، پیوندهای وابسته و حمایت های مالی از سایت خود کسب درآمد می کنیم. اگر در حین مشاهده سایت ما، مسدود کننده تبلیغات خود را حذف کنید، خوشحال خواهیم شد.