Exit Intent Popup Code Snippet en JavaScript et jQuery
L'un des projets sur lesquels je travaille pour ce site est d'avoir une div contextuelle avec un CTA qui encourage les nouveaux visiteurs à s'abonner à Martech Zone par email. Il y a un développement supplémentaire sur lequel je travaille afin que je puisse widgetiser cette méthode pour Outils de gestion et que la section d'intention de sortie soit une véritable barre latérale… mais je voulais partager la fonction jQuery et un exemple d'extrait de code qui aide les autres à créer un intention de sortie un événement.
Qu'est-ce que l'intention de sortie ?
L'intention de sortie est une technique utilisée par les sites Web pour suivre le mouvement de la souris d'un utilisateur et détecter le moment où l'utilisateur est sur le point de quitter la page. Lorsque le site Web détecte que l'utilisateur part, il peut déclencher une fenêtre contextuelle ou un autre type de message pour essayer de garder l'utilisateur sur la page ou l'inciter à revenir plus tard.
Technologie d'intention de sortie utilise JavaScript pour suivre les mouvements de la souris et déterminer quand un utilisateur est sur le point de quitter une page. Lorsque le site Web détecte que l'utilisateur est sur le point de partir, il peut afficher un message contextuel, proposer une offre spéciale ou fournir un autre type d'incitation pour encourager l'utilisateur à rester sur la page ou à revenir plus tard.
L'intention de sortie est souvent utilisée par les sites Web de commerce électronique pour tenter d'empêcher abandon de panier ou pour promouvoir des offres spéciales et des remises aux clients qui sont sur le point de quitter le site. Il peut également être utilisé par les sites Web de contenu pour promouvoir les inscriptions à la newsletter ou pour encourager les utilisateurs à suivre le site sur les réseaux sociaux.
La fonction mouseleave de JavaScript
Afin de comprendre comment mouseleave
fonctionne, il est utile de savoir comment les événements de souris sont gérés en général. Lorsque vous déplacez votre souris sur une page Web, une série d'événements sont déclenchés par le navigateur, qui peuvent être capturés et gérés par du code JavaScript. Ces événements comprennent mousemove
, mouseover
, mouseout
, mouseenter
et mouseleave
.
La mouseenter
et mouseleave
les événements ressemblent à mouseover
et mouseout
événements, mais ils se comportent légèrement différemment. Alors que mouseover
et mouseout
se déclenchent respectivement lorsque la souris entre ou sort d'un élément, ils se déclenchent également lorsque la souris entre ou sort d'un élément enfant de cet élément. Cela peut entraîner un comportement inattendu lorsque vous travaillez avec des HTML structures.
mouseenter
et mouseleave
les événements, en revanche, ne se déclenchent que lorsque la souris entre ou quitte l'élément auquel l'événement est attaché, et ne se déclenchent pas lorsque la souris entre ou quitte un élément enfant. Cela les rend plus prévisibles et plus faciles à utiliser dans de nombreux cas.
La mouseleave
est pris en charge par la plupart des navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, il peut ne pas être pris en charge par certains navigateurs plus anciens, tels qu'Internet Explorer 8 et versions antérieures.
Extrait de code d'intention de sortie JavaScript
Tandis que mouseleave
semble fonctionner sur une div donnée, vous pouvez également l'appliquer à une page Web entière.
Le code crée un nouveau div
élément appelé overlay
qui couvre toute la page et a un fond noir semi-transparent (80% d'opacité). Nous ajoutons cette superposition à la page avec le popup div.
Lorsque l'utilisateur déclenche l'intention de sortie en déplaçant sa souris en dehors de la page, nous affichons à la fois la fenêtre contextuelle et la superposition. Cela empêche l'utilisateur de cliquer n'importe où ailleurs sur la page pendant que la fenêtre contextuelle est visible.
Lorsque l'utilisateur clique en dehors de la fenêtre contextuelle ou sur le bouton de fermeture, nous masquons à la fois la fenêtre contextuelle et la superposition pour restaurer la fonctionnalité normale de la 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';
});
});
Pour une compatibilité maximale du navigateur, je vous recommande cependant d'utiliser jQuery pour l'implémenter à la place.
Extrait de code d'intention de sortie jQuery
Voici l'extrait de code jQuery, qui est beaucoup plus compatible avec tous les navigateurs (tant que vous incluez jQuery dans votre page).
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();
});
});