Məzmun MarketinqE-poçt Marketinqi və Avtomatlaşdırma

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, mouseentermouseleave.

The mouseentermouseleave hadisələrə bənzəyir mouseovermouseout hadisələr, lakin onlar bir qədər fərqli davranırlar. ikən mouseovermouseout 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ı.

mouseentermouseleave 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('&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-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

əlaqəli məqalələr

Başa dön düyməsini basın
yaxın

Adblock Aşkarlandı

Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.