Hooks

useMentiqAnalytics

Core hook for accessing the analytics instance and tracking methods.

Returns

(event: string, properties?: any) => void

Track custom events

(properties?: any) => void

Track page views

(userId: string, properties?: any) => void

Identify users

() => void

Reset user identity

() => Promise<void>

Flush pending events

(error: string | Error, properties?: any) => void

Track custom errors

AnalyticsInstance

Raw analytics instance

Usage

Basic Tracking
User Identification
Page Tracking

import { useMentiqAnalytics } from 'mentiq-sdk';

function Button() {
  const { track } = useMentiqAnalytics();

  const handleClick = () => {
    track('button_clicked', {
      button_name: 'Subscribe',
      location: 'header',
    });
  };

  return <button onClick={handleClick}>Subscribe</button>;
}

import { useMentiqAnalytics } from 'mentiq-sdk';

function UserProfile({ user }) {
  const { identify } = useMentiqAnalytics();

  useEffect(() => {
    identify(user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription,
    });
  }, [user, identify]);

  return <div>Welcome, {user.name}!</div>;
}

import { useMentiqAnalytics } from 'mentiq-sdk';

function Dashboard() {
  const { page } = useMentiqAnalytics();

  useEffect(() => {
    page({
      title: 'Dashboard',
      category: 'App',
    });
  }, [page]);

  return <div>Dashboard Content</div>;
}

usePageTracking

Automatically track page views when component mounts.

Parameters

EventProperties

Optional properties to include with the page view

Usage

import { usePageTracking } from 'mentiq-sdk';

function AboutPage() {
  usePageTracking({
    title: 'About Us',
    category: 'Marketing',
  });

  return <div>About Us Content</div>;
}

useInteractionTracking

Track user interactions like clicks, hovers, and views.

Returns

(element: string, properties?: EventProperties) => void

Track element clicks

(element: string, properties?: EventProperties) => void

Track element hovers

(element: string, properties?: EventProperties) => void

Track element views

Usage

import { useInteractionTracking } from 'mentiq-sdk';

function ProductCard({ product }) {
  const { trackClick, trackHover } = useInteractionTracking();

  return (
    <div
      onMouseEnter={() => trackHover('product_card', { product_id: product.id })}
      onClick={() => trackClick('product_card', { product_id: product.id })}
    >
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
}

useElementTracking

Track when an element becomes visible using Intersection Observer.

Parameters

React.RefObject<HTMLElement>

required

Reference to the element to track

string

default:"element_viewed"

Event name to track

EventProperties

Properties to include with the event

object

Tracking options

threshold: Visibility threshold (0-1, default: 0.5)
delay: Delay before tracking in ms (default: 1000)
once: Track only once (default: true)

Usage

import { useElementTracking } from 'mentiq-sdk';
import { useRef } from 'react';

function Hero() {
  const heroRef = useRef<HTMLDivElement>(null);

  useElementTracking(
    heroRef,
    'hero_viewed',
    { section: 'homepage' },
    { threshold: 0.8, delay: 2000 }
  );

  return <div ref={heroRef}>Hero Content</div>;
}

useSessionTracking

Access current session data and metrics.

Returns

SessionData

Complete session data object

string

Current session ID

boolean

Whether session is currently active

number

Session duration in milliseconds

number

Number of page views in session

number

Number of clicks in session

number

Maximum scroll depth percentage

Usage

import { useSessionTracking } from 'mentiq-sdk';

function SessionDebugger() {
  const { sessionId, duration, pageViews, clicks } = useSessionTracking();

  return (
    <div>
      <p>Session: {sessionId}</p>
      <p>Duration: {Math.round(duration / 1000)}s</p>
      <p>Pages: {pageViews}</p>
      <p>Clicks: {clicks}</p>
    </div>
  );
}

useErrorTracking

Automatically track JavaScript errors and unhandled promise rejections.

Returns

(error: Error, properties?: EventProperties) => void

Manually track JavaScript errors

(message: string, properties?: EventProperties) => void

Track custom error messages

Usage

Auto-Tracking
Manual Tracking

import { useErrorTracking } from 'mentiq-sdk';

function App() {
  // Automatically tracks all JS errors and unhandled rejections
  useErrorTracking();

  return <YourApp />;
}

import { useErrorTracking } from 'mentiq-sdk';

function DataFetcher() {
  const { trackJavaScriptError, trackCustomError } = useErrorTracking();

  const fetchData = async () => {
    try {
      const response = await fetch('/api/data');
      if (!response.ok) {
        trackCustomError('API request failed', {
          status: response.status,
          endpoint: '/api/data',
        });
      }
    } catch (error) {
      trackJavaScriptError(error as Error, {
        context: 'data_fetch',
      });
    }
  };

  return <button onClick={fetchData}>Fetch Data</button>;
}

usePerformanceTracking

Track performance metrics and custom performance measurements.

Returns

(label: string) => { start: () => void; end: () => void }

Create custom performance measurements

Usage

Auto-Tracking
Custom Measurements

import { usePerformanceTracking } from 'mentiq-sdk';

function App() {
  // Automatically tracks page load performance
  usePerformanceTracking();

  return <YourApp />;
}

import { usePerformanceTracking } from 'mentiq-sdk';

function DataProcessor() {
  const { measureCustomPerformance } = usePerformanceTracking();

  const processData = () => {
    const measurement = measureCustomPerformance('data_processing');
    
    measurement?.start();
    // ... expensive operation
    measurement?.end();
  };

  return <button onClick={processData}>Process</button>;
}

Automatically tracks:

Load time
DOM ready time
First paint
First contentful paint

useAnalytics

Alias for useMentiqAnalytics for backward compatibility.

import { useAnalytics } from 'mentiq-sdk';

// Same as useMentiqAnalytics
const { track, identify } = useAnalytics();

Get Started

Core Concepts

React Integration

Features

Guides

Examples

useMentiqAnalytics

Returns

Usage

usePageTracking

Parameters

Usage

useInteractionTracking

Returns

Usage

useElementTracking

Parameters

Usage

useSessionTracking

Returns

Usage

useErrorTracking

Returns

Usage

usePerformanceTracking

Returns

Usage

useAnalytics

​useMentiqAnalytics

​Returns

​Usage

​usePageTracking

​Parameters

​Usage

​useInteractionTracking

​Returns

​Usage

​useElementTracking

​Parameters

​Usage

​useSessionTracking

​Returns

​Usage

​useErrorTracking

​Returns

​Usage

​usePerformanceTracking

​Returns

​Usage

​useAnalytics

useMentiqAnalytics

Returns

Usage

usePageTracking

Parameters

Usage

useInteractionTracking

Returns

Usage

useElementTracking

Parameters

Usage

useSessionTracking

Returns

Usage

useErrorTracking

Returns

Usage

usePerformanceTracking

Returns

Usage

useAnalytics