One of many initiatives that I’m engaged on for this website is having a popup div with a CTA that encourages new guests to subscribe to Martech Zone by e mail. There’s further improvement I’m engaged on in order that I can widgetize this methodology for WordPress and have the exit intent part be an precise sidebar… however I did wish to share the jQuery operate and instance code snippet that helps others to create an exit intent occasion.
What’s Exit Intent?
Exit intent is a method utilized by web sites to trace a person’s mouse motion and detect when the person is about to go away the web page. When the web site detects that the person is leaving, it might set off a popup or different kind of message to attempt to maintain the person on the web page or entice them to return later.
Exit intent expertise makes use of JavaScript to trace mouse actions and decide when a person is about to go away a web page. When the web site detects that the person is about to go away, it might show a popup message, provide a particular deal, or present another kind of incentive to encourage the person to remain on the web page or return later.
Exit intent is commonly utilized by e-commerce web sites to attempt to stop purchasing cart abandonment or to advertise particular offers and reductions to clients who’re about to go away the positioning. It will also be utilized by content material web sites to advertise e-newsletter signups or to encourage customers to observe the positioning on social media.
JavaScript’s mouseleave operate
To be able to perceive how mouseleave works, it’s useful to know the way mouse occasions are dealt with typically. While you transfer your mouse over an internet web page, a collection of occasions are triggered by the browser, which may be captured and dealt with by JavaScript code. These occasions embrace mousemove, mouseover, mouseout, mouseenter, and mouseleave.
The mouseenter and mouseleave occasions are just like the mouseover and mouseout occasions, however they behave barely in another way. Whereas mouseover and mouseout set off when the mouse enters or leaves a component, respectively, additionally they set off when the mouse enters or leaves any baby parts inside that component. This will result in sudden habits when working with advanced HTML buildings.
mouseenter and mouseleave occasions, then again, solely set off when the mouse enters or leaves the component that the occasion is connected to, and don’t set off when the mouse enters or leaves any baby parts. This makes them extra predictable and simpler to work with in lots of circumstances.
The mouseleave occasion is supported by most fashionable browsers, together with Chrome, Firefox, Safari, and Edge. Nevertheless, it is probably not supported by some older browsers, equivalent to Web Explorer 8 and earlier.
JavaScript Exit Intent Code Snippet
Whereas mouseleave seems to work on a given div, it’s also possible to apply it to a complete internet web page.
The code creates a brand new div component known as overlay that covers your entire web page and has a semi-transparent black background (80% opacity). We add this overlay to the web page together with the popup div.
When the person triggers the exit intent by shifting their mouse outdoors of the web page, we present each the popup and the overlay. This prevents the person from clicking anyplace else on the web page whereas the popup is seen.
When the person clicks outdoors of the popup or on the shut button, we conceal each the popup and the overlay to revive regular performance to the web page.
doc.addEventListener('DOMContentLoaded', operate() {
// Create a div component with the specified dimensions and styling
var popup = doc.createElement('div');
popup.fashion.place = 'fastened';
popup.fashion.prime = '50%';
popup.fashion.left = '50%';
popup.fashion.remodel = 'translate(-50%, -50%)';
popup.fashion.backgroundColor = '#fff';
popup.fashion.border = '1px stable #ccc';
popup.fashion.width = '1200px';
popup.fashion.top = '630px';
popup.fashion.padding = '20px';
// Create an in depth button component with the specified styling
var closeButton = doc.createElement('span');
closeButton.fashion.place = 'absolute';
closeButton.fashion.prime = '10px';
closeButton.fashion.proper = '10px';
closeButton.fashion.fontSize = '24px';
closeButton.fashion.cursor = 'pointer';
closeButton.innerHTML = '&instances;';
// Add the shut button to the popup div
popup.appendChild(closeButton);
// Create an overlay div with the specified styling
var overlay = doc.createElement('div');
overlay.fashion.place = 'fastened';
overlay.fashion.prime = '0';
overlay.fashion.left = '0';
overlay.fashion.width = '100%';
overlay.fashion.top = '100%';
overlay.fashion.backgroundColor = 'rgba(0, 0, 0, 0.8)';
overlay.fashion.zIndex = '999';
// Add the overlay and popup to the web page
doc.physique.appendChild(overlay);
doc.physique.appendChild(popup);
// Conceal the popup and overlay initially
popup.fashion.show = 'none';
overlay.fashion.show = 'none';
// Present the popup and overlay when the person tries to go away the web page
doc.addEventListener('mouseleave', operate(e) {
if (e.clientY < 0) {
popup.fashion.show = 'block';
overlay.fashion.show = 'block';
}
});
// Conceal the popup and overlay when the person clicks outdoors of it
doc.addEventListener('click on', operate(e) {
if (!popup.incorporates(e.goal)) {
popup.fashion.show = 'none';
overlay.fashion.show = 'none';
}
});
// Conceal the popup and overlay when the shut button is clicked
closeButton.addEventListener('click on', operate() {
popup.fashion.show = 'none';
overlay.fashion.show = 'none';
});
});
For optimum browser compatibility, I’d suggest utilizing jQuery to implement this as a substitute, although.
jQuery Exit Intent Code Snippet
Right here’s the jQuery code snippet, which is much extra appropriate with all browsers (so long as you’re together with jQuery in your web page).
jQuery(doc).prepared(operate() {
// Create a div component with the specified dimensions and styling
var popup = jQuery('<div></div>').css({
'place': 'fastened',
'prime': '50%',
'left': '50%',
'remodel': 'translate(-50%, -50%)',
'background-color': '#fff',
'border': '1px stable #ccc',
'width': '1200px',
'top': '630px',
'padding': '20px'
});
// Create an in depth button component with the specified styling
var closeButton = jQuery('<span></span>').css({
'place': 'absolute',
'prime': '10px',
'proper': '10px',
'font-size': '24px',
'cursor': 'pointer'
}).html('&instances;');
// Add the shut button to the popup div
popup.append(closeButton);
// Create an overlay div with the specified styling
var overlay = jQuery('<div></div>').css({
'place': 'fastened',
'prime': '0',
'left': '0',
'width': '100%',
'top': '100%',
'background-color': 'rgba(0, 0, 0, 0.8)',
'z-index': '999'
});
// Add the overlay and popup to the web page
jQuery('physique').append(overlay, popup);
// Conceal the popup and overlay initially
popup.conceal();
overlay.conceal();
// Present the popup and overlay when the person tries to go away the web page
jQuery(doc).on('mouseleave', operate(e) {
if (e.clientY < 0) {
popup.present();
overlay.present();
}
});
// Conceal the popup and overlay when the person clicks outdoors of it
jQuery(doc).on('click on', operate(e) {
if (!jQuery(e.goal).closest(popup).size) {
popup.conceal();
overlay.conceal();
}
});
// Conceal the popup and overlay when the shut button is clicked
closeButton.on('click on', operate() {
popup.conceal();
overlay.conceal();
});
});
