JavaScript və jQuery-də Niyyət Popup Kod Snippetindən çıxın
Bu sayt üçün üzərində işlədiyim layihələrdən biri a ilə pop-up div olmasıdır CTA yeni ziyarətçiləri həvəsləndirir abunə olun Martech Zone Elektron-poçt ilə. Üzərində işlədiyim əlavə inkişaf var ki, bacara biləcəm vidcetləşdirin üçün bu üsul WordPress və çıxış niyyəti bölməsinin faktiki yan panel olmasını təmin edin... lakin mən jQuery funksiyasını və başqalarına bir mesaj yaratmağa kömək edən nümunə kod parçasını paylaşmaq istədim. çıxış niyyəti hadisə.
Exit Intent nədir?
Çıxış məqsədi istifadəçinin siçan hərəkətini izləmək və istifadəçinin səhifəni tərk etmək üzrə olduğunu aşkar etmək üçün veb saytlar tərəfindən istifadə edilən bir texnikadır. Veb sayt istifadəçinin getdiyini aşkar etdikdə, istifadəçini səhifədə saxlamağa və ya daha sonra qayıtmağa sövq etmək üçün pop-up və ya başqa tipli mesajı işə sala bilər.
Niyyət texnologiyasından çıxın siçan hərəkətlərini izləmək və istifadəçinin nə vaxt səhifəni tərk etmək üzrə olduğunu müəyyən etmək üçün JavaScript-dən istifadə edir. Veb sayt istifadəçinin tərk etmək üzrə olduğunu aşkar etdikdə, popup mesajı göstərə, xüsusi sövdələşmə təklif edə və ya istifadəçini səhifədə qalmağa və ya daha sonra qayıtmağa təşviq etmək üçün hər hansı digər stimul təqdim edə bilər.
Çıxış niyyəti tez-tez e-ticarət saytları tərəfindən qarşısını almağa çalışmaq üçün istifadə olunur alver səbətindən imtina və ya saytı tərk etmək üzrə olan müştərilərə xüsusi sövdələşmələr və endirimlər təqdim etmək. Bundan əlavə, məzmun veb saytları tərəfindən xəbər bülleteni qeydiyyatını təşviq etmək və ya istifadəçiləri sosial mediada saytı izləməyə təşviq etmək üçün istifadə edilə bilər.
JavaScript-in mouseleave funksiyası
Necə olduğunu başa düşmək üçün mouseleave
işləyirsə, siçan hadisələrinin ümumiyyətlə necə idarə olunduğunu bilmək faydalıdır. Siçanınızı veb səhifənin üzərində hərəkət etdirdiyiniz zaman, brauzer tərəfindən JavaScript kodu tərəfindən tutula və idarə oluna bilən bir sıra hadisələr tetiklenir. Bu hadisələrə daxildir mousemove
, mouseover
, mouseout
, mouseenter
və mouseleave
.
The mouseenter
və mouseleave
hadisələrə bənzəyir mouseover
və mouseout
hadisələr, lakin onlar bir qədər fərqli davranırlar. ikən mouseover
və mouseout
siçan elementə daxil olduqda və ya onu tərk etdikdə, müvafiq olaraq, siçan həmin element daxilində hər hansı alt elementə daxil olduqda və ya onu tərk etdikdə tetiklenir. Bu, komplekslə işləyərkən gözlənilməz davranışa səbəb ola bilər HTML strukturları.
mouseenter
və mouseleave
hadisələr isə yalnız siçan hadisənin qoşulduğu elementə daxil olduqda və ya onu tərk etdikdə tətiklənir və siçan hər hansı alt elementə daxil olduqda və ya ondan çıxanda işə salınmır. Bu, onları daha proqnozlaşdırıla bilən və bir çox hallarda işləməyi asanlaşdırır.
The mouseleave
hadisə Chrome, Firefox, Safari və Edge daxil olmaqla, əksər müasir brauzerlər tərəfindən dəstəklənir. Bununla belə, o, bəzi köhnə brauzerlər, məsələn, Internet Explorer 8 və daha əvvəlki versiyalar tərəfindən dəstəklənməyə bilər.
JavaScript Çıxış Məqsədi Kod Parçası
Isə mouseleave
verilmiş div üzərində işləyir, siz onu bütün veb səhifəyə də tətbiq edə bilərsiniz.
Kod yenisini yaradır div
adlı element overlay
bütün səhifəni əhatə edən və yarı şəffaf qara fon (80% qeyri-şəffaflıq) var. Bu örtüyü əlavə edirik popup ilə birlikdə səhifə bölmək
İstifadəçi siçanı səhifədən kənara çıxararaq çıxış məqsədini işə saldıqda, biz həm popup, həm də üst-üstə düşməni göstəririk. Bu, pop-up görünən zaman istifadəçinin səhifədə başqa yerə klikləməsinin qarşısını alır.
İstifadəçi popupdan kənarda və ya bağlama düyməsini kliklədikdə, biz səhifənin normal funksionallığını bərpa etmək üçün həm popup, həm də örtüyü gizlədirik.
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';
});
});
Maksimum brauzer uyğunluğu üçün bunun yerinə jQuery-dən istifadə etməyi məsləhət görürəm.
jQuery Exit Niyyət Kod Parçası
Budur, bütün brauzerlərə daha uyğun olan jQuery kod parçası (səhifəyə jQuery daxil etdiyiniz müddətcə).
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();
});
});