Components

TrackView

Automatically track when an element becomes visible in the viewport using Intersection Observer.

Props

string

default:"element_viewed"

Event name to track

EventProperties

Additional properties to include with the event

ReactNode

required

Content to render and track

number

Percentage of element that needs to be visible (0-1)

number

default:1000

Delay in milliseconds before tracking

Usage

import { TrackView } from 'mentiq-sdk';

function ProductShowcase() {
  return (
    <TrackView
      event="product_viewed"
      properties={{ product_id: '123', category: 'electronics' }}
      threshold={0.8}
      delay={2000}
    >
      <div className="product">
        <h2>Product Name</h2>
        <p>Product details...</p>
      </div>
    </TrackView>
  );
}

TrackClick

Track click events on wrapped elements.

Props

string

default:"click"

Event name to track

EventProperties

Additional properties to include with the event

ReactNode

required

Content to render and track clicks on

string

Element identifier for the tracked element

Usage

import { TrackClick } from 'mentiq-sdk';

function CallToAction() {
  return (
    <TrackClick
      element="cta_button"
      properties={{ location: 'hero', campaign: 'summer_sale' }}
    >
      <button className="cta-button">
        Get Started
      </button>
    </TrackClick>
  );
}

Automatically captures click coordinates and target element information.

TrackForm

Track form submissions and field changes.

Props

string

required

Unique identifier for the form

ReactNode

required

Form content

boolean

default:true

Whether to track form submissions

boolean

default:false

Whether to track individual field changes

Usage

Basic Form Tracking
Track Field Changes

import { TrackForm } from 'mentiq-sdk';

function ContactForm() {
  return (
    <TrackForm formName="contact_form">
      <input name="name" placeholder="Name" />
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </TrackForm>
  );
}

import { TrackForm } from 'mentiq-sdk';

function SignupForm() {
  return (
    <TrackForm
      formName="signup_form"
      trackSubmit={true}
      trackFieldChanges={true}
    >
      <input name="username" placeholder="Username" />
      <input name="email" type="email" placeholder="Email" />
      <input name="password" type="password" placeholder="Password" />
      <button type="submit">Sign Up</button>
    </TrackForm>
  );
}

TrackScroll

Track scroll depth milestones.

Props

ReactNode

required

Content to render

number[]

Scroll depth percentages to track

Usage

import { TrackScroll } from 'mentiq-sdk';

function BlogPost() {
  return (
    <TrackScroll milestones={[10, 25, 50, 75, 90, 100]}>
      <article>
        <h1>Blog Post Title</h1>
        <p>Long content...</p>
      </article>
    </TrackScroll>
  );
}

TrackTime

Track time spent on page at specific intervals.

Props

ReactNode

required

Content to render

string

default:"time_on_page"

Event name to track

number[]

Time intervals in seconds to track

Usage

import { TrackTime } from 'mentiq-sdk';

function VideoPage() {
  return (
    <TrackTime
      event="video_page_time"
      intervals={[15, 30, 60, 120, 300]}
    >
      <div>
        <h1>Video Tutorial</h1>
        <video src="tutorial.mp4" />
      </div>
    </TrackTime>
  );
}

Automatically tracks final time on page when component unmounts.

AnalyticsErrorBoundary

Error boundary that automatically tracks React errors.

Props

ReactNode

required

Components to monitor for errors

ReactNode

Component to display when an error occurs

(error: Error, errorInfo: React.ErrorInfo) => void

Custom error handler callback

Usage

import { AnalyticsErrorBoundary } from 'mentiq-sdk';

function App() {
  return (
    <AnalyticsErrorBoundary
      fallback={<div>Something went wrong. Please refresh.</div>}
      onError={(error, errorInfo) => {
        console.error('React error:', error, errorInfo);
      }}
    >
      <YourApp />
    </AnalyticsErrorBoundary>
  );
}

PerformanceMonitor

Monitor and track component render performance.

Props

ReactNode

required

Components to monitor

boolean

default:true

Whether to measure render performance

string

default:"unknown"

Name to identify the component in analytics

Usage

import { PerformanceMonitor } from 'mentiq-sdk';

function Dashboard() {
  return (
    <PerformanceMonitor
      measureRender={true}
      componentName="dashboard"
    >
      <div>
        {/* Complex dashboard content */}
      </div>
    </PerformanceMonitor>
  );
}

HeatmapTracker

Track user interactions for heatmap visualization.

Props

ReactNode

required

Content to track

boolean

default:true

Track click positions

boolean

default:false

Track hover events

boolean

default:false

Track scroll events

string

default:"heatmap-element"

Element identifier

Usage

import { HeatmapTracker } from 'mentiq-sdk';

function ProductPage() {
  return (
    <HeatmapTracker
      element="product_page"
      trackClicks={true}
      trackHovers={true}
      trackScrolls={false}
    >
      <div className="product-details">
        <img src="product.jpg" />
        <h1>Product Name</h1>
        <p>Description...</p>
      </div>
    </HeatmapTracker>
  );
}

Captures exact pixel coordinates relative to both the element and the page.

SessionMonitor

Monitor session activity and track inactivity periods.

Props

ReactNode

required

Content to render

boolean

default:true

Whether to track user inactivity

number

default:60000

Inactivity threshold in milliseconds (default: 1 minute)

Usage

import { SessionMonitor } from 'mentiq-sdk';

function App() {
  return (
    <SessionMonitor
      trackInactivity={true}
      inactivityThreshold={120000} // 2 minutes
    >
      <YourApp />
    </SessionMonitor>
  );
}

withTracking

Higher-Order Component for automatic component view tracking.

Signature

function withTracking<P extends object>(
  WrappedComponent: React.ComponentType<P>,
  componentName: string,
  trackProps?: (props: P) => EventProperties
): React.ComponentType<P>

Usage

Basic Usage
Track Props

import { withTracking } from 'mentiq-sdk';

function ProductCard({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
}

export default withTracking(ProductCard, 'product_card');

import { withTracking } from 'mentiq-sdk';

function UserProfile({ user }) {
  return <div>Profile for {user.name}</div>;
}

export default withTracking(
  UserProfile,
  'user_profile',
  (props) => ({
    user_id: props.user.id,
    user_tier: props.user.tier,
  })
);

All tracking components are designed to be SSR-safe and will only initialize tracking on the client side.

Get Started

Core Concepts

React Integration

Features

Guides

Examples

TrackView

Props

Usage

TrackClick

Props

Usage

TrackForm

Props

Usage

TrackScroll

Props

Usage

TrackTime

Props

Usage

AnalyticsErrorBoundary

Props

Usage

PerformanceMonitor

Props

Usage

HeatmapTracker

Props

Usage

SessionMonitor

Props

Usage

withTracking

Signature

Usage

​TrackView

​Props

​Usage

​TrackClick

​Props

​Usage

​TrackForm

​Props

​Usage

​TrackScroll

​Props

​Usage

​TrackTime

​Props

​Usage

​AnalyticsErrorBoundary

​Props

​Usage

​PerformanceMonitor

​Props

​Usage

​HeatmapTracker

​Props

​Usage

​SessionMonitor

​Props

​Usage

​withTracking

​Signature

​Usage

TrackView

Props

Usage

TrackClick

Props

Usage

TrackForm

Props

Usage

TrackScroll

Props

Usage

TrackTime

Props

Usage

AnalyticsErrorBoundary

Props

Usage

PerformanceMonitor

Props

Usage

HeatmapTracker

Props

Usage

SessionMonitor

Props

Usage

withTracking

Signature

Usage