useMentiqAnalytics
Core hook for accessing the analytics instance and tracking methods.
Returns
track
(event: string, properties?: any) => void
Track custom events
page
(properties?: any) => void
Track page views
identify
(userId: string, properties?: any) => void
Identify users
trackCustomError
(error: string | Error, properties?: any) => void
Track custom errors
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
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
trackClick
(element: string, properties?: EventProperties) => void
Track element clicks
trackHover
(element: string, properties?: EventProperties) => void
Track element hovers
trackView
(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
elementRef
React.RefObject<HTMLElement>
required
Reference to the element to track
event
string
default:"element_viewed"
Event name to track
Properties to include with the event
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
Complete session data object
Whether session is currently active
Session duration in milliseconds
Number of page views in session
Number of clicks in session
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
trackJavaScriptError
(error: Error, properties?: EventProperties) => void
Manually track JavaScript errors
trackCustomError
(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>;
}
Returns
measureCustomPerformance
(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();