Exit Intent Popup Code Snippet a JavaScript An jQuery
Ee vun de Projeten un déi ech fir dëse Site schaffen ass e Popup-Div mat engem cta dat encouragéiert nei Visiteuren ze abonnéieren Martech Zone per E-Mail. Et gëtt eng zousätzlech Entwécklung un deem ech schaffen fir datt ech kann widgetiséieren dëser Method fir WordPress an hunn d'Exit Absicht Sektioun eng tatsächlech Sidebar ... awer ech wollt d'jQuery Funktioun an d'Beispill Code Snippet deelen, deen aneren hëlleft eng ze kreéieren Sortie Absicht Event.
Wat ass Exit Intent?
Exit Absicht ass eng Technik déi vu Websäite benotzt gëtt fir d'Mausbewegung vun engem Benotzer ze verfolgen an z'entdecken wann de Benotzer amgaang ass d'Säit ze verloossen. Wann d'Websäit feststellt datt de Benotzer verléisst, kann et e Popup oder eng aner Zort Message ausléisen fir ze probéieren de Benotzer op der Säit ze halen oder se ze verlocken fir méi spéit zréckzekommen.
Exit Intent Technologie benotzt JavaScript fir Mausbewegungen ze verfolgen an ze bestëmmen wann e Benotzer amgaang ass eng Säit ze verloossen. Wann d'Websäit feststellt datt de Benotzer amgaang ass ze verloossen, kann et e Popup-Message weisen, e speziellen Deal ubidden oder eng aner Zort Ureiz ubidden fir de Benotzer ze encouragéieren op der Säit ze bleiwen oder méi spéit zréckzekommen.
Exit Absicht gëtt dacks vun E-Commerce Websäite benotzt fir ze vermeiden Shopping Weenchen opginn oder fir speziell Offeren a Remise fir Clienten ze promoten déi amgaang sinn de Site ze verloossen. Et kann och vun Inhalt Websäite benotzt ginn fir Newsletter Umeldungen ze förderen oder Benotzer ze encouragéieren de Site op sozialen Medien ze verfollegen.
JavaScript's Mausleeffunktioun
Fir ze verstoen wéi mouseleave
funktionnéiert, ass et hëllefräich ze wëssen wéi Mausevenementer am Allgemengen gehandhabt ginn. Wann Dir Är Maus iwwer eng Websäit bewegt, gëtt eng Serie vun Eventer vum Browser ausgeléist, déi duerch JavaScript Code erfaasst a gehandhabt kënne ginn. Dës Evenementer enthalen mousemove
, mouseover
, mouseout
, mouseenter
, an mouseleave
.
d' mouseenter
an mouseleave
Evenementer sinn ähnlech zu der mouseover
an mouseout
Evenementer, mä si behuelen liicht anescht. Während mouseover
an mouseout
ausléisen wann d'Maus en Element eragitt oder verléisst, respektiv, si léisen och wann d'Maus all Kand Elementer an deem Element erakënnt oder verléisst. Dëst kann zu onerwaart Verhalen féieren wann Dir mat komplexe schafft HTML Strukturen.
mouseenter
an mouseleave
Eventer, op der anerer Säit, ausléisen nëmmen wann d'Maus d'Element erakënnt oder verléisst, op deem d'Evenement verbonnen ass, an net ausléisen wann d'Maus all Kand Elementer erakënnt oder verléisst. Dëst mécht se méi prévisibel a méi einfach mat a ville Fäll ze schaffen.
d' mouseleave
Event gëtt vun de meeschte modernen Browser ënnerstëtzt, dorënner Chrome, Firefox, Safari a Edge. Wéi och ëmmer, et gëtt vläicht net vun e puer eelere Browser ënnerstëtzt, wéi Internet Explorer 8 a fréier.
JavaScript Exit Intent Code Snippet
iwwerdeems mouseleave
schéngt op enger bestëmmter Div ze schaffen, Dir kënnt et och op eng ganz Websäit uwenden.
De Code erstellt eng nei div
Element genannt overlay
dat deckt déi ganz Säit an huet en semi-transparent schwaarzen Hannergrond (80% Opazitéit). Mir fügen dës Iwwerlagerung un d' Säit zesumme mam Popup div.
Wann de Benotzer d'Ausgangsabsicht ausléist andeems hien seng Maus ausserhalb vun der Säit bewegt, weisen mir souwuel de Popup wéi och den Iwwerlager. Dëst verhënnert datt de Benotzer soss anzwousch op der Säit klickt wann de Popup sichtbar ass.
Wann de Benotzer ausserhalb vum Popup oder op den Zoumaache Knäppchen klickt, verstoppe mir souwuel de Popup wéi och den Iwwerlager fir d'normale Funktionalitéit op d'Säit ze restauréieren.
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';
});
});
Fir maximal Browserkompatibilitéit géif ech recommandéieren jQuery ze benotzen fir dëst amplaz ëmzesetzen.
jQuery Exit Intent Code Snippet
Hei ass de jQuery Code Snippet, dee vill méi kompatibel ass mat all Browser (soulaang Dir jQuery op Ärer Säit enthält).
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();
});
});