Садржај маркетингМаркетинг и аутоматизација е-поште

Исечак искачућег кода намере за излаз у ЈаваСцрипт-у и јКуери-ју

Један од пројеката на којима радим за ову локацију је да имам искачући див са а ЦТА што подстиче нове посетиоце да пријави се на Martech Zone путем е-поште. Радим на додатном развоју да бих могао видгетизе овај метод за WordPress и нека одељак намере излаза буде стварна бочна трака... али желео сам да поделим јКуери функцију и пример исечка кода који помаже другима да креирају излазна намера догађај.

Шта је намера излаза?

Намера изласка је техника коју веб-сајтови користе за праћење кретања миша корисника и откривање када ће корисник напустити страницу. Када веб локација открије да корисник одлази, може да покрене искачући прозор или другу врсту поруке како би покушала да задржи корисника на страници или да га подстакне да се врати касније.

Излаз из технологије намере користи ЈаваСцрипт за праћење кретања миша и одређивање када ће корисник напустити страницу. Када веб локација открије да ће корисник напустити, може приказати искачућу поруку, понудити посебну понуду или пружити неку другу врсту подстицаја да подстакне корисника да остане на страници или се врати касније.

Веб локације за е-трговину често користе намеру изласка да би спречиле напуштање колица за куповину или да промовишемо посебне понуде и попусте за купце који ће напустити сајт. Такође га могу користити веб локације са садржајем за промоцију пријава за билтен или за подстицање корисника да прате сајт на друштвеним медијима.

ЈаваСцрипт-ова функција моуселеаве

Да бисмо разумели како mouseleave функционише, корисно је знати како се уопште обрађују догађаји миша. Када пређете мишем преко веб странице, претраживач покреће низ догађаја, који се могу ухватити и њима управљати помоћу ЈаваСцрипт кода. Ови догађаји укључују mousemove, mouseover, mouseout, mouseenter, и mouseleave.

mouseenter mouseleave догађаји су слични mouseover mouseout догађаја, али се понашају мало другачије. Док mouseover mouseout активирају се када миш уђе или напусти елемент, односно, такође се активирају када миш уђе или напусти било који подређени елемент унутар тог елемента. Ово може довести до неочекиваног понашања при раду са комплексом ХТМЛ- структуре.

mouseenter mouseleave догађаји се, с друге стране, покрећу само када миш уђе или напусти елемент за који је догађај повезан, и не покрећу се када миш уђе или напусти било који подређени елемент. То их чини предвидљивијим и лакшим за рад у многим случајевима.

mouseleave догађај подржава већина модерних претраживача, укључујући Цхроме, Фирефок, Сафари и Едге. Међутим, можда га не подржавају неки старији прегледачи, као што је Интернет Екплорер 8 и старији.

Исечак кода намере за излаз из ЈаваСцрипт-а

Док mouseleave изгледа да ради на датом див, можете га применити и на целу веб страницу.

Код креира нови div елемент тзв overlay која покрива целу страницу и има полупровидну црну позадину (прозирност од 80%). Ово преклапање додајемо на страницу заједно са искачућим прозором див.

Када корисник покрене намеру излаза померањем миша ван странице, приказујемо искачући прозор и преклапање. Ово спречава корисника да кликне било где на страници док је искачући прозор видљив.

Када корисник кликне ван искачућег прозора или на дугме за затварање, сакривамо и искачући прозор и преклапање да бисмо вратили нормалну функционалност странице.

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

За максималну компатибилност претраживача, ипак бих препоручио да користите јКуери за имплементацију овога.

јКуери излазни исјечак кода

Ево исечка јКуери кода, који је далеко компатибилнији са свим претраживачима (све док укључите јКуери на своју страницу).

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 је ЦМО оф ОпенИНСИГХТС и оснивача Martech Zone. Доуглас је помогао десетинама успешних МарТецх стартапова, помогао је у дубинској пажњи од преко 5 милијарди долара у Мартецх аквизицијама и инвестицијама, и наставља да помаже компанијама у имплементацији и аутоматизацији њихових продајних и маркетиншких стратегија. Доуглас је међународно признати стручњак за дигиталну трансформацију и МарТецх стручњак и говорник. Даглас је такође објављени аутор Думмие'с водича и књиге о пословном лидерству.

Повезани чланци

Назад на врх дугмета
близу

Адблоцк откривен

Martech Zone је у могућности да вам пружи овај садржај без икаквих трошкова јер ми монетизујемо наш сајт путем прихода од огласа, партнерских веза и спонзорстава. Били бисмо захвални ако бисте уклонили свој блокатор огласа док гледате наш сајт.