از قطعه کد پاپ آپ 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('×');
// 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();
});
});