Marketing de ContenuMarketing par e-mail et automatisation

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, mouseenteret 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('&times;');

    // 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();
    });
});

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.