Rastrear eventos de scroll
Registe automaticamente quando visitantes fazem scroll até secções específicas da sua página como features, testemunhos, preços, CTA, e mais.
Configuração simples
Adicione um atributo data-fs-scroll a qualquer elemento HTML para rastrear quando entra no viewport:
<section data-fs-scroll="scroll_to_pricing">
<h2>Pricing</h2>
<p>Choose the perfect plan for your needs</p>
</section>Quando um visitante faz scroll e esta secção fica 50% visível, o Flowsery Analytics disparará automaticamente um objetivo scroll_to_pricing.
Como funciona
- Limiar de visibilidade: Por padrão, o objetivo dispara quando 50% do elemento está visível no viewport
- Rastreamento instantâneo: Os objetivos são enviados imediatamente assim que o limiar é atingido (sem atraso)
- Rastreamento único: Cada elemento aciona apenas uma vez por visita de página para evitar objetivos duplicados
Casos de uso
Rastreie o engagement com secções-chave da página:
<!-- Track pricing section engagement -->
<section data-fs-scroll="viewed_pricing">
<!-- Pricing content -->
</section>
<!-- Track if users read testimonials -->
<div data-fs-scroll="read_testimonials" data-fs-scroll-threshold="0.7">
<!-- Testimonials content -->
</div>
<!-- Track CTA visibility with a delay to ensure user attention -->
<div data-fs-scroll="saw_signup_cta" data-fs-scroll-delay="2000">
<button>Iniciar teste gratuito</button>
</div>Regras de validação do nome do objetivo
O nome do objetivo em data-fs-scroll segue as mesmas regras que os objetivos personalizados:
- Use apenas letras minúsculas, números, underscores (_) e hífens (-)
- Máximo de 64 caracteres
- Exemplos:
scroll_to_pricing,viewed_hero,read_features
Análise
Depois de configurar, pode:
- Ver objetivos de scroll na sua secção de objetivos personalizados
- Incluir objetivos de scroll em funis de conversão para compreender o fluxo de engagement do utilizador
- Filtrar os seus analytics por visitantes que atingiram secções específicas
Dica: Combine o rastreamento de scroll com funis de conversão para ver como a visibilidade de secções influencia as conversões.
Configuração avançada
Personalize o limiar de visibilidade e atraso usando atributos de dados adicionais:
<section data-fs-scroll="scroll_to_hero_cta" data-fs-scroll-threshold="0.8" data-fs-scroll-delay="1000">
<h1>Pronto para começar?</h1>
<button>Inscreva-se agora</button>
</section>Opções de configuração
data-fs-scroll-threshold(opcional): Quanto do elemento deve estar visível antes de acionar (0.1 = 10%, 1 = 100%). Padrão:0.5(50%)data-fs-scroll-delay(opcional): Quanto tempo esperar (em milissegundos) após o elemento ficar visível antes de enviar o evento. Padrão:0(sem atraso)
Para uma referência completa de todas as opções de configuração do script de rastreamento, veja a documentação de configuração do script.