Rastrear eventos de scroll, Centro de ayuda

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:

HTML

<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:

HTML

<!-- 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>

Reglas de validacion del nombre del objetivo

El nombre del objetivo en data-fs-scroll sigue las mismas reglas que los objetivos personalizados:

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
Incluir objetivos de scroll en embudos de conversion 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 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.