feat : add GA

package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^5.13.4",
     "@mui/x-data-grid": "^6.19.4",
     "chess.js": "^1.0.0-beta.7",
+    "firebase": "^10.6.0",
     "idb": "^8.0.0",
     "jotai": "^2.6.4",
     "next": "13.5.6",

src/lib/firebase.ts

@@ -0,0 +1,27 @@
+import { FirebaseOptions, initializeApp } from "firebase/app";
+import { getAnalytics, isSupported, logEvent } from "firebase/analytics";
+
+const firebaseConfig: FirebaseOptions = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const logAnalyticsEvent = async (
+  eventName: string,
+  eventParams?: Record<string, unknown>
+) => {
+  if (window.location.hostname === "localhost") return;
+
+  const supported = await isSupported();
+  if (!supported) return;
+
+  const analytics = getAnalytics(app);
+  logEvent(analytics, eventName, eventParams);
+};

src/pages/index.tsx

@@ -2,9 +2,9 @@ import { useChessActions } from "@/hooks/useChess";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
-import AnalyzePanel from "@/sections/analysis/reviewPanelHeader/analyzePanel";
+import AnalyzePanel from "@/sections/analysis/analyzePanel";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
-import ArrowOptions from "@/sections/analysis/reviewPanelToolbar/arrowOptions";
+import ArrowOptions from "@/sections/analysis/arrowOptions";
 import {
   boardAtom,
   boardOrientationAtom,

src/sections/analysis/analyzePanel.tsx

@@ -6,7 +6,7 @@ import {
   engineMultiPvAtom,
   gameAtom,
   gameEvalAtom,
-} from "../states";
+} from "./states";
 import { useAtomValue, useSetAtom } from "jotai";
 import { getFens } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
@@ -14,6 +14,7 @@ import { LoadingButton } from "@mui/lab";
 import Slider from "@/components/slider";
 import { useEngine } from "@/hooks/useEngine";
 import { EngineName } from "@/types/enums";
+import { logAnalyticsEvent } from "@/lib/firebase";
 
 export default function AnalyzePanel() {
   const engine = useEngine(EngineName.Stockfish16);
@@ -47,6 +48,13 @@ export default function AnalyzePanel() {
     if (gameFromUrl) {
       setGameEval(gameFromUrl.id, newGameEval);
     }
+
+    logAnalyticsEvent("analyze_game", {
+      engine: EngineName.Stockfish16,
+      depth: engineDepth,
+      multiPv: engineMultiPv,
+      nbPositions: 1,
+    });
   };
 
   return (

src/sections/analysis/arrowOptions.tsx

@@ -4,7 +4,7 @@ import {
   gameEvalAtom,
   showBestMoveArrowAtom,
   showPlayerMoveArrowAtom,
-} from "../states";
+} from "./states";
 
 export default function ArrowOptions() {
   const gameEval = useAtomValue(gameEvalAtom);

src/sections/analysis/reviewPanelBody/index.tsx

@@ -1,7 +1,7 @@
 import { Icon } from "@iconify/react";
 import { Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom, engineMultiPvAtom, gameAtom } from "./states";
+import { boardAtom, engineMultiPvAtom, gameAtom } from "../states";
 import LineEvaluation from "./lineEvaluation";
 import { useCurrentMove } from "@/hooks/useCurrentMove";
 import { LineEval } from "@/types/eval";

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -1,7 +1,7 @@
 import { LineEval } from "@/types/eval";
 import { ListItem, Skeleton, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom } from "./states";
+import { boardAtom } from "../states";
 import { moveLineUciToSan } from "@/lib/chess";
 
 interface Props {