Content MarketingEmail Marketing & Automatizace

Exit Intent Popup Code Snippet v JavaScriptu a jQuery

Jedním z projektů, na kterých pracuji pro tento web, je vyskakovací div s a CTA které povzbudí nové návštěvníky popsat Martech Zone emailem. Abych mohl, pracuji na dalším vývoji widgetize tato metoda pro WordPress a mít sekci výstupního záměru jako skutečný postranní panel... ale chtěl jsem sdílet funkci jQuery a ukázkový fragment kódu, který pomáhá ostatním vytvořit exit intention událost.

Co je Exit Intent?

Záměr ukončení je technika používaná weby ke sledování pohybu myši uživatele a zjištění, kdy se uživatel chystá opustit stránku. Když webová stránka zjistí, že uživatel odchází, může spustit vyskakovací okno nebo jiný typ zprávy, aby se pokusil udržet uživatele na stránce nebo jej přiměl, aby se vrátil později.

Ukončete technologii záměru používá JavaScript ke sledování pohybů myši a určení, kdy se uživatel chystá opustit stránku. Když webová stránka zjistí, že se uživatel chystá opustit, může zobrazit vyskakovací zprávu, nabídnout speciální nabídku nebo poskytnout jiný typ pobídky, která uživatele povzbudí, aby na stránce zůstal nebo se vrátil později.

Webové stránky elektronického obchodu často používají k zabránění záměr ukončení opuštění nákupního košíku nebo propagovat speciální nabídky a slevy zákazníkům, kteří se chystají opustit web. Mohou jej také používat webové stránky s obsahem k propagaci přihlášení k odběru newsletteru nebo k povzbuzení uživatelů, aby stránky sledovali na sociálních sítích.

Funkce mouseleave JavaScriptu

Abychom pochopili jak mouseleave funguje, je užitečné vědět, jak se obecně zachází s událostmi myši. Když najedete myší na webovou stránku, prohlížeč spustí sérii událostí, které lze zachytit a zpracovat pomocí kódu JavaScript. Tyto události zahrnují mousemove, mouseover, mouseout, mouseenter, a mouseleave.

Projekt mouseenter a mouseleave události jsou podobné jako mouseover a mouseout události, ale chovají se trochu jinak. Zatímco mouseover a mouseout spouštějí, když myš vstoupí nebo opustí prvek, spouštějí se také, když myš vstoupí nebo opustí jakékoli podřízené prvky v tomto prvku. To může vést k neočekávanému chování při práci s komplexem HTML struktury.

mouseenter a mouseleave Na druhou stranu události se spouštějí pouze tehdy, když myš vstoupí nebo opustí prvek, ke kterému je událost připojena, a nespustí se, když myš vstoupí nebo opustí jakékoli podřízené prvky. Díky tomu jsou v mnoha případech předvídatelnější a snáze se s nimi pracuje.

Projekt mouseleave událost je podporována většinou moderních prohlížečů, včetně Chrome, Firefox, Safari a Edge. Nemusí však být podporována některými staršími prohlížeči, jako je Internet Explorer 8 a starší.

JavaScript Exit Intent Code Snippet

Zatímco mouseleave Zdá se, že funguje na daném div, můžete jej také použít na celou webovou stránku.

Kód vytvoří nový div zvaný prvek overlay který pokrývá celou stránku a má poloprůhledné černé pozadí (80% neprůhlednost). Toto překrytí přidáme do stránku spolu s vyskakovacím oknem div.

Když uživatel spustí záměr opuštění přesunutím myši mimo stránku, zobrazí se vyskakovací okno i překryvná vrstva. To zabrání uživateli kliknout kamkoli jinam na stránku, když je vyskakovací okno viditelné.

Když uživatel klikne mimo vyskakovací okno nebo na tlačítko Zavřít, skryjeme vyskakovací okno i překryvnou vrstvu, abychom obnovili normální funkčnost 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';
    });
});

Pro maximální kompatibilitu prohlížeče bych však místo toho doporučil použít jQuery k implementaci.

jQuery Exit Intent Code Snippet

Zde je fragment kódu jQuery, který je mnohem kompatibilnější se všemi prohlížeči (pokud na svou stránku zahrnete 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 zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

Související články

Tlačítko Nahoru
zavřít

Byl detekován Adblock

Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.