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