सामग्री विपणनईमेल विपणन आणि ऑटोमेशन

JavaScript आणि jQuery मध्ये इंटेंट पॉपअप कोड स्निपेटमधून बाहेर पडा

मी या साइटसाठी काम करत असलेल्या प्रकल्पांपैकी एक पॉपअप डिव्ह आहे CTA जे नवीन अभ्यागतांना प्रोत्साहन देते सदस्यता घ्या Martech Zone ईमेलद्वारे. तेथे अतिरिक्त विकास आहे ज्यावर मी काम करत आहे जेणेकरून मी करू शकेन विजेट करणे साठी ही पद्धत वर्डप्रेस आणि एक्झिट इंटेंट विभाग हा एक वास्तविक साइडबार असावा… पण मला jQuery फंक्शन आणि उदाहरण कोड स्निपेट सामायिक करायचे होते जे इतरांना तयार करण्यात मदत करते. निर्गमन हेतू कार्यक्रम

बाहेर पडण्याचा हेतू काय आहे?

एक्झिट इंटेंट हे वापरकर्त्याच्या माउसच्या हालचालीचा मागोवा घेण्यासाठी आणि वापरकर्ता पेज कधी सोडणार आहे हे शोधण्यासाठी वेबसाइट्सद्वारे वापरले जाणारे तंत्र आहे. जेव्हा वेबसाइटला वापरकर्ता सोडत असल्याचे आढळून येते, तेव्हा ती वापरकर्त्याला पृष्ठावर ठेवण्याचा प्रयत्न करण्यासाठी किंवा नंतर परत येण्यास प्रवृत्त करण्यासाठी पॉपअप किंवा अन्य प्रकारचा संदेश ट्रिगर करू शकते.

हेतू तंत्रज्ञानातून बाहेर पडा माऊसच्या हालचालींचा मागोवा घेण्यासाठी आणि वापरकर्ता एखादे पृष्ठ कधी सोडणार आहे हे निर्धारित करण्यासाठी JavaScript वापरतो. जेव्हा वेबसाइटला असे आढळते की वापरकर्ता निघणार आहे, तेव्हा ती एक पॉपअप संदेश प्रदर्शित करू शकते, विशेष डील देऊ शकते किंवा वापरकर्त्याला पृष्ठावर राहण्यासाठी किंवा नंतर परत येण्यास प्रोत्साहित करण्यासाठी काही अन्य प्रकारचे प्रोत्साहन देऊ शकते.

प्रतिबंध करण्याचा प्रयत्न करण्यासाठी ई-कॉमर्स वेबसाइट्सद्वारे बाहेर पडण्याचा हेतू सहसा वापरला जातो शॉपिंग कार्ट परोपकार किंवा साइट सोडणार असलेल्या ग्राहकांना विशेष सौदे आणि सवलतींचा प्रचार करण्यासाठी. वृत्तपत्र साइनअपचा प्रचार करण्यासाठी किंवा वापरकर्त्यांना सोशल मीडियावर साइटचे अनुसरण करण्यास प्रोत्साहित करण्यासाठी सामग्री वेबसाइटद्वारे देखील याचा वापर केला जाऊ शकतो.

JavaScript चे mouseleave फंक्शन

कसे समजून घेण्यासाठी mouseleave कार्य करते, सर्वसाधारणपणे माउस इव्हेंट कसे हाताळले जातात हे जाणून घेणे उपयुक्त आहे. जेव्हा तुम्ही तुमचा माऊस वेब पेजवर हलवता, तेव्हा ब्राउझरद्वारे इव्हेंटची मालिका ट्रिगर केली जाते, ज्या JavaScript कोडद्वारे कॅप्चर आणि हाताळल्या जाऊ शकतात. या घटनांचा समावेश आहे mousemove, mouseover, mouseout, mouseenterआणि mouseleave.

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना mouseenter आणि mouseleave घटना सारख्याच आहेत mouseover आणि mouseout घटना, पण ते थोडे वेगळे वागतात. असताना mouseover आणि mouseout जेव्हा माउस एखादे घटक प्रवेश करतो किंवा सोडतो तेव्हा ट्रिगर करतो, जेव्हा माउस त्या घटकामध्ये प्रवेश करतो किंवा सोडतो तेव्हा ते देखील ट्रिगर करतात. कॉम्प्लेक्ससह काम करताना यामुळे अनपेक्षित वर्तन होऊ शकते HTML संरचना.

mouseenter आणि mouseleave इव्हेंट्स, दुसरीकडे, जेव्हा इव्हेंट संलग्न आहे त्या घटकामध्ये माउस प्रवेश करतो किंवा सोडतो तेव्हाच ट्रिगर होतो आणि जेव्हा माउस कोणत्याही लहान घटकांमध्ये प्रवेश करतो किंवा सोडतो तेव्हा ट्रिगर करू नका. हे त्यांना अधिक अंदाज करण्यायोग्य आणि बर्‍याच प्रकरणांमध्ये कार्य करणे सोपे करते.

अगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना mouseleave इव्हेंटला Chrome, Firefox, Safari आणि Edge यासह बर्‍याच आधुनिक ब्राउझरद्वारे समर्थित आहे. तथापि, हे इंटरनेट एक्सप्लोरर 8 आणि पूर्वीच्या काही जुन्या ब्राउझरद्वारे समर्थित असू शकत नाही.

JavaScript एक्झिट इंटेंट कोड स्निपेट

तर mouseleave दिलेल्या div वर कार्य करत असल्याचे दिसते, तुम्ही ते संपूर्ण वेब पेजवर देखील लागू करू शकता.

कोड नवीन तयार करतो div घटक म्हणतात overlay जे संपूर्ण पृष्ठ व्यापते आणि अर्ध-पारदर्शक काळी पार्श्वभूमी (80% अपारदर्शकता) असते. आम्ही हे आच्छादन मध्ये जोडतो पॉपअपसह पृष्ठ Div

जेव्हा वापरकर्ता त्याचा माउस पृष्ठाच्या बाहेर हलवून बाहेर पडण्याचा हेतू ट्रिगर करतो, तेव्हा आम्ही पॉपअप आणि आच्छादन दोन्ही दाखवतो. हे वापरकर्त्याला पॉपअप दृश्यमान असताना पृष्ठावरील इतर कोठेही क्लिक करण्यापासून प्रतिबंधित करते.

जेव्हा वापरकर्ता पॉपअपच्या बाहेर किंवा क्लोज बटणावर क्लिक करतो, तेव्हा आम्ही पृष्ठावर सामान्य कार्यक्षमता पुनर्संचयित करण्यासाठी पॉपअप आणि आच्छादन दोन्ही लपवतो.

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 वापरण्याची शिफारस करतो.

jQuery एक्झिट इंटेंट कोड स्निपेट

येथे jQuery कोड स्निपेट आहे, जो सर्व ब्राउझरशी अधिक सुसंगत आहे (जोपर्यंत तुम्ही तुमच्या पेजमध्ये 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 चे CMO आहे ओपनइनसाइट्स आणि चे संस्थापक Martech Zone. डग्लसने डझनभर यशस्वी MarTech स्टार्टअप्सना मदत केली आहे, Martech अधिग्रहण आणि गुंतवणुकीमध्ये $5 बिलियन पेक्षा जास्त योग्य परिश्रमात मदत केली आहे आणि कंपन्यांना त्यांच्या विक्री आणि विपणन धोरणांची अंमलबजावणी आणि स्वयंचलित करण्यात मदत करणे सुरू ठेवले आहे. डग्लस हा आंतरराष्ट्रीय स्तरावर मान्यताप्राप्त डिजिटल ट्रान्सफॉर्मेशन आणि MarTech तज्ञ आणि स्पीकर आहे. डग्लस हे डमीच्या मार्गदर्शक आणि व्यवसाय नेतृत्व पुस्तकाचे प्रकाशित लेखक देखील आहेत.

संबंधित लेख

परत शीर्षस्थानी बटण
बंद

अॅडब्लॉक आढळले

Martech Zone तुम्हाला ही सामग्री कोणत्याही खर्चाशिवाय प्रदान करण्यात सक्षम आहे कारण आम्ही आमच्या साइटवर जाहिरात महसूल, संलग्न दुवे आणि प्रायोजकत्वाद्वारे कमाई करतो. तुम्ही आमची साइट पाहता तेव्हा तुमचा अॅड ब्लॉकर काढून टाकल्यास आम्ही कृतज्ञ आहोत.