Konten PemasaranPemasaran & Otomasi Email

Exit Intent Popup Code Snippet di JavaScript dan jQuery

Salah satu proyek yang saya kerjakan untuk situs ini adalah membuat div popup dengan a CTA yang mendorong pengunjung baru untuk berlangganan Martech Zone melalui email. Ada pengembangan tambahan yang sedang saya kerjakan sehingga saya bisa membuat widget metode ini untuk WordPress dan membuat bagian exit intent menjadi sidebar yang sebenarnya… tapi saya memang ingin membagikan fungsi jQuery dan contoh cuplikan kode yang membantu orang lain membuat Keluar dari niat peristiwa.

Apa itu Exit Intent?

Exit intent adalah teknik yang digunakan oleh situs web untuk melacak pergerakan mouse pengguna dan mendeteksi saat pengguna akan meninggalkan halaman. Ketika situs web mendeteksi bahwa pengguna pergi, itu dapat memicu munculan atau jenis pesan lain untuk mencoba mempertahankan pengguna di halaman atau membujuk mereka untuk kembali lagi nanti.

Teknologi niat keluar menggunakan JavaScript untuk melacak pergerakan mouse dan menentukan kapan pengguna akan meninggalkan halaman. Ketika situs web mendeteksi bahwa pengguna akan pergi, itu dapat menampilkan pesan munculan, menawarkan penawaran khusus, atau memberikan beberapa jenis insentif lain untuk mendorong pengguna tetap di halaman atau kembali lagi nanti.

Niat keluar sering digunakan oleh situs web e-niaga untuk mencoba mencegah pengabaian keranjang belanja atau untuk mempromosikan penawaran dan diskon khusus kepada pelanggan yang akan meninggalkan situs. Itu juga dapat digunakan oleh situs web konten untuk mempromosikan pendaftaran buletin atau mendorong pengguna untuk mengikuti situs di media sosial.

fungsi mouseleave JavaScript

Untuk memahami caranya mouseleave berfungsi, sangat membantu untuk mengetahui bagaimana peristiwa mouse ditangani secara umum. Saat Anda menggerakkan mouse ke halaman web, serangkaian peristiwa dipicu oleh browser, yang dapat ditangkap dan ditangani oleh kode JavaScript. Peristiwa tersebut antara lain mousemove, mouseover, mouseout, mouseenter, dan mouseleave.

Grafik mouseenter dan mouseleave kejadiannya mirip dengan mouseover dan mouseout acara, tetapi mereka berperilaku sedikit berbeda. Ketika mouseover dan mouseout memicu ketika mouse memasuki atau meninggalkan elemen, masing-masing, mereka juga memicu ketika mouse memasuki atau meninggalkan elemen anak apa pun di dalam elemen itu. Ini dapat menyebabkan perilaku yang tidak terduga saat bekerja dengan kompleks HTML struktur.

mouseenter dan mouseleave peristiwa, di sisi lain, hanya terpicu saat mouse masuk atau keluar dari elemen yang melekat pada peristiwa tersebut, dan tidak terpicu saat mouse masuk atau keluar dari elemen anak mana pun. Ini membuat mereka lebih dapat diprediksi dan lebih mudah untuk dikerjakan dalam banyak kasus.

Grafik mouseleave acara didukung oleh sebagian besar browser modern, termasuk Chrome, Firefox, Safari, dan Edge. Namun, ini mungkin tidak didukung oleh beberapa browser lama, seperti Internet Explorer 8 dan versi sebelumnya.

Cuplikan Kode Niat Keluar JavaScript

Sementara mouseleave tampaknya berfungsi pada div tertentu, Anda juga dapat menerapkannya ke seluruh halaman web.

Kode menciptakan yang baru div elemen disebut overlay yang menutupi seluruh halaman dan memiliki latar belakang hitam semi-transparan (opasitas 80%). Kami menambahkan overlay ini ke halaman bersama dengan popup div.

Saat pengguna memicu niat keluar dengan menggerakkan mouse mereka ke luar halaman, kami menampilkan popup dan overlay. Ini mencegah pengguna mengklik di tempat lain pada halaman saat munculan terlihat.

Ketika pengguna mengklik di luar popup atau tombol tutup, kami menyembunyikan popup dan overlay untuk mengembalikan fungsionalitas normal ke halaman.

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';
    });
});

Untuk kompatibilitas browser maksimum, saya akan merekomendasikan menggunakan jQuery untuk mengimplementasikannya.

jQuery Keluar dari Cuplikan Kode Maksud

Inilah cuplikan kode jQuery, yang jauh lebih kompatibel dengan semua browser (selama Anda menyertakan jQuery di halaman Anda).

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 adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.