Lumabas sa Intent Popup Code Snippet sa JavaScript At jQuery
Isa sa mga proyektong ginagawa ko para sa site na ito ay ang pagkakaroon ng popup div na may a CTA na naghihikayat sa mga bagong bisita na mag-subscribe sa Martech Zone gamit ang email. May karagdagang development na ginagawa ko para magawa ko widgetize paraang ito para sa WordPress at gawing aktwal na sidebar ang exit intent section... ngunit gusto kong ibahagi ang jQuery function at halimbawang code snippet na tumutulong sa iba na lumikha ng exit hangarin kaganapan.
Ano ang Exit Intent?
Ang exit intent ay isang pamamaraan na ginagamit ng mga website upang subaybayan ang paggalaw ng mouse ng isang user at makita kung kailan aalis na ang user sa page. Kapag nakita ng website na aalis ang user, maaari itong mag-trigger ng popup o iba pang uri ng mensahe upang subukang panatilihin ang user sa page o hikayatin silang bumalik sa ibang pagkakataon.
Lumabas na teknolohiya ng hangarin gumagamit ng JavaScript upang subaybayan ang mga paggalaw ng mouse at matukoy kung kailan aalis ang isang user sa isang pahina. Kapag natukoy ng website na aalis na ang user, maaari itong magpakita ng popup na mensahe, mag-alok ng espesyal na deal, o magbigay ng iba pang uri ng insentibo upang hikayatin ang user na manatili sa page o bumalik sa ibang pagkakataon.
Ang exit intent ay kadalasang ginagamit ng mga website ng e-commerce upang subukang pigilan pag-abandona sa shopping cart o para mag-promote ng mga espesyal na deal at diskwento sa mga customer na malapit nang umalis sa site. Maaari din itong gamitin ng mga website ng nilalaman upang i-promote ang mga pag-signup sa newsletter o upang hikayatin ang mga user na sundan ang site sa social media.
Ang function ng mouseleave ng JavaScript
Upang maunawaan kung paano mouseleave
gumagana, nakakatulong na malaman kung paano pinangangasiwaan ang mga kaganapan sa mouse sa pangkalahatan. Kapag inilipat mo ang iyong mouse sa isang web page, ang isang serye ng mga kaganapan ay na-trigger ng browser, na maaaring makuha at pangasiwaan ng JavaScript code. Kasama sa mga kaganapang ito mousemove
, mouseover
, mouseout
, mouseenter
, at mouseleave
.
Ang mouseenter
at mouseleave
ang mga pangyayari ay katulad ng mouseover
at mouseout
mga kaganapan, ngunit bahagyang naiiba ang kanilang pag-uugali. Habang mouseover
at mouseout
trigger kapag pumasok o umalis ang mouse sa isang elemento, ayon sa pagkakabanggit, nagti-trigger din sila kapag pumasok o umalis ang mouse sa anumang elemento ng bata sa loob ng elementong iyon. Maaari itong humantong sa hindi inaasahang pag-uugali kapag nagtatrabaho sa kumplikado HTML istruktura.
mouseenter
at mouseleave
Ang mga kaganapan, sa kabilang banda, ay nagti-trigger lamang kapag ang mouse ay pumasok o umalis sa elemento kung saan naka-attach ang kaganapan, at hindi nagti-trigger kapag ang mouse ay pumasok o umalis sa anumang mga elemento ng bata. Ginagawa nitong mas predictable at mas madaling gamitin ang mga ito sa maraming kaso.
Ang mouseleave
Ang kaganapan ay sinusuportahan ng karamihan sa mga modernong browser, kabilang ang Chrome, Firefox, Safari, at Edge. Gayunpaman, maaaring hindi ito suportado ng ilang mas lumang browser, gaya ng Internet Explorer 8 at mas maaga.
JavaScript Exit Intent Code Snippet
Habang mouseleave
mukhang gumagana sa isang partikular na div, maaari mo rin itong ilapat sa isang buong web page.
Lumilikha ang code ng bago div
elemento na tinatawag overlay
na sumasaklaw sa buong page at may semi-transparent na itim na background (80% opacity). Idinaragdag namin ang overlay na ito sa page kasama ang popup div.
Kapag na-trigger ng user ang exit intent sa pamamagitan ng paggalaw ng kanilang mouse sa labas ng page, ipinapakita namin pareho ang popup at ang overlay. Pinipigilan nito ang user na mag-click saanman sa page habang nakikita ang popup.
Kapag nag-click ang user sa labas ng popup o sa close button, itatago namin pareho ang popup at ang overlay para maibalik ang normal na functionality sa page.
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';
});
});
Para sa maximum na pagiging tugma ng browser, inirerekumenda ko ang paggamit ng jQuery upang ipatupad ito sa halip, bagaman.
jQuery Exit Intent Code Snippet
Narito ang snippet ng jQuery code, na mas tugma sa lahat ng browser (hangga't isinama mo ang jQuery sa iyong pahina).
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();
});
});