Rastrear eventos de scroll
Registra automaticamente cuando los visitantes hacen scroll hasta secciones especificas de tu pagina como funcionalidades, testimonios, precios, CTA y mas.
Configuracion simple
Agrega un atributo data-fs-scroll a cualquier elemento HTML para rastrear cuando entra en el viewport:
<section data-fs-scroll="scroll_to_pricing">
<h2>Pricing</h2>
<p>Choose the perfect plan for your needs</p>
</section>Cuando un visitante hace scroll y esta seccion se vuelve 50% visible, Flowsery Analytics activara automaticamente un objetivo
scroll_to_pricing.
Como funciona - Umbral de visibilidad: Por defecto, el objetivo se activa cuando el 50% del elemento es visible en el
viewport - Seguimiento instantaneo: Los objetivos se envian inmediatamente una vez que se alcanza el umbral (sin retraso) - Seguimiento unico: Cada elemento se activa solo una vez por visita a la pagina para evitar objetivos duplicados
Casos de uso Rastrea el engagement con
secciones clave de la pagina:
<!-- 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 prueba gratis</button>
</div>
```bash ## Reglas de validacion del nombre del objetivo El nombre del objetivo en `data-fs-scroll` sigue las mismas reglas que los [objetivos
personalizados](/docs/custom-goals): - Usa solo letras minusculas, numeros, guiones bajos (\_) y guiones (-) - Maximo 64 caracteres - Ejemplos:
`scroll_to_pricing`, `viewed_hero`, `read_features` ## Analisis Una vez configurado, puedes: - Ver los objetivos de scroll en tu seccion de [objetivos
personalizados](/docs/custom-goals) - Incluir objetivos de scroll en [embudos de conversion](/support/conversion-funnels) para entender el flujo de
engagement del usuario - Filtrar tu analitica por visitantes que alcanzaron secciones especificas **Consejo:** Combina el seguimiento de scroll con
[embudos de conversion](/support/conversion-funnels) para ver como la visibilidad de las secciones influye en las conversiones. ## Configuracion
avanzada Personaliza el umbral de visibilidad y el retraso usando atributos data adicionales: ```html
<section data-fs-scroll="scroll_to_hero_cta" data-fs-scroll-threshold="0.8" data-fs-scroll-delay="1000">
<h1>¿Listo para empezar?</h1>
<button>Regístrate ahora</button>
</section>Opciones de configuracion
data-fs-scroll-threshold(opcional): Cuanto del elemento debe ser visible antes de activarse (0.1 = 10%, 1 = 100%). Por defecto:0.5(50%)data-fs-scroll-delay(opcional): Cuanto tiempo esperar (en milisegundos) despues de que el elemento se vuelva visible antes de enviar el evento. Por defecto:0(sin retraso)
Para una referencia completa de todas las opciones de configuracion del script de seguimiento, consulta la documentacion de configuracion del script.