Heatmap Tracking

interface HeatmapData {
  x: number;              // X coordinate (pixels)
  y: number;              // Y coordinate (pixels)
  element?: string;       // HTML tag name (e.g., "button")
  selector?: string;      // CSS selector (e.g., "button#cta.primary")
  action: "click" | "move" | "scroll";
  viewport: {
    width: number;        // Viewport width
    height: number;       // Viewport height
  };
}

import { HeatmapTracker } from "mentiq-sdk";

function ProductGrid() {
  return (
    <HeatmapTracker 
      trackClicks={true} 
      trackHovers={true} 
      element="product-grid"
    >
      <div className="grid">
        {/* Your products */}
      </div>
    </HeatmapTracker>
  );
}

<HeatmapTracker element="hero-section">
  <section className="hero">
    <button className="primary-cta">Get Started</button>
    <button className="secondary-cta">Learn More</button>
  </section>
</HeatmapTracker>

function BlogPost({ post }) {
  return (
    <HeatmapTracker element="blog-content" trackClicks={true}>
      <article>
        <h1>{post.title}</h1>
        <div>{post.content}</div>
      </article>
    </HeatmapTracker>
  );
}

<HeatmapTracker element="product-page" trackClicks={true} trackHovers={true}>
  <div>
    <ProductGallery images={product.images} />
    <ProductDetails details={product.details} />
    <AddToCartButton />
  </div>
</HeatmapTracker>

private setupHeatmapTracking(): void {
  const trackClick = (event: MouseEvent) => {
    const heatmapData: HeatmapData = {
      x: event.clientX,
      y: event.clientY,
      element: (event.target as HTMLElement)?.tagName?.toLowerCase(),
      selector: this.getElementSelector(event.target as HTMLElement),
      action: "click",
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
      },
    };

    this.enqueueEvent(createEvent("heatmap", "click", { heatmap: heatmapData }));
  };

  // Debounced mouse movement tracking (500ms)
  const trackMouseMove = debounce((event: MouseEvent) => {
    // ... similar structure for mouse movements
  }, 500);

  // Debounced scroll tracking (1000ms)
  const trackScroll = debounce(() => {
    // ... scroll position tracking
  }, 1000);

  window.addEventListener("click", trackClick);
  window.addEventListener("mousemove", trackMouseMove, { passive: true });
  window.addEventListener("scroll", trackScroll, { passive: true });
}

function App() {
  const isPublicPage = useIsPublicPage();

  return (
    <AnalyticsProvider
      config={{
        apiKey: "your-api-key",
        projectId: "your-project-id",
        enableHeatmapTracking: isPublicPage, // Only track on public pages
      }}
    >
      <YourApp />
    </AnalyticsProvider>
  );
}

// Only track clicks, not movements
<HeatmapTracker trackClicks={true} trackHovers={false}>
  {/* content */}
</HeatmapTracker>