Scroll Tracking

Track content engagement with scroll visibility tracking

Overview

Scroll tracking allows you to measure when users view specific sections of your page, helping you understand content engagement and user behavior.

Track when sections become visible with customizable thresholds and time-based requirements to measure genuine engagement.

Basic Scroll Tracking

Track when a section becomes 50% visible (default threshold)

<section data-ed-scroll="pricing_viewed">
  <h2>Pricing</h2>
  <p>Our pricing plans...</p>
</section>

Custom Visibility Threshold

Control when the event fires using data-ed-scroll-threshold

The threshold is a number between 0 and 1, representing the percentage of the element that must be visible:

<!-- Track when 75% of section is visible -->
<section 
  data-ed-scroll="testimonials_viewed"
  data-ed-scroll-threshold="0.75"
>
  <h2>Testimonials</h2>
</section>

Time-Based Engagement

Require the section to be visible for a minimum duration using data-ed-scroll-delay

<!-- Track when section is visible for 2 seconds -->
<section 
  data-ed-scroll="content_engaged"
  data-ed-scroll-threshold="0.5"
  data-ed-scroll-delay="2000"
>
  <h2>Important Content</h2>
  <p>This content requires genuine engagement...</p>
</section>

The delay is specified in milliseconds. This helps filter out accidental scrolls and ensures users actually engaged with the content.

Scroll Tracking with Parameters

Add custom parameters to scroll events for better analysis

<section 
  data-ed-scroll="section_viewed"
  data-ed-scroll-section-name="pricing"
  data-ed-scroll-section-id="pricing-1"
  data-ed-scroll-content-type="pricing_table"
>
  <h2>Pricing Section</h2>
</section>

Use Cases

Content Engagement

Measure how far users scroll and which sections they engage with most.

Ad Visibility

Track when ads or important content become visible to users.

A/B Testing

Compare engagement rates between different content variations.