Track scroll events
Automatically record when visitors scroll to specific sections of your page such as features, testimonials, pricing, CTA, and more.
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>
```bash ## Goal name validation rules The goal name in `data-fs-scroll` follows the same rules as [custom goals](/docs/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](/docs/custom-goals) section - Include scroll goals in [conversion
funnels](/support/conversion-funnels) to understand user engagement flow - Filter your analytics by visitors who reached specific sections **Tip:**
Combine scroll tracking with [conversion funnels](/support/conversion-funnels) to see how section visibility influences conversions. ## Advanced
configuration Customize the visibility threshold and delay using additional data attributes: ```html
<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.