✅Código para Popup Intención de Salida | WordPress

Captar y retener la atención de los visitantes es crucial para el éxito de cualquier sitio web. ¿Alguna vez te has preguntado cuántos visitantes abandonan tu página llevándose con ellos la oportunidad de convertir una visita casual en una valiosa conversión? Aquí es donde entra en juego una herramienta poderosa: el popup de intención de salida. Este artículo explora cómo este código de popup puede transformar la interacción de los usuarios en tu sitio web, mejorando tanto la retención como las conversiones.

El popup de intención de salida es una técnica inteligente diseñada para detectar cuando un usuario está a punto de abandonar tu página. En lugar de simplemente perder a ese visitante, este popup aparece en el momento justo, captando su atención con un mensaje atractivo y relevante. Imagina que un visitante está a punto de cerrar la pestaña de tu navegador; de repente, aparece una ventana emergente que les invita a explorar ofertas especiales, suscribirse a un boletín informativo o disfrutar de un descuento exclusivo. Esta intervención oportuna puede ser la diferencia entre una pérdida y una ganancia significativa.

Una de las grandes ventajas de este enfoque es su capacidad para captar la atención del usuario sin ser intrusivo. Al activarse solo cuando el visitante está a punto de irse, no interrumpe su experiencia de navegación normal. Además, su diseño personalizable permite que se adapte perfectamente a la estética de tu sitio web y a las necesidades específicas de tu negocio.

También integra funciones esenciales como el establecimiento de cookies para evitar que el mismo usuario vea el popup repetidamente en un corto periodo. Esto garantiza que la experiencia del usuario sea positiva y no se vea saturada por demasiadas interrupciones.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

function enqueue_exit_intent_popup_assets() {
    // Inline CSS para el popup de intención de salida
    $exit_popup_css = "
    #exitIntentPopup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .exit-popup-content {
        background: #fff;
        width: 80%;
        max-width: 600px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .exit-popup-image {
        max-width: 150px;
        margin-right: 20px;
    }

    .exit-popup-text {
        flex: 1;
    }

    .exit-popup-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .exit-popup-description {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .exit-popup-button {
        display: inline-block;
        padding: 10px 20px;
        background: #3498db;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
    }

    .exit-popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
    ";
    // Registrar y encolar el CSS en línea
    wp_register_style('exit-popup-inline-css', false);
    wp_enqueue_style('exit-popup-inline-css');
    wp_add_inline_style('exit-popup-inline-css', $exit_popup_css);

    // JavaScript en línea para el popup de intención de salida
    $exit_popup_js = "
 document.addEventListener('DOMContentLoaded', function() {
    const exitIntentPopup = document.getElementById('exitIntentPopup');
    const cookieExpirationDays = 1; // Configura el número de días de expiración aquí

    // Función para establecer una cookie
    function setCookie(name, value, days) {
        let expires = '';
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = '; expires=' + date.toUTCString();
        }
        document.cookie = name + '=' + (value || '')  + expires + '; path=/';
    }

    // Función para obtener una cookie
    function getCookie(name) {
        const nameEQ = name + '=';
        const ca = document.cookie.split(';');
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // Función para mostrar el popup y establecer la cookie
    function showPopup() {
        exitIntentPopup.style.display = 'flex';
        setCookie('exitIntentShown', 'true', cookieExpirationDays); // Usar el valor configurado
    }

    // Verificar si la cookie está establecida antes de mostrar el popup
    if (!getCookie('exitIntentShown')) {
        document.addEventListener('mouseleave', function(event) {
            if (event.clientY < 0 && !getCookie('exitIntentShown')) {
                showPopup();
            }
        });
    }

    // Establecer la cookie al cerrar el popup
    document.getElementById('exitPopupClose').addEventListener('click', function() {
        exitIntentPopup.style.display = 'none';
        setCookie('exitIntentShown', 'true', cookieExpirationDays); // Usar el valor configurado
    });
});

    ";
    // Registrar y encolar el JavaScript en línea
    wp_register_script('exit-popup-inline-js', false);
    wp_enqueue_script('exit-popup-inline-js');
    wp_add_inline_script('exit-popup-inline-js', $exit_popup_js);
}
// Añadir la función al gancho wp_enqueue_scripts para encolar estilos y scripts
add_action('wp_enqueue_scripts', 'enqueue_exit_intent_popup_assets');

function add_exit_intent_popup_html() {
    // HTML del popup de intención de salida
    echo '
    <div id="exitIntentPopup">
        <div class="exit-popup-content">
            <button id="exitPopupClose" class="exit-popup-close">&times;</button>
            <img class="exit-popup-image" src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcXJrczdrYjRkZnh0OXRuOTdxdm1rMmV1N3hkZ2pjbG1mb253MnZibyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fXhyF88RA3zJo6U9a3/giphy.webp" alt="Popup Image">
            <div class="exit-popup-text">
                <h2 class="exit-popup-title">¡Espera!</h2>
                <p class="exit-popup-description">Antes de irte, ¿por qué no echas un vistazo a nuestras ofertas especiales?</p>
                <a href="https://codigos.fransalas-proyectos.com/" class="exit-popup-button">Ver Ofertas</a>
            </div>
        </div>
    </div>
    ';
}
// Añadir la función al gancho wp_footer para insertar el HTML del popup en el pie de página
add_action('wp_footer', 'add_exit_intent_popup_html');

Lenguaje del código: PHP (php)

Entendiendo el Código

1. Función Principal: enqueue_exit_intent_popup_assets

Esta función se encarga de registrar y encolar los estilos CSS y scripts JavaScript necesarios para el popup.

a. Estilos CSS en línea

Se define una cadena de CSS en línea que estiliza el popup y sus elementos internos. Esto incluye la definición del contenedor del popup, su contenido, imagen, texto, título, descripción, botón y botón de cierre. Cada uno de estos elementos se estiliza para garantizar una presentación atractiva y funcional.

b. Registro y Encolado del CSS

El CSS en línea se registra y encola utilizando las funciones de WordPress wp_register_style, wp_enqueue_style y wp_add_inline_style. Esto asegura que los estilos se apliquen correctamente a la página cuando se carga.

c. JavaScript en línea

El JavaScript en línea se define para manejar la lógica del popup de intención de salida. Esto incluye:

• Detección del Evento de Salida: Se añade un evento mouseleave que detecta cuando el cursor del usuario se mueve fuera de la ventana del navegador, lo que indica una intención de salida.
• Gestión de Cookies: Se crean funciones para establecer y obtener cookies, que se utilizan para asegurar que el popup no se muestre repetidamente al mismo usuario en un corto periodo.
• Mostrar el Popup: Si no existe una cookie que indique que el popup ya ha sido mostrado, se muestra el popup y se establece una cookie para recordar esta acción.
• Cerrar el Popup: Se añade un evento al botón de cierre del popup, que oculta el popup y establece una cookie para evitar mostrarlo nuevamente.

El JavaScript en línea se registra y encola usando wp_register_script, wp_enqueue_script y wp_add_inline_script de WordPress.

2. Inserción del HTML del Popup

La función add_exit_intent_popup_html se encarga de insertar el HTML del popup en el pie de página de la página web. Esta función utiliza el gancho wp_footer para asegurar que el HTML del popup se añada al final del documento, garantizando que todos los elementos de la página ya estén cargados y el popup pueda funcionar correctamente.

Detalles del HTML del Popup

El HTML define la estructura del popup, incluyendo:

• Contenedor Principal (#exitIntentPopup): Cubre toda la pantalla con una superposición semi-transparente y centra el contenido del popup.
• Contenido del Popup (.exit-popup-content): Incluye el diseño del mensaje o oferta, con estilos que aseguran una presentación atractiva.
• Imagen del Popup (.exit-popup-image): Permite mostrar una imagen relevante junto al mensaje.
• Texto del Popup (.exit-popup-text): Contiene el título, la descripción y un botón de acción que invita al usuario a interactuar.
• Botón de Cierre (.exit-popup-close): Permite al usuario cerrar el popup de manera sencilla.

Conclusión

Este código integra un popup de intención de salida en una página web, utilizando una combinación de CSS, JavaScript y HTML para crear una experiencia de usuario fluida y efectiva. La gestión de cookies asegura que el popup no sea intrusivo, mostrándose solo cuando es relevante y evitando repetidas interrupciones para el mismo usuario. La implementación detallada y estructurada garantiza que el popup funcione correctamente y se presente de manera atractiva, ayudando a retener visitantes y aumentar las conversiones.

Nos vemos en el siguiente tutorial.

Un saludo.