Content MarketingE-Mail-Marketing & Automatisierung

Exit-Intent-Popup-Code-Snippet in JavaScript und jQuery

Eines der Projekte, an denen ich für diese Site arbeite, hat ein Popup-Div mit a CTA das ermutigt neue Besucher zu etwas abonnieren Martech Zone per Email. Es gibt zusätzliche Entwicklungen, an denen ich arbeite, damit ich das kann Widgets diese Methode für WordPress und lassen Sie den Exit Intent-Abschnitt eine echte Seitenleiste sein … aber ich wollte die jQuery-Funktion und das Beispiel-Code-Snippet teilen, das anderen hilft, eine zu erstellen Ausfahrt Absicht Ereignis.

Was ist Exit-Intent?

Exit Intent ist eine Technik, die von Websites verwendet wird, um die Mausbewegung eines Benutzers zu verfolgen und zu erkennen, wann der Benutzer im Begriff ist, die Seite zu verlassen. Wenn die Website erkennt, dass der Benutzer die Seite verlässt, kann sie ein Popup oder eine andere Art von Nachricht auslösen, um zu versuchen, den Benutzer auf der Seite zu halten oder ihn dazu zu verleiten, später zurückzukehren.

Exit-Intent-Technologie verwendet JavaScript, um Mausbewegungen zu verfolgen und festzustellen, wann ein Benutzer dabei ist, eine Seite zu verlassen. Wenn die Website erkennt, dass der Benutzer im Begriff ist, die Seite zu verlassen, kann sie eine Popup-Nachricht anzeigen, ein Sonderangebot anbieten oder eine andere Art von Anreiz bieten, um den Benutzer zu ermutigen, auf der Seite zu bleiben oder später zurückzukehren.

Exit-Intent wird häufig von E-Commerce-Websites verwendet, um zu versuchen, dies zu verhindern Einkaufswagenaufgabe oder um Sonderangebote und Rabatte für Kunden zu bewerben, die im Begriff sind, die Website zu verlassen. Es kann auch von Content-Websites verwendet werden, um Newsletter-Anmeldungen zu fördern oder Benutzer zu ermutigen, der Website in sozialen Medien zu folgen.

Die Mouseleave-Funktion von JavaScript

Um zu verstehen wie mouseleave funktioniert, ist es hilfreich zu wissen, wie Mausereignisse im Allgemeinen behandelt werden. Wenn Sie Ihre Maus über eine Webseite bewegen, wird vom Browser eine Reihe von Ereignissen ausgelöst, die von JavaScript-Code erfasst und verarbeitet werden können. Zu diesen Veranstaltungen gehören mousemove, mouseover, mouseout, mouseenter und mouseleave.

Das mouseenter und mouseleave Veranstaltungen sind ähnlich wie die mouseover und mouseout Ereignisse, aber sie verhalten sich etwas anders. Während mouseover und mouseout werden ausgelöst, wenn die Maus ein Element betritt oder verlässt, sie werden auch ausgelöst, wenn die Maus untergeordnete Elemente innerhalb dieses Elements betritt oder verlässt. Dies kann bei der Arbeit mit Komplexen zu unerwartetem Verhalten führen HTML Strukturen.

mouseenter und mouseleave Ereignisse hingegen werden nur ausgelöst, wenn die Maus das Element betritt oder verlässt, an das das Ereignis angehängt ist, und werden nicht ausgelöst, wenn die Maus ein untergeordnetes Element betritt oder verlässt. Dies macht sie in vielen Fällen vorhersehbarer und einfacher zu handhaben.

Das mouseleave event wird von den meisten modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Es wird jedoch möglicherweise von einigen älteren Browsern wie Internet Explorer 8 und früher nicht unterstützt.

JavaScript-Exit-Intent-Code-Snippet

Während mouseleave auf einem bestimmten div zu funktionieren scheint, können Sie es auch auf eine ganze Webseite anwenden.

Der Code erstellt eine neue div Element namens overlay das die gesamte Seite bedeckt und einen halbtransparenten schwarzen Hintergrund hat (80 % Deckkraft). Wir fügen dieses Overlay dem hinzu Seite zusammen mit dem Popup Div.

Wenn der Benutzer die Exit-Intent auslöst, indem er seine Maus außerhalb der Seite bewegt, zeigen wir sowohl das Popup als auch das Overlay. Dadurch wird verhindert, dass der Benutzer auf eine andere Stelle auf der Seite klickt, während das Popup sichtbar ist.

Wenn der Benutzer außerhalb des Popups oder auf die Schließen-Schaltfläche klickt, blenden wir sowohl das Popup als auch das Overlay aus, um die normale Funktionalität der Seite wiederherzustellen.

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';
    });
});

Für maximale Browserkompatibilität würde ich jedoch empfehlen, stattdessen jQuery zu verwenden, um dies zu implementieren.

jQuery-Exit-Intent-Code-Snippet

Hier ist das jQuery-Code-Snippet, das weitaus besser mit allen Browsern kompatibel ist (solange Sie jQuery in Ihre Seite einfügen).

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 ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.