Disparador de Umbral

Un disparador de umbral es un porcentaje de lectura (1 – 100) que, una vez superado, activa una acción predefinida. Úsalo para mostrar un formulario de newsletter cuando los lectores terminan un artículo, desplazarlos suavemente hacia el inicio, o conectar tu propia lógica a través de un evento del navegador.

Acciones disponibles

1. Volver al inicio

Desplaza suavemente al lector hacia la parte superior de la página cuando supera el umbral. Perfecto para artículos muy largos donde el lector tiene pocas posibilidades de subir manualmente — lo mantiene cerca de la navegación una vez que ha terminado.

2. Mostrar un elemento

Revela un elemento CSS oculto en el momento en que se supera el umbral — ideal para suscripciones a newsletters, invitaciones a comentar, widgets de artículos relacionados o cajas de llamada a la acción que solo deben aparecer una vez que el lector está comprometido.

Prepara el elemento objetivo con un display: none inicial y una transición para que aparezca con un fundido:

.mi-cta-newsletter {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mi-cta-newsletter.es-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

ReadNinja también envía un evento DOM que puedes escuchar — útil si quieres lógica adicional junto a la revelación CSS:

document.addEventListener('rpb:threshold-reached', (e) => {
  const cta = document.querySelector('.mi-cta-newsletter')
  if (cta) cta.classList.add('es-visible')
  console.log('El lector ha alcanzado', e.detail.percent, '%')
})

3. Callback JavaScript personalizado

Ejecuta una función JavaScript de tu elección cuando se alcanza el umbral. En la práctica, escucha el mismo evento rpb:threshold-reached enviado en document y reacciona como desees — envía un evento de analytics, abre un modal, llama a tu propia API.

document.addEventListener('rpb:threshold-reached', (event) => {
  // event.detail.percent = el umbral configurado, ej. 80
  if (typeof window.gtag === 'function') {
    window.gtag('event', 'umbral_lectura_alcanzado', {
      event_category: 'engagement',
      value: event.detail.percent,
    })
  }
})

El evento se activa una sola vez por carga de página, en el momento exacto en que el lector supera el porcentaje configurado — no se volverá a activar si el lector desplaza la página en ambas direcciones.

Ajuste por artículo

Si necesitas desactivar el disparador de umbral en un artículo específico (por ejemplo, un artículo muy corto donde el 80% se alcanza de inmediato), establece la meta clave _rpb_disable_threshold a 1:

update_post_meta( $post_id, '_rpb_disable_threshold', 1 );

Este ajuste está pensado para desarrolladores — no hay interruptor en la barra lateral del editor.