Skip to main content

​
Overview

The HeatmapTracker component captures detailed interaction data including clicks, hovers, and scrolls within a specific element. This data can be used to generate heatmaps showing user behavior patterns.

​
Props

​
children
ReactNode
required
The content to render and track interactions for.
​
trackClicks
boolean
default:true
Whether to track click interactions within the element.
​
trackHovers
boolean
default:false
Whether to track when users hover over the element.
​
trackScrolls
boolean
default:false
Whether to track scroll events and element visibility.
​
element
string
default:"heatmap-element"
Identifier for the tracked element used in analytics events.

​
Usage

​
Track Clicks Only

import { HeatmapTracker } from 'mentiq-sdk';

function ProductPage() {
  return (
    <HeatmapTracker
      element="product-details"
      trackClicks={true}
    >
      <div className="product-details">
        <ProductImage />
        <ProductInfo />
        <AddToCartButton />
      </div>
    </HeatmapTracker>
  );
}

​
Track All Interactions

<HeatmapTracker
  element="landing-hero"
  trackClicks={true}
  trackHovers={true}
  trackScrolls={true}
>
  <section className="hero">
    <h1>Welcome</h1>
    <CTAButton />
  </section>
</HeatmapTracker>

​
Track Hover Behavior

<HeatmapTracker
  element="navigation-menu"
  trackClicks={false}
  trackHovers={true}
>
  <nav>
    <MenuItem>Products</MenuItem>
    <MenuItem>Pricing</MenuItem>
    <MenuItem>About</MenuItem>
  </nav>
</HeatmapTracker>

​
Tracked Events

​
Click Events (heatmap_click)

Tracked when trackClicks is enabled:
  • element - Element identifier
  • x - X coordinate relative to element
  • y - Y coordinate relative to element
  • page_x - X coordinate relative to viewport
  • page_y - Y coordinate relative to viewport
  • element_width - Width of the tracked element
  • element_height - Height of the tracked element

​
Hover Events

Tracked when trackHovers is enabled:
  • heatmap_hover_start - When mouse enters the element
  • heatmap_hover_end - When mouse leaves the element

​
Scroll Events (heatmap_scroll)

Tracked when trackScrolls is enabled:
  • element - Element identifier
  • scroll_top - Current scroll position
  • element_top - Element’s position from top of page
  • element_visible - Whether element is currently visible

​
Behavior

  • Wraps children in a <div> element with event listeners
  • All event listeners use passive mode for better performance
  • Automatically cleans up all listeners on unmount
  • Click coordinates are calculated relative to element bounds
  • Scroll tracking uses window scroll events

​
Use Cases

  • Generate click heatmaps for landing pages
  • Analyze user attention with hover tracking
  • Understand scroll behavior and content visibility
  • Optimize page layouts based on interaction patterns
  • Identify dead zones with low engagement
  • A/B test different UI arrangements

Build docs developers (and LLMs) love

Get started for freeTalk to us