Skip to main content

​
Overview

The TrackView component automatically tracks when its children become visible in the viewport using the Intersection Observer API. Perfect for tracking impressions of content sections, ads, or important UI elements.

​
Props

​
children
ReactNode
required
The content to render and track visibility for.
​
event
string
default:"element_viewed"
The event name to track when the element becomes visible.
​
properties
EventProperties
Additional properties to include with the tracked event.
​
threshold
number
Percentage of element that needs to be visible to trigger tracking (0 to 1). For example, 0.5 means 50% of the element must be visible.
​
delay
number
default:1000
Delay in milliseconds before tracking the view event. Helps ensure the user actually saw the content rather than just scrolling past it.

​
Usage

​
Basic Usage

import { TrackView } from 'mentiq-sdk';

function ProductCard({ product }) {
  return (
    <TrackView
      event="product_viewed"
      properties={{ product_id: product.id, product_name: product.name }}
    >
      <div className="product-card">
        <h3>{product.name}</h3>
        <p>{product.description}</p>
      </div>
    </TrackView>
  );
}

​
Custom Visibility Threshold

<TrackView
  event="banner_viewed"
  threshold={0.75}  // Track when 75% visible
  delay={2000}       // Wait 2 seconds before tracking
  properties={{ banner_position: 'hero' }}
>
  <Banner />
</TrackView>

​
Track Content Section

<TrackView
  event="pricing_section_viewed"
  properties={{ page: 'homepage' }}
>
  <section id="pricing">
    <PricingTable />
  </section>
</TrackView>

​
Behavior

  • Tracks visibility only once per component instance
  • Uses Intersection Observer for efficient visibility detection
  • Automatically cleans up observer on unmount
  • Respects both threshold and delay before tracking
  • Wraps children in a <div> element with a ref for observation

​
Use Cases

  • Track ad impressions
  • Measure content engagement
  • Monitor which sections users view
  • A/B test visibility of different layouts
  • Track scroll depth to specific elements

Build docs developers (and LLMs) love

Get started for freeTalk to us