Inhalt MarketingE-Mail Marketing & Automatioun

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('&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 ass CMO vun OpenINSIGHTS an de Grënner vun der Martech Zone. Den Douglas huet Dosende vun erfollegräiche MarTech Startups gehollef, huet an der Due Diligence vun iwwer $ 5 Bill bei Martech Acquisitioune an Investitiounen gehollef, a weider fir Firmen ze hëllefen fir hir Verkafs- a Marketingstrategien ëmzesetzen an ze automatiséieren. Den Douglas ass en international unerkannten digitale Transformatioun a MarTech Expert a Spriecher. Den Douglas ass och e publizéierten Auteur vun engem Dummie's Guide an e Business Leadership Buch.

Verbonnen Artikelen

Zréck erop zum Knäppchen
Zoumaachen

Adblock entdeckt

Martech Zone ass fäeg Iech dësen Inhalt ouni Käschten ze liwweren, well mir eise Site monetiséieren duerch Ad-Recetten, Partnerlinks a Sponsoren. Mir géifen appreciéieren wann Dir Är Annonce Blocker ewechzehuelen géif wéi Dir eise Site Vue.