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