Track scroll events

Automatically record when visitors scroll to specific sections of your page such as features, testimonials, pricing, CTA, and more.

Scroll tracking funnel screenshot

Simple setup

Add a data-fs-scroll attribute to any HTML element to track when it enters the viewport:

<section data-fs-scroll="scroll_to_pricing">
  <h2>Pricing</h2>
  <p>Choose the perfect plan for your needs</p>
</section>

When a visitor scrolls and this section becomes 50% visible, Flowsery Analytics will automatically fire a scroll_to_pricing goal.

How it works

  • Visibility threshold: By default, the goal fires when 50% of the element is visible in the viewport
  • Instant tracking: Goals are sent immediately once the threshold is reached (no delay)
  • One-time tracking: Each element triggers only once per page visit to prevent duplicate goals

Use cases

Track engagement with key page sections:

<!-- 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>Start free trial</button>
</div>

Goal name validation rules

The goal name in data-fs-scroll follows the same rules as custom goals:

  • Use lowercase letters, numbers, underscores (_), and hyphens (-) only
  • Maximum 64 characters
  • Examples: scroll_to_pricing, viewed_hero, read_features

Analysis

Once configured, you can:

  • View scroll goals in your custom goals section
  • Include scroll goals in conversion funnels to understand user engagement flow
  • Filter your analytics by visitors who reached specific sections

Tip: Combine scroll tracking with conversion funnels to see how section visibility influences conversions.

Advanced configuration

Customize the visibility threshold and delay using additional data attributes:

<section
  data-fs-scroll="scroll_to_hero_cta"
  data-fs-scroll-threshold="0.8"
  data-fs-scroll-delay="1000"
>
  <h1>Ready to get started?</h1>
  <button>Sign up now</button>
</section>

Configuration options

  • data-fs-scroll-threshold (optional): How much of the element must be visible before triggering (0.1 = 10%, 1 = 100%). Default: 0.5 (50%)
  • data-fs-scroll-delay (optional): How long to wait (in milliseconds) after the element becomes visible before sending the event. Default: 0 (no delay)

For a complete reference of all tracking script configuration options, see script configuration documentation.