Skip to main content

​
Overview

The TrackClick component wraps your UI elements to automatically track click interactions. It captures click coordinates and target information, making it ideal for tracking button clicks, link interactions, and user engagement.

​
Props

​
children
ReactNode
required
The content to render and track clicks for.
​
event
string
default:"click"
The event name to track when the element is clicked.
​
properties
EventProperties
Additional properties to include with the tracked event.
​
element
string
Identifier for the element being tracked. Defaults to “unknown”.

​
Usage

​
Basic Usage

import { TrackClick } from 'mentiq-sdk';

function CallToAction() {
  return (
    <TrackClick
      event="cta_clicked"
      element="signup-button"
      properties={{ location: 'hero', variant: 'primary' }}
    >
      <button className="cta-button">
        Sign Up Now
      </button>
    </TrackClick>
  );
}

<TrackClick
  event="nav_link_clicked"
  element="pricing-link"
  properties={{ section: 'header' }}
>
  <a href="/pricing">Pricing</a>
</TrackClick>

​
Track Card Interactions

<TrackClick
  event="feature_card_clicked"
  element="analytics-feature"
  properties={{
    feature_name: 'Real-time Analytics',
    position: 1
  }}
>
  <div className="feature-card">
    <h3>Real-time Analytics</h3>
    <p>Track user behavior as it happens</p>
  </div>
</TrackClick>

​
Automatic Properties

In addition to your custom properties, TrackClick automatically includes:
  • target - The HTML tag name of the clicked element
  • x - The X coordinate of the click (clientX)
  • y - The Y coordinate of the click (clientY)

​
Behavior

  • Wraps children in a <div> element with click handler
  • Captures click coordinates relative to viewport
  • Merges automatic properties with custom properties
  • Does not prevent default click behavior or stop propagation

​
Use Cases

  • Track button clicks and conversions
  • Monitor navigation patterns
  • Analyze user engagement with UI elements
  • A/B test different call-to-action variants
  • Measure feature adoption
  • Build click heatmaps

Build docs developers (and LLMs) love

Get started for freeTalk to us