HeatmapTracker

​

Overview

​

Props

​

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)

• 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

• heatmap_hover_start - When mouse enters the element
• heatmap_hover_end - When mouse leaves the element

​

Scroll Events (heatmap_scroll)

• 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