Trigger di Soglia

Un trigger di soglia è una percentuale di lettura (1 – 100) che, una volta superata, attiva un'azione predefinita. Usalo per mostrare un modulo di iscrizione alla newsletter quando i lettori finiscono un articolo, farli scorrere dolcemente verso l'alto, o collegare la tua logica tramite un evento del browser.

Azioni disponibili

1. Torna in cima

Fa scorrere dolcemente il lettore verso la cima della pagina quando supera la soglia. Perfetto per gli articoli molto lunghi dove il lettore ha poche probabilità di tornare su manualmente — lo mantiene vicino alla navigazione una volta che ha terminato.

2. Mostra un elemento

Rivela un elemento CSS nascosto nel momento in cui la soglia viene superata — ideale per iscrizioni alla newsletter, inviti a commentare, widget di articoli correlati o box di call-to-action che devono apparire solo quando il lettore è coinvolto.

Prepara l'elemento target con un display: none iniziale e una transizione per farlo apparire in dissolvenza:

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

ReadNinja invia anche un evento DOM che puoi ascoltare — utile se vuoi logica aggiuntiva accanto alla rivelazione CSS:

document.addEventListener('rpb:threshold-reached', (e) => {
  const cta = document.querySelector('.mio-cta-newsletter')
  if (cta) cta.classList.add('is-visible')
  console.log('Il lettore ha raggiunto', e.detail.percent, '%')
})

3. Callback JavaScript personalizzato

Esegue una funzione JavaScript di tua scelta quando la soglia viene raggiunta. In pratica, ascolta lo stesso evento rpb:threshold-reached dispatchato su document e reagisci come preferisci — invia un evento analytics, apri una modale, chiama la tua API.

document.addEventListener('rpb:threshold-reached', (event) => {
  // event.detail.percent = la soglia configurata, es. 80
  if (typeof window.gtag === 'function') {
    window.gtag('event', 'soglia_lettura_raggiunta', {
      event_category: 'engagement',
      value: event.detail.percent,
    })
  }
})

L'evento si attiva una sola volta per caricamento pagina, nel momento esatto in cui il lettore supera la percentuale configurata — non si attiverà di nuovo se il lettore scorre avanti e indietro.

Override per articolo

Se devi disattivare il trigger di soglia su un articolo specifico (per esempio un articolo molto breve dove l'80% viene raggiunto istantaneamente), imposta la meta key _rpb_disable_threshold a 1:

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

Questo override è destinato agli sviluppatori — non c'è un toggle nella barra laterale dell'editor.