useSessionTracking

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>
  );
}

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;
}

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>;
}

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;
}