Edukia MarketingPosta elektronikoko marketina eta automatizazioa

Irten Intent Popup Code Snippet JavaScript eta jQuery-n

Gune honetarako lantzen ari naizen proiektuetako bat popup div bat izatea da CTA horrek bisitari berriak animatzen ditu harpidetu Martech Zone posta elektronikoz. Lantzen ari naizen garapen gehigarria dago ahal izateko widgetize metodo hau WordPress eta irteera-asmoaren atala benetako alboko barra izan dadila... baina besteei bat sortzen laguntzen dien jQuery funtzioa eta adibideko kode zatia partekatu nahi nituen. irteera intentzioa Gertaera.

Zer da Irteera Asmoa?

Irteteko asmoa webguneek erabiltzailearen saguaren mugimendua jarraitzeko eta erabiltzailea orritik irtetekotan dagoen detektatzeko erabiltzen duten teknika da. Webguneak erabiltzailea irteten ari dela detektatzen duenean, popup bat edo beste mezu mota bat abiarazi dezake erabiltzailea orrialdean mantentzen saiatzeko edo geroago itzultzera erakartzeko.

Irteteko asmoa teknologia JavaScript erabiltzen du saguaren mugimenduak jarraitzeko eta erabiltzaile bat orri bat noiz irtetekotan dagoen zehazteko. Webguneak erabiltzailea irteteko zorian dagoela hautematen duenean, laster-mezu bat bistara dezake, eskaintza berezi bat eskaini edo beste pizgarri motaren bat eman dezake erabiltzailea orrialdean jarraitzera edo geroago itzultzera animatzeko.

Irteera-asmoa sarritan erabiltzen dute merkataritza elektronikoko webguneek prebenitzen saiatzeko erosketa saskiaren abandonua edo gunetik uztear dauden bezeroei eskaintza eta deskontu bereziak sustatzeko. Edukien webguneek buletinen izenak sustatzeko edo erabiltzaileak sare sozialetan webgunea jarraitzera bultzatzeko ere erabil dezakete.

JavaScript-en mouseleave funtzioa

Nola ulertzeko mouseleave funtzionatzen du, lagungarria da saguaren gertaerak orokorrean nola kudeatzen diren jakitea. Sagua web-orri baten gainetik mugitzen duzunean, arakatzaileak gertaera batzuk abiarazten ditu, JavaScript kodearen bidez atzeman eta kudea ditzake. Ekitaldi horien artean daude mousemove, mouseover, mouseout, mouseenter, eta mouseleave.

The mouseenter mouseleave gertaerak antzekoak dira mouseover mouseout gertaerak, baina portaera apur bat ezberdina dute. Bitartean mouseover mouseout sagua elementu batean sartzen edo irteten denean, hurrenez hurren, abiarazten dira, sagua elementu horren barruan edozein elementu seme-alaba sartzen edo irteten denean ere abiarazten dute. Horrek ustekabeko portaera ekar dezake konplexuekin lan egitean HTML egiturak.

mouseenter mouseleave gertaerak, berriz, sagua gertaera erantsita dagoen elementuan sartzen edo irteten denean soilik abiarazten dira, eta ez dira abiarazten sagua edozein elementu ume sartzen edo irteten denean. Horrek aurreikusgarriagoak eta errazagoak egiten ditu lan egiteko kasu askotan.

The mouseleave gertaera arakatzaile moderno gehienek onartzen dute, besteak beste, Chrome, Firefox, Safari eta Edge. Hala ere, baliteke arakatzaile zahar batzuek ez izatea, hala nola, Internet Explorer 8 eta lehenagokoak.

JavaScript Irteteko asmoaren kodearen zatia

Bitartean mouseleave div jakin batean funtzionatzen duela dirudi, web orri oso batean ere aplika dezakezu.

Kodeak berri bat sortzen du div izeneko elementua overlay orrialde osoa hartzen duena eta hondo beltz erdi gardena duena (%80ko opakutasuna). Gainjarri hau gehitzen diogu orrialdea pop-uparekin batera div.

Erabiltzaileak irteera-asmoa abiarazten duenean sagua orritik kanpo mugituz, popup-a eta gainjartzea erakusten dugu. Honek erabiltzaileak orrialdeko beste edozein tokitan klik egitea eragozten du popup-a ikusgai dagoen bitartean.

Erabiltzaileak pop-upetik kanpo edo ixteko botoian klik egiten duenean, popup-a eta gainjartzea ezkutatzen ditugu orrialdearen funtzionaltasun normala berreskuratzeko.

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

Arakatzaileen bateragarritasun handiena lortzeko, hau ezartzeko jQuery erabiltzea gomendatuko nuke, ordea.

jQuery Irteteko asmoaren kodearen zatia

Hona hemen jQuery kode zatia, arakatzaile guztiekin bateragarriagoa dena (betiere jQuery zure orrian sartzen baduzu).

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 -ren CMO da OpenINSIGHTS eta ren sortzailea Martech Zone. Douglasek MarTech startup arrakastatsu batzuei lagundu die, Martech-en erosketetan eta inbertsioetan 5 milioi dolar baino gehiagoko diligentzian lagundu du eta enpresei laguntzen jarraitzen du salmenta eta marketin estrategiak ezartzen eta automatizatzen. Douglas nazioartean ezaguna den eraldaketa digitala eta MarTech aditua eta hizlaria da. Douglas Dummie's gidaren eta negozioen lidergoaren liburu baten egilea ere bada.

Gaiarekin lotutako artikuluak

Itzuli gora botoia
Itxi

Adblokea hauteman da

Martech Zone eduki hau kosturik gabe eskaintzeko gai da, gure webgunea iragarkien diru-sarreren, kideen esteken eta babesen bidez dirua irabazten dugulako. Eskertuko genuke gure gunea ikusten duzun bitartean iragarkien blokeatzailea kentzea.