feat: integrate consent-based Google Analytics

frontend/src/components/CookieBanner.jsx

@@ -1,40 +1,78 @@
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { initAnalytics, trackPageView } from '../services/analytics'
 
 export default function CookieBanner() {
-  const [visible, setVisible] = useState(() => !localStorage.getItem('cookieConsent'))
+  const location = useLocation()
 
-  if (!visible) return null
+  const [consent, setConsent] = useState(() =>
+    localStorage.getItem('cookieConsent')
+  )
+
+  const visible = consent === null
+
+  // Si le consentement avait déjà été donné lors d'une précédente visite,
+  // Analytics est initialisé au chargement de l'application.
+  useEffect(() => {
+    if (consent !== 'accepted') return
+
+    initAnalytics()
+    trackPageView(location.pathname + location.search)
+  }, [consent, location.pathname, location.search])
 
   const handleChoice = (choice) => {
     localStorage.setItem('cookieConsent', choice)
-    setVisible(false)
+    setConsent(choice)
+
+    if (choice === 'accepted') {
+      initAnalytics()
+      trackPageView(location.pathname + location.search)
+    }
   }
 
+  if (!visible) return null
+
   return (
     <div className="fixed bottom-0 left-0 right-0 z-50 px-4 py-4 bg-white border-t border-gray-200 shadow-lg">
       <div className="max-w-5xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
+
         <div className="flex-1">
-          <p className="text-sm font-semibold text-gray-800 mb-1">Ce site utilise des cookies</p>
+          <p className="text-sm font-semibold text-gray-800 mb-1">
+            Gestion des cookies
+          </p>
+
           <p className="text-xs text-gray-500 leading-relaxed">
-            Nous utilisons des cookies essentiels au fonctionnement du site. En continuant votre navigation, vous acceptez leur utilisation conformément à notre{' '}
-            <Link to="/confidentialite" className="text-[#006B6B] hover:underline">politique de confidentialité</Link>.
+            Les cookies strictement nécessaires au fonctionnement du site sont
+            utilisés automatiquement. Avec votre accord, nous utilisons également
+            Google Analytics afin de mesurer l'audience et améliorer le site. Vous
+            pouvez accepter ou refuser ces cookies statistiques. Consultez notre{' '}
+            <Link
+              to="/confidentialite"
+              className="text-[#006B6B] hover:underline"
+            >
+              politique de confidentialité
+            </Link>.
           </p>
         </div>
+
         <div className="flex gap-2 flex-shrink-0 w-full sm:w-auto">
           <button
+            type="button"
             onClick={() => handleChoice('refused')}
             className="flex-1 sm:flex-none border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
           >
             Refuser
           </button>
+
           <button
+            type="button"
             onClick={() => handleChoice('accepted')}
             className="flex-1 sm:flex-none bg-[#006B6B] hover:bg-[#005959] text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
           >
             Accepter
           </button>
         </div>
+
       </div>
     </div>
   )