Scroll Depth Reporter

ScrollDepthReporter

The ScrollDepthReporter component provides automatic scroll depth tracking for engagement analytics. It monitors how far users scroll down the page and reports key milestones to the analytics system.

Features:

• Automatic tracking - No manual setup needed beyond adding the component
• Performance optimized - Uses requestAnimationFrame for efficient scroll monitoring
• Privacy-preserving - Only tracks percentage thresholds, not specific content
• Analytics integration - Automatically sends depth data to @dynamic-type/analytics
• Memory safe - Proper cleanup to prevent memory leaks

Basic Usage

---
import { ScrollDepthReporter } from '@dynamic-type/ddi';
---

<!-- Add the reporter component once per page -->
<ScrollDepthReporter />

<!-- That's it! Scroll depth will be tracked automatically -->

Tracked Thresholds

The component tracks when users reach these scroll depth percentages:

• 0% - Page loaded (top of page)
• 25% - Scrolled through first quarter
• 50% - Scrolled through half the page
• 75% - Scrolled through three quarters
• 95% - Nearly reached the bottom

Each threshold is only reported once per page view.

How It Works

The ScrollDepthReporter:

1. Calculates the scrollable height of the page
2. Monitors scroll position using a passive event listener
3. Throttles position checks using requestAnimationFrame for performance
4. Tracks when each threshold is reached for the first time
5. Calls trackEvent() with the scroll depth percentage
6. Cleans up all listeners and state when the component unmounts

Analytics Events

When a threshold is reached, the component sends an event with:

• name: "scroll-depth"
• attribute: The threshold value (e.g., "0", "0.25", "0.5", "0.75", "0.95")