Agrega un Pop Up de suscripción a tu blog En Ghost

Juan Pablo Traverso -

Hoy vamos a revisar una solución para incrementar la lista de suscriptores de tu blog en Ghost a través de pop-ups inteligentes. Configuraremos un pop-up con varios parámetros que podemos ajustar según nuestras preferencias y mediante la funcionalidad code injection lo dejaremos corriendo de forma permanente.

1. ¿Porqué son tan importantes los pop-up de suscripción?

Un pop-up, correctamente implementado, pueden convertirse en una estrategia poderosa para aumentar tus suscriptores, mejorando no sólo la cantidad, sino la calidad de tus visitantes recurrentes. Sin embargo, la clave está en la palabra "correctamente", ya que un mal uso puede llevar al efecto contrario.

Debes buscar un equilibrio entre lograr que nuevos visitantes se vuelvan suscriptores y mantener una buena experiencia para la lectura de tu contenido.

  1. Aspectos técnicos que estamos considerando

Buscando ese equilibrio, hemos buscado generar parámetros en este script, que te permitan por ejemplo:

  • Definir un porcentaje específico de scroll en tu página para que el pop-up aparezca justo en el momento adecuado.
  • Establecer un número e intervalo de tiempo entre apariciones para no agobiar a tus visitantes.
  • Adaptar la visibilidad del pop-up según el tipo de dispositivo.
  • Envío del evento de apertura del pop-up a Google analytics

3. Código fuente del script

A continuación podrás revisar el script y la explicación de cada parte del script, he incorporado comentarios en el código fuente para que su implementación y mantención sea más sencilla.

<script>
// Función asíncrona para verificar si el usuario actual es miembro del sitio.
async function isMember() {
  try {
    // Realiza una solicitud fetch al endpoint de membresía de tu sitio.
    const response = await fetch(`${location.origin}/members/api/member/`);
    // Devuelve verdadero si el estado de la respuesta es 200, lo que indica que el usuario es miembro.
    return response.status === 200;
  } catch (error) {
    // Registra cualquier error que ocurra durante la solicitud fetch.
    console.error('Error checking membership status:', error);
    return false;
  }
}
</script>

<script>
// Configuraciones para el comportamiento del popup.
const popupSettings = {
  scrollPercentageToShow: 50, // El porcentaje del desplazamiento de la página necesario para que se muestre el popup.
  timeBetweenPopups: 86400, // El tiempo mínimo entre mostrar popups (en segundos).
  initialDelay: 5000, // El retardo inicial antes de que el popup se pueda mostrar (en milisegundos).
  popupUrl: '#/portal', // La URL a la que el popup dirige.
  maxPopupsPerSession: 2, // El número máximo de veces que el popup se puede mostrar por sesión.
  disableOnMobile: false, // Si se debe desactivar el popup en dispositivos móviles.
  mobileWidth: 768, // El ancho máximo del dispositivo para considerarlo como móvil.
  gtagEvent: true // Si se debe enviar eventos de popup mostrados a Google Analytics.
};

// Establece el número inicial de veces que se ha mostrado el popup en esta sesión.
sessionStorage.setItem('POPUPCOUNT', sessionStorage.getItem('POPUPCOUNT') || 0);
let popupAlreadyShown = false; // Indicador de si el popup ya se ha mostrado.
let lastPopup = sessionStorage.getItem('POPUP_OPENED'); // La última vez que se mostró el popup.
let timeDelta = lastPopup ? (new Date() - new Date(lastPopup)) / 1000 : Infinity; // El tiempo desde la última vez que se mostró el popup.
let popupCount = parseInt(sessionStorage.getItem('POPUPCOUNT'), 10); // El número de popups mostrados en la sesión actual.

// Función para decidir si abrir el popup.
async function openPopup(member) {
  // Muestra el popup solo si el usuario no es miembro y aún no se ha alcanzado el máximo de popups por sesión.
  if (!member && (popupCount < popupSettings.maxPopupsPerSession || timeDelta > popupSettings.timeBetweenPopups)) {
      displayPopup();
  }
}

// Función para mostrar el popup.
function displayPopup() {
  // Si el popup ya se ha mostrado o no se han cumplido las condiciones de tiempo, no hace nada.
  if (!popupAlreadyShown) {
    // Crea y muestra el popup.
    const popupLink = document.createElement('a');
    popupLink.href = popupSettings.popupUrl;
    document.body.appendChild(popupLink);
    popupLink.click();
    document.body.removeChild(popupLink);
    
    // Actualiza el estado y el recuento del popup.
    sessionStorage.setItem('POPUPCOUNT', popupCount + 1);
    sessionStorage.setItem('POPUP_OPENED', new Date().toISOString());
    popupAlreadyShown = true;
  
    // Envía un evento a Google Analytics si está habilitado.
    if (popupSettings.gtagEvent) {
      gtag('event', 'popup_shown', {
        'event_category': 'Engagement',
        'event_label': 'Popup Shown to Non-Member',
        'value': 1
      });
    }
  }
}
  
// Evento que se dispara cuando el DOM está completamente cargado.
document.addEventListener('DOMContentLoaded', async () => {
    const member = await isMember();
    // Después del retardo inicial, comienza a escuchar el desplazamiento para mostrar el popup.
    setTimeout(() => {
        window.addEventListener("scroll", async () => {
            // Calcula el porcentaje de desplazamiento de la página.
            let scrollTop = window.scrollY;
            let docHeight = document.body.offsetHeight;
            let winHeight = window.innerHeight;
            let scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
            // Muestra el popup según las configuraciones y el desplazamiento.
            if (!popupSettings.disableOnMobile || window.innerWidth > popupSettings.mobileWidth) {
                if (scrollPercent > popupSettings.scrollPercentageToShow) {
                    openPopup(member);
                }
            }
        });
    }, popupSettings.initialDelay);
  });
</script>

Revisemos ahora las secciones principales de este script:

a. Verificación de Membresía:

La función isMember() es crucial para una experiencia de usuario personalizada. Queremos asegurarnos de que los usuarios que ya son miembros no sean bombardeados con solicitudes para suscribirse. Esta función hace una llamada a la API de tu sitio Ghost para verificar el estado de membresía del usuario y actúa en consecuencia.

b. Configuración Inicial:

En la sección de configuración inicial, definimos los parámetros clave que controlan el comportamiento del pop-up. Esto incluye cuándo y cómo queremos que se muestre. Por ejemplo, scrollPercentageToShow determina qué tan lejos debe desplazarse el usuario en tu página antes de que el pop-up se muestre, mientras que timeBetweenPopups controla cuánto tiempo debe transcurrir antes de que el pop-up se pueda mostrar de nuevo a un mismo usuario.

c. Mostrando el Pop-up:

La función displayPopup() es donde se crea y se muestra el pop-up. Esta función se encarga de generar y mostrar el pop-up de suscripción en la página. Se verifica si el usuario es o no un miembro, si el pop-up ya se ha mostrado antes (usando popupAlreadyShown) para evitar mostrarlo múltiples veces durante la misma sesión, timeDelta y popupCount ayudan a controlar cuánto tiempo ha pasado desde la última vez que se mostró el pop-up y cuántas veces se ha mostrado durante la sesión actual del usuario. Además, se actualiza el contador de pop-ups mostrados y se registra la hora del último pop-up mostrado.

Si se cumplen todas las condiciones anteriores (el usuario no es un miembro, el pop-up no se ha mostrado demasiadas veces, y ha pasado suficiente tiempo desde la última visualización), entonces se muestra el pop-up. Esto se hace creando dinámicamente un enlace en el documento con document.body.appendChild(popupLink) y luego simulando un clic en ese enlace conpopupLink.click(). Esta acción abre el pop-up que ha sido previamente definido y dirigido por la popupUrl en nuestras configuraciones.

d. Actualización del Estado de Sesión: Después de mostrar el pop-up, actualizamos la información de la sesión para reflejar que el pop-up se ha mostrado. Esto incluye incrementar el contador de pop-ups mostrados (popupCount) y registrar la última vez que se mostró el pop-up (POPUP_OPENED).

e. Escuchando el Desplazamiento del Usuario:

La lógica principal se ejecuta dentro de la función setupPopup(), que se activa después de que la página se ha cargado y el tiempo de retraso inicial (initialDelay) ha pasado. Aquí, escuchamos el evento de desplazamiento (scroll) del usuario y verificamos si se ha cumplido el porcentaje de desplazamiento necesario para mostrar el pop-up. Esto permite que el pop-up se muestre en un momento más natural y menos intrusivo durante la experiencia de navegación del usuario.

e. Registro de Eventos con Google Analytics:

Una vez que se muestra el pop-up, utilizamos la funcionalidad gtagEvent para enviar un evento a Google Analytics.

f. Iniciación y Temporización:

Finalmente, todo esto se ejecuta cuando el DOM está completamente cargado y después de un retraso inicial definido. Esto asegura que todos los elementos de la página estén disponibles y que el usuario tenga tiempo para interactuar con tu contenido antes de que aparezca el pop-up.

4. Pruebas y Ajustes: La Clave del Éxito

Este script proporciona una base sólida para la implementación de pop-ups en tu blog Ghost, pero siempre recomiendo personalizarlo para que se ajuste a las necesidades específicas de tu audiencia y los objetivos de tu sitio. Con pruebas y ajustes continuos, puedes maximizar la efectividad de tus pop-ups y mejorar la experiencia general del usuario en tu sitio. Es muy importante logres encontrar la fórmula perfecta que resuene con tu audiencia y mantenga este equilibrio en el que tanto hemos insistido en este post.

Palabras finales

¡Esperamos que este tutorial te haya servido!

Si fue así, suscríbete para recibir nuestra newsletter y no perderte los contenidos de Mente Digital.