Content MarketingEmail Marketing & Automatizácia

Ukončiť úryvok vyskakovacieho kódu zámeru v JavaScripte a jQuery

Jedným z projektov, na ktorých pre túto stránku pracujem, je vyskakovacie okno div s a CTA ktorý povzbudí nových návštevníkov prihlásiť sa na odber Martech Zone e-mailom. Je tu ďalší vývoj, na ktorom pracujem, aby som mohol widgetize táto metóda pre WordPress a aby bola sekcia zámeru ukončenia skutočným bočným panelom... chcel som však zdieľať funkciu jQuery a vzorový úryvok kódu, ktorý pomáha ostatným vytvoriť ukončiť zámer event.

Čo je zámer ukončenia?

Zámer ukončenia je technika, ktorú webové stránky používajú na sledovanie pohybu myši používateľa a na zistenie, kedy sa používateľ chystá opustiť stránku. Keď webová lokalita zistí, že používateľ odchádza, môže spustiť kontextové okno alebo iný typ správy, aby sa pokúsila udržať používateľa na stránke alebo ho prinútiť, aby sa vrátil neskôr.

Technológia ukončenia zámeru používa JavaScript na sledovanie pohybov myši a určenie, kedy sa používateľ chystá opustiť stránku. Keď webová lokalita zistí, že sa používateľ chystá odísť, môže zobraziť vyskakovacie hlásenie, ponúknuť špeciálnu ponuku alebo poskytnúť iný typ stimulu, ktorý povzbudí používateľa, aby zostal na stránke alebo sa vrátil neskôr.

Webové stránky elektronického obchodu často používajú na zabránenie zámeru ukončenia opustenie nákupného košíka alebo propagovať špeciálne ponuky a zľavy zákazníkom, ktorí sa chystajú opustiť stránku. Môžu ho použiť aj webové stránky s obsahom na propagáciu prihlásenia sa na odber bulletinu alebo na povzbudenie používateľov, aby stránku sledovali na sociálnych médiách.

Funkcia mouseleave JavaScriptu

Aby sme pochopili ako mouseleave funguje, je užitočné vedieť, ako sa vo všeobecnosti spracovávajú udalosti myši. Keď prejdete myšou na webovú stránku, prehliadač spustí sériu udalostí, ktoré je možné zachytiť a spracovať pomocou kódu JavaScript. Tieto udalosti zahŕňajú mousemove, mouseover, mouseout, mouseentera mouseleave.

mouseenter a mouseleave udalosti sú podobné mouseover a mouseout udalosti, ale správajú sa trochu inak. Zatiaľ čo mouseover a mouseout spúšťajú sa, keď myš vstúpi alebo opustí prvok, spustia sa aj vtedy, keď myš vstúpi alebo opustí akékoľvek podradené prvky v rámci tohto prvku. To môže viesť k neočakávanému správaniu pri práci s komplexom HTML štruktúry.

mouseenter a mouseleave Na druhej strane udalosti sa spúšťajú iba vtedy, keď myš vstúpi alebo opustí prvok, ku ktorému je udalosť pripojená, a nespúšťajú sa, keď myš vstúpi alebo opustí akékoľvek podradené prvky. Vďaka tomu sú v mnohých prípadoch predvídateľnejšie a ľahšie sa s nimi pracuje.

mouseleave udalosť je podporovaná väčšinou moderných prehliadačov vrátane Chrome, Firefox, Safari a Edge. Niektoré staršie prehliadače, ako napríklad Internet Explorer 8 a staršie, ho však nemusia podporovať.

Úryvok kódu ukončenia JavaScriptu

Zatiaľ čo mouseleave Zdá sa, že funguje na danom div, môžete ho použiť aj na celú webovú stránku.

Kód vytvorí nový div prvok tzv overlay ktorý pokrýva celú stranu a má polopriehľadné čierne pozadie (80% nepriehľadnosť). Toto prekrytie pridáme do stránku spolu s kontextovým oknom div.

Keď používateľ spustí zámer ukončenia pohybom myši mimo stránku, zobrazí sa kontextové okno aj prekrytie. To zabraňuje používateľovi kliknúť kdekoľvek inde na stránke, kým je kontextové okno viditeľné.

Keď používateľ klikne mimo kontextového okna alebo na tlačidlo zatvorenia, skryjeme kontextové okno aj prekrytie, aby sme obnovili normálnu funkčnosť stránky.

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

Pre maximálnu kompatibilitu prehliadača by som však namiesto toho odporučil použiť jQuery.

jQuery Exit Intent Code Snippet

Tu je útržok kódu jQuery, ktorý je oveľa kompatibilnejší so všetkými prehliadačmi (pokiaľ na svoju stránku zahrniete jQuery).

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 je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.