Track scroll events

Automatically track when visitors scroll to specific sections of your page like features, testimonials, pricing, CTA, etc.

Simple setup

Add a data-fast-scroll attribute to any HTML element to track when it becomes visible:

<section data-fast-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, DataFast will automatically send a scroll_to_pricing goal.

How it works

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

Use cases

Track engagement with important page sections:

<!-- Track pricing section engagement -->
<section data-fast-scroll="viewed_pricing">
  <!-- Pricing content -->
</section>

<!-- Track if users read testimonials -->
<div data-fast-scroll="read_testimonials" data-fast-scroll-threshold="0.7">
  <!-- Testimonials content -->
</div>

<!-- Track CTA visibility with a delay to ensure user attention -->
<div data-fast-scroll="saw_signup_cta" data-fast-scroll-delay="2000">
  <button>Start free trial</button>
</div>

Goal name validation rules

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

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

Analysis

Once set up, you can:

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

Advanced configuration

Customize the visibility threshold and delay using additional data attributes:

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

Configuration options

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