Mialà Intent Popup Code Snippet amin'ny JavaScript sy jQuery
Ny iray amin'ireo tetik'asa izay iasako ho an'ity tranokala ity dia manana div popup misy a CTA izay mamporisika mpitsidika vaovao misoratra anarana amin'ny Martech Zone amin'ny mailaka. Misy fivoarana fanampiny iandrasako mba ho azoko widgetize ity fomba ity ho an'ny WordPress ary asaivo ho sidebar tena izy ny fizarana intent… fa tiako ny hizara ny jQuery function sy ohatra snippet code izay manampy ny hafa hamorona fivoahana hetsika.
Inona no atao hoe Exit Intent?
Ny fikasana hivoaka dia teknika ampiasain'ny vohikala hanaraha-maso ny fihetsiky ny totozy ary hamantatra ny fotoana handaozan'ny mpampiasa ny pejy. Rehefa hitan'ny vohikala fa miala ilay mpampiasa, dia afaka manetsika pop-up na karazana hafatra hafa hanandrana hitazona ilay mpampiasa ao amin'ny pejy na hitaona azy hiverina any aoriana.
Miala amin'ny teknolojia fikasana mampiasa JavaScript hanaraha-maso ny fihetsiky ny totozy sy hamaritana hoe rahoviana ny mpampiasa iray no handao pejy. Rehefa hitan'ny vohikala fa efa hiala ilay mpampiasa, dia afaka mampiseho hafatra mipoitra, manolotra fifanarahana manokana, na manome karazana fandrisihana hafa hanentanana ny mpampiasa hijanona ao amin'ny pejy na hiverina any aoriana.
Ny fikasana hivoaka dia matetika ampiasain'ny tranokala e-varotra hanandrana hisoroka fandaozana sarety fiantsenana na hampiroborobo tolotra manokana sy fihenam-bidy ho an'ny mpanjifa izay handao ny tranokala. Azo ampiasaina amin'ny tranokala votoaty ihany koa izy io mba hampiroboroboana ny fisoratana anarana amin'ny gazetiboky na hamporisika ny mpampiasa hanaraka ny tranokala amin'ny media sosialy.
Ny asan'ny mouseleave JavaScript
Mba hahatakarana ny fomba mouseleave
miasa, mahasoa ny mahafantatra ny fomba fitantanana ny hetsika totozy amin'ny ankapobeny. Rehefa manetsika ny totozy eo amin'ny pejin-tranonkala ianao, dia misy andiana hetsika entin'ny navigateur, izay azo alaina sy karakaraina amin'ny alàlan'ny code JavaScript. Anisan'ireny hetsika ireny mousemove
, mouseover
, mouseout
, mouseenter
, ary mouseleave
.
The mouseenter
ary mouseleave
ny hetsika dia mitovy amin'ny mouseover
ary mouseout
zava-nitranga, saingy hafa kely ny fitondran-tenany. raha mouseover
ary mouseout
trigger rehefa miditra na mandao singa iray ny totozy, dia mipoitra ihany koa izy ireo rehefa miditra na miala ao anatin'io singa io ny totozy. Mety hitarika fihetsika tsy ampoizina izany rehefa miasa amin'ny complex HTML rafitra.
mouseenter
ary mouseleave
Ny zava-mitranga kosa dia mipoitra rehefa miditra na miala amin'ilay singa ampifandraisina amin'ilay hetsika ny totozy, ary tsy mipoitra rehefa miditra na miala amin'ny singa ankizy ny totozy. Izany dia mahatonga azy ireo ho azo vinaniana kokoa sy mora kokoa ny miasa amin'ny tranga maro.
The mouseleave
Ny hetsika dia tohanan'ny ankamaroan'ny navigateur maoderina, anisan'izany ny Chrome, Firefox, Safari ary Edge. Na izany aza, mety tsy tohanan'ny navigateur tranainy sasany, toy ny Internet Explorer 8 sy taloha.
JavaScript Exit Intent Code Snippet
raha mouseleave
toa miasa amin'ny div iray nomena, azonao atao koa ny mampihatra izany amin'ny pejin-tranonkala iray manontolo.
Mamorona vaovao ny code div
singa antsoina overlay
izay mandrakotra ny pejy manontolo ary manana ambadika mainty semi-mangarahara (80% opacity). Manampy an'io overlay io amin'ny pejy miaraka amin'ny popup div.
Rehefa manetsika ny fikasana hivoaka ny mpampiasa amin'ny alàlan'ny fanosehana ny totozy ivelan'ny pejy, dia asehontsika ny popup sy ny overlay. Izany dia manakana ny mpampiasa tsy hikasika na aiza na aiza amin'ny pejy raha mbola hita ny popup.
Rehefa manindry ivelan'ny pop-up na eo amin'ny bokotra akaiky ny mpampiasa, dia afeninay ny popup sy ny overlay mba hamerenana ny fiasa mahazatra amin'ny pejy.
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';
});
});
Ho an'ny fampifanarahana ambony indrindra amin'ny navigateur, dia manoro hevitra ny fampiasana jQuery aho mba hampiharana izany.
jQuery Exit Intent Code Snippet
Ity ny sombin-kaody jQuery, izay mifanentana kokoa amin'ny navigateur rehetra (raha mbola ampidirinao ao amin'ny pejinao ny jQuery).
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();
});
});