Skip to main content

​
Overview

The TrackTime component monitors how long users spend on a page and tracks when they reach specific time intervals. It also captures the total time spent when the component unmounts.

​
Props

​
children
ReactNode
required
The content to render and track time for.
​
event
string
default:"time_on_page"
The event name to track for time interval milestones.
​
intervals
number[]
Array of time intervals in seconds. Tracks an event when each interval is reached.

​
Usage

​
Basic Time Tracking

import { TrackTime } from 'mentiq-sdk';

function Article({ content }) {
  return (
    <TrackTime>
      <article>
        <h1>{content.title}</h1>
        <div>{content.body}</div>
      </article>
    </TrackTime>
  );
}

​
Custom Intervals

// Track at 15s, 30s, 60s, 2min, 5min
<TrackTime intervals={[15, 30, 60, 120, 300]}>
  <VideoPlayer />
</TrackTime>

​
Product Page Engagement

function ProductPage({ product }) {
  return (
    <TrackTime
      event="product_page_time"
      intervals={[10, 30, 60, 120]}
    >
      <div>
        <ProductDetails product={product} />
        <Reviews />
        <RelatedProducts />
      </div>
    </TrackTime>
  );
}

​
Documentation Page

function DocsPage({ page }) {
  return (
    <TrackTime
      event="docs_reading_time"
      intervals={[30, 60, 180, 300, 600]}
    >
      <article>
        <h1>{page.title}</h1>
        <MDXContent content={page.content} />
      </article>
    </TrackTime>
  );
}

​
Tracked Events

​
time_on_page (or custom event)

Tracked when a user reaches a time interval: 
{
  time_spent: number,      // The interval threshold reached (in seconds)
  total_time: number       // The actual total time spent (rounded, in seconds)
}

​
page_time_final

Automatically tracked when the component unmounts: 
{
  total_time: number       // Total time spent from mount to unmount (rounded, in seconds)
}

​
Behavior

  • Starts tracking time immediately on mount
  • Each interval is tracked only once
  • Checks intervals every second using setInterval
  • Tracks final time on component unmount
  • Automatically cleans up timers on unmount
  • Renders children as a React Fragment (no wrapper element)
  • Time is measured in seconds

​
Use Cases

  • Measure content engagement duration
  • Track reading time for articles
  • Monitor video or media consumption time
  • Identify high-value content by time spent
  • A/B test content length effectiveness
  • Trigger actions based on time thresholds
  • Analyze user attention spans
  • Measure product page interest

​
Implementation Details

The component uses two useEffect hooks:
  1. Interval tracking: Runs a timer every second to check if any time intervals have been reached
  2. Final time tracking: Captures the total time spent when the component unmounts
Time calculation: 
const startTime = useRef(Date.now());
const timeSpent = (Date.now() - startTime.current) / 1000; // in seconds

​
Performance Notes

  • Uses a 1-second interval timer (low overhead)
  • Intervals are tracked in a Set for efficiency
  • No re-renders triggered by time updates
  • Cleanup is automatic and thorough

Build docs developers (and LLMs) love

Get started for freeTalk to us