103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export default function AnalyticsTracker() {
|
|
const pathname = usePathname();
|
|
const startTimeRef = useRef<number>(Date.now());
|
|
|
|
// Helper to send events
|
|
const sendEvent = async (data: {
|
|
type: string;
|
|
path: string;
|
|
label?: string;
|
|
value?: number;
|
|
metadata?: any;
|
|
}) => {
|
|
try {
|
|
// Use standard fetch for development reliability
|
|
await fetch('/api/analytics', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
} catch (err) {
|
|
console.error('[Analytics] Error:', err);
|
|
}
|
|
};
|
|
|
|
// 1. Track Page Views
|
|
useEffect(() => {
|
|
// Attempt to get userId from localStorage (common in this app's auth setup)
|
|
let userId = null;
|
|
try {
|
|
const userStr = localStorage.getItem('user');
|
|
if (userStr) {
|
|
const user = JSON.parse(userStr);
|
|
userId = user.id;
|
|
}
|
|
} catch (e) {}
|
|
|
|
sendEvent({
|
|
type: 'PAGE_VIEW',
|
|
path: pathname,
|
|
metadata: {
|
|
userAgent: navigator.userAgent,
|
|
screen: `${window.innerWidth}x${window.innerHeight}`,
|
|
referrer: document.referrer,
|
|
userId: userId
|
|
}
|
|
});
|
|
|
|
// Reset start time for dwell time calculation
|
|
startTimeRef.current = Date.now();
|
|
|
|
// 2. Track Dwell Time on cleanup (when leaving page)
|
|
return () => {
|
|
const dwellTime = Math.round((Date.now() - startTimeRef.current) / 1000);
|
|
if (dwellTime > 0) {
|
|
sendEvent({
|
|
type: 'DWELL_TIME',
|
|
path: pathname,
|
|
value: dwellTime,
|
|
});
|
|
}
|
|
};
|
|
}, [pathname]);
|
|
|
|
// 3. Track Global Clicks
|
|
useEffect(() => {
|
|
const handleClick = (e: MouseEvent) => {
|
|
const target = e.target as HTMLElement;
|
|
|
|
// Look for clickable elements (buttons, links)
|
|
const clickable = target.closest('button, a, [role="button"]');
|
|
if (clickable) {
|
|
const label = clickable.textContent?.trim().slice(0, 50) ||
|
|
(clickable as HTMLAnchorElement).href ||
|
|
clickable.getAttribute('aria-label') ||
|
|
'Unnamed Action';
|
|
|
|
sendEvent({
|
|
type: 'CLICK',
|
|
path: window.location.pathname,
|
|
label,
|
|
metadata: {
|
|
tagName: clickable.tagName,
|
|
id: clickable.id,
|
|
className: clickable.className,
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
window.addEventListener('click', handleClick);
|
|
return () => window.removeEventListener('click', handleClick);
|
|
}, []);
|
|
|
|
return null; // Invisible component
|
|
}
|