streaper2
b227657f19
Modèle de Données : Ajout de la table AnalyticsEvent dans prisma/schema.prisma pour suivre les vues de pages, les clics et le temps de rétention (DWELL_TIME). API Backend : Création de la route app/api/analytics/route.ts pour enregistrer les événements en base de données. Tracking Client : Création du composant AnalyticsTracker.tsx (intégré dans le layout principal) qui capture automatiquement : Le changement de page (Page Views). Les clics sur les boutons et liens importants. Le temps passé sur chaque page. 2. Intégration Base de Données (PostgreSQL/Prisma) Fiches Entreprises : Mise à jour de app/directory/[id]/page.tsx pour récupérer les données réelles depuis PostgreSQL via Prisma au lieu d'utiliser les données de test (mockData). Navigation Dashboard : Correction du bouton "Voir ma fiche" dans le tableau de bord pour qu'il redirige correctement vers le profil public de l'entrepreneur. 3. Administration & Metrics Nouvelle Application Admin : Initialisation d'un dossier admin/ (application Next.js séparée) destinée à la gestion de la plateforme et à la visualisation des statistiques (Metrics & Analytics). 4. Authentification & Inscription Nouvelle Page : Création de app/register/page.tsx pour permettre l'inscription des nouveaux utilisateurs. Gestion de Session : Amélioration de UserProvider.tsx pour une meilleure gestion de l'état utilisateur à travers l'application. 5. Maintenance & Types Mise à jour des types globaux dans types.ts et rafraîchissement du package-lock.json suite à l'ajout de dépendances.
91 lines
2.3 KiB
TypeScript
91 lines
2.3 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(() => {
|
|
sendEvent({
|
|
type: 'PAGE_VIEW',
|
|
path: pathname,
|
|
metadata: {
|
|
userAgent: navigator.userAgent,
|
|
screen: `${window.innerWidth}x${window.innerHeight}`,
|
|
}
|
|
});
|
|
|
|
// 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
|
|
}
|