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