Gatilho de Porcentagem

Um gatilho de porcentagem é uma porcentagem de leitura (1 – 100) que, uma vez ultrapassada, dispara uma ação predefinida. Use-o para exibir um formulário de newsletter quando os leitores terminam um artigo, rolar suavemente de volta ao topo, ou conectar sua própria lógica via um evento do navegador.

Ações disponíveis

1. Voltar ao topo

Rola suavemente o leitor de volta ao topo da página quando ele ultrapassa o gatilho. Perfeito para artigos muito longos onde o leitor dificilmente vai rolar manualmente para cima — mantém-no perto da navegação quando terminar.

2. Exibir um elemento

Revela um elemento CSS oculto no momento em que o gatilho é atingido — ideal para formulários de newsletter, convites para comentar, widgets de artigos relacionados ou caixas de call-to-action que só devem aparecer quando o leitor está engajado.

Prepare o elemento alvo com um display: none inicial e uma transição para que ele apareça com fade:

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

O ReadNinja também envia um evento DOM que você pode escutar — útil se quiser lógica adicional além da revelação CSS:

document.addEventListener('rpb:threshold-reached', (e) => {
  const cta = document.querySelector('.meu-cta-newsletter')
  if (cta) cta.classList.add('esta-visivel')
  console.log('O leitor atingiu', e.detail.percent, '%')
})

3. Callback JavaScript personalizado

Executa uma função JavaScript da sua escolha quando o gatilho é atingido. Na prática, escute o mesmo evento rpb:threshold-reached disparado no document e reaja como quiser — envie um evento de analytics, abra um modal, chame sua própria API.

document.addEventListener('rpb:threshold-reached', (event) => {
  // event.detail.percent = o gatilho configurado, ex. 80
  if (typeof window.gtag === 'function') {
    window.gtag('event', 'gatilho_leitura_atingido', {
      event_category: 'engajamento',
      value: event.detail.percent,
    })
  }
})

O evento dispara uma única vez por carregamento de página, no momento exato em que o leitor ultrapassa a porcentagem configurada — não será disparado novamente se o leitor rolar a página nos dois sentidos.

Substituição por artigo

Se você precisa desativar o gatilho de porcentagem em um artigo específico (por exemplo, um artigo muito curto onde 80% é atingido instantaneamente), defina a meta key _rpb_disable_threshold como 1:

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

Esta substituição é destinada a desenvolvedores — não há toggle na barra lateral do editor.