Merge pull request #156 from Soohyuniii/fix/GA4-설정-변경

fix: GA4 설정 변경

Author: Soohyuniii

src/App.tsx

@@ -23,24 +23,42 @@ import { initGA, trackPageView } from "@/libs/analytics";
 
 const PageTracker = () => {
   const location = useLocation();
+  const { pathname, state } = location;
 
   const trackedPaths = [
-    { path: "/", label: "home" },
-    { path: "/login", label: "login" },
-    { path: "/contents" }
+    { path: "/", page: "홈", element: "" },
+    { path: "/login", page: "로그인/회원가입", element: "로그인" },
+    { path: "/contents", page: "일반콘텐츠", element: "" },
+    { path: "/my-info", page: "내 정보", element: "" },
+    { path: "/chat", page: "채팅방", element: "" },
+    { path: "/select-info", page: "빠른 대화 설정", element: "" },
+    { path: "/select-info", page: "친구 저장", element: "대화 시작하기" }
   ];
 
   useEffect(() => {
-    const { pathname } = location;
+    const trackedContentPaths = ["/contents/1", "/contents/2"];
 
-    trackedPaths.forEach(({ path, label }) => {
-      if (path === "/contents" && pathname.startsWith(path)) {
-        trackPageView(label || pathname);
-      } else if (pathname === path) {
-        trackPageView(label || pathname);
+    trackedPaths.forEach(({ path, page, element }) => {
+      // 콘텐츠 상세 페이지 (일반 콘텐츠만 추적)
+      if (trackedContentPaths.includes(pathname)) {
+        if (path === "/contents") {
+          trackPageView(path, { page, element });
+        }
+      }
+      // select-info 페이지에서 state로 분기
+      else if (pathname === "/select-info" && path === pathname) {
+        if (state === "fastFriend" && page === "빠른 대화 설정") {
+          trackPageView(path, { page, element });
+        } else if (state === "virtualFriend" && page === "친구 저장") {
+          trackPageView(path, { page, element });
+        }
+      }
+      // 나머지 일반 path
+      else if (pathname === path && path !== "/select-info") {
+        trackPageView(path, { page, element });
       }
     });
-  }, [location.pathname]);
+  }, [location.pathname, location.state]);
 
   return null;
 };

src/libs/analytics.ts

@@ -4,30 +4,28 @@ const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID || "";
 
 const isProduction = import.meta.env.MODE === "production";
 
-const initGA = () => {
+export const initGA = () => {
   console.log("isProduction", isProduction);
   console.log("ID", GA_MEASUREMENT_ID);
   if (isProduction && GA_MEASUREMENT_ID) {
+    console.log("initGA");
     ReactGA.initialize(GA_MEASUREMENT_ID);
   }
 };
 
-const trackPageView = (path: string) => {
-  console.log("trackPageView 1");
+export const trackPageView = (url: string, params?: Record<string, string>) => {
   if (isProduction && GA_MEASUREMENT_ID) {
-    console.log("trackPageView 2");
-    ReactGA.send({ hitType: "pageview", page: path });
+    console.log("trackPageView");
+    ReactGA.gtag("event", "page_view", {
+      page_path: url,
+      ...params
+    });
   }
 };
 
-const trackEvent = (category: string, action: string, label?: string) => {
+export const trackEvent = (name: string, params?: Record<string, string>) => {
   if (isProduction && GA_MEASUREMENT_ID) {
-    ReactGA.event({
-      category,
-      action,
-      label
-    });
+    console.log("trackEvent");
+    ReactGA.event(name, params);
   }
 };
-
-export { initGA, trackPageView, trackEvent };

src/pages/Content.tsx

@@ -178,8 +178,10 @@ const Content = () => {
 
   const handleStartChat = async () => {
     try {
-      trackEvent("User", "Clicked Start Chat Button", "Start Chat");
-
+      trackEvent("Click", {
+        page: "일반 콘텐츠",
+        element: "대화 시작하기"
+      });
       const response = await instance.post("/api/fast-friend");
       console.log("Success!!", response.data);
     } catch (error) {