Déclencheur de Seuil

Un déclencheur de seuil est un pourcentage de lecture (1 – 100) qui, une fois franchi, déclenche une action prédéfinie. Utilisez-le pour afficher un formulaire de newsletter quand les lecteurs finissent un article, les faire défiler doucement vers le haut, ou brancher votre propre logique via un événement navigateur.

Actions disponibles

1. Retour en haut

Fait défiler doucement le lecteur vers le haut de la page quand il franchit le seuil. Parfait pour les articles très longs où le lecteur a peu de chances de remonter manuellement — le garde proche de la navigation une fois qu'il a terminé.

2. Afficher un élément

Révèle un élément CSS masqué au moment où le seuil est franchi — idéal pour les inscriptions à la newsletter, les invitations à commenter, les widgets d'articles similaires ou les boîtes d'appel à l'action qui ne doivent apparaître qu'une fois le lecteur investi.

Préparez l'élément cible avec un display: none initial et une transition pour qu'il apparaisse en fondu :

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

ReadNinja envoie également un événement DOM que vous pouvez écouter — utile si vous voulez de la logique supplémentaire à côté du révélation CSS :

document.addEventListener('rpb:threshold-reached', (e) => {
  const cta = document.querySelector('.mon-cta-newsletter')
  if (cta) cta.classList.add('est-visible')
  console.log('Le lecteur a atteint', e.detail.percent, '%')
})

3. Callback JavaScript personnalisé

Exécute une fonction JavaScript de votre choix quand le seuil est atteint. En pratique, écoutez le même événement rpb:threshold-reached dispatché sur document et réagissez comme vous le souhaitez — envoyez un événement analytics, ouvrez une modale, appelez votre propre API.

document.addEventListener('rpb:threshold-reached', (event) => {
  // event.detail.percent = le seuil configuré, ex. 80
  if (typeof window.gtag === 'function') {
    window.gtag('event', 'seuil_lecture_atteint', {
      event_category: 'engagement',
      value: event.detail.percent,
    })
  }
})

L'événement se déclenche une seule fois par chargement de page, au moment exact où le lecteur franchit le pourcentage configuré — il ne se déclenchera pas à nouveau si le lecteur fait défiler la page dans les deux sens.

Surcharge par article

Si vous devez désactiver le déclencheur de seuil sur un article spécifique (par exemple un article très court où 80 % est atteint instantanément), définissez la meta clé _rpb_disable_threshold à 1 :

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

Cette surcharge est destinée aux développeurs — il n'y a pas de toggle dans la barre latérale de l'éditeur.