Overview
The useSessionTracking hook provides real-time access to user session data including session ID, activity status, duration, page views, clicks, and scroll depth.
Usage
import { useSessionTracking } from 'mentiq-sdk';
function SessionMonitor() {
const {
sessionId,
isActive,
duration,
pageViews,
clicks,
scrollDepth,
sessionData
} = useSessionTracking();
return (
<div>
<p>Session ID: {sessionId}</p>
<p>Active: {isActive ? 'Yes' : 'No'}</p>
<p>Duration: {Math.floor(duration / 1000)}s</p>
<p>Page Views: {pageViews}</p>
<p>Clicks: {clicks}</p>
<p>Scroll Depth: {scrollDepth}%</p>
</div>
);
}
Returns
Unique identifier for the current sessionconst { sessionId } = useSessionTracking();
console.log(sessionId); // "sess_abc123xyz"
Whether the session is currently activeReturns true if the user is actively engaged, false otherwise. Defaults to false if no session data is available.
Session duration in millisecondsTime elapsed since the session started. Defaults to 0 if no session data is available.const { duration } = useSessionTracking();
const seconds = Math.floor(duration / 1000);
const minutes = Math.floor(seconds / 60);
Number of pages viewed in the current sessionDefaults to 0 if no session data is available.
Number of clicks recorded in the current sessionDefaults to 0 if no session data is available.
Maximum scroll depth as a percentage (0-100)Indicates how far down the page the user has scrolled. Defaults to 0 if no session data is available.
Complete session data objectContains all session metrics including the fields above plus additional metadata.
Type Definitions
SessionData
interface SessionData {
sessionId?: string;
startTime: number;
endTime?: number;
duration?: number;
pageViews: number;
clicks: number;
scrollDepth: number;
maxScrollDepth: number;
isActive: boolean;
events: string[];
scrollEvents?: number;
clickEvents?: number;
pageChanges?: number;
engagementScore?: number;
bounceLikelihood?: number;
channel?: string;
}
Examples
Display Session Timer
import { useSessionTracking } from 'mentiq-sdk';
import { useEffect, useState } from 'react';
function SessionTimer() {
const { duration } = useSessionTracking();
const [displayTime, setDisplayTime] = useState('0:00');
useEffect(() => {
const totalSeconds = Math.floor(duration / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
setDisplayTime(`${minutes}:${seconds.toString().padStart(2, '0')}`);
}, [duration]);
return <div>Session Duration: {displayTime}</div>;
}
Engagement Warning
import { useSessionTracking } from 'mentiq-sdk';
import { useEffect } from 'react';
function EngagementMonitor() {
const { isActive, duration, pageViews, clicks } = useSessionTracking();
useEffect(() => {
// Warn if user has been inactive for too long
if (!isActive && duration > 300000) { // 5 minutes
console.warn('User appears to be inactive');
}
// Track low engagement
if (duration > 60000 && pageViews === 1 && clicks < 3) {
console.log('Low engagement detected');
}
}, [isActive, duration, pageViews, clicks]);
return null;
}
Notes
Session data is automatically tracked when the analytics SDK is initialized. This hook provides reactive access to that data.
Use session data to understand user engagement patterns and identify when users might be at risk of bouncing.