Skip to main content

​
Overview

The TrackScroll component monitors page scroll depth and tracks when users reach specific percentage milestones. Perfect for understanding content engagement and reading behavior.

​
Props

​
children
ReactNode
required
The content to render. The component tracks global page scroll, not scrolling within its children.
​
milestones
number[]
Array of percentage milestones to track. Each milestone is tracked only once per session.

​
Usage

​
Basic Scroll Tracking

import { TrackScroll } from 'mentiq-sdk';

function App() {
  return (
    <TrackScroll>
      <main>
        <Hero />
        <Features />
        <Pricing />
        <Footer />
      </main>
    </TrackScroll>
  );
}

​
Custom Milestones

// Track at 10%, 25%, 50%, 75%, 90%, and 100%
<TrackScroll milestones={[10, 25, 50, 75, 90, 100]}>
  <ArticleContent />
</TrackScroll>

​
Blog Post Engagement

function BlogPost({ post }) {
  return (
    <TrackScroll milestones={[25, 50, 75, 100]}>
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    </TrackScroll>
  );
}

​
Landing Page Analytics

function LandingPage() {
  return (
    <TrackScroll milestones={[20, 40, 60, 80, 100]}>
      <div>
        <HeroSection />
        <ProductDemo />
        <Testimonials />
        <CallToAction />
      </div>
    </TrackScroll>
  );
}

​
Tracked Events

​
scroll_milestone

Tracked when a user reaches a scroll depth milestone: 
{
  milestone: number,           // The milestone percentage reached
  scroll_percentage: number    // The actual scroll percentage (rounded)
}

​
Behavior

  • Tracks global window scroll, not container scroll
  • Each milestone is tracked only once per component instance
  • Uses passive scroll listeners for optimal performance
  • Automatically cleans up event listeners on unmount
  • Renders children as a React Fragment (no wrapper element)
  • Calculates scroll percentage based on total document height

​
Use Cases

  • Measure content engagement on long pages
  • Track blog post reading depth
  • Identify where users lose interest
  • Optimize content placement based on scroll data
  • A/B test content length and layout
  • Monitor landing page effectiveness
  • Trigger actions at specific scroll depths

​
Implementation Details

The component calculates scroll percentage using: 
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;
Milestones are tracked in a Set to ensure each is only reported once during the component’s lifetime.

Build docs developers (and LLMs) love

Get started for freeTalk to us