1. Système d'Analytics (Nouveauté Majeure)
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.
This commit is contained in:
90
components/AnalyticsTracker.tsx
Normal file
90
components/AnalyticsTracker.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"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
|
||||
}
|
||||
Reference in New Issue
Block a user