Feature/ga4

package.json

@@ -20,6 +20,7 @@
     "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
+    "react-ga4": "^2.1.0",
     "react-markdown": "^10.0.0",
     "react-router": "^7.1.5",
     "react-router-dom": "^7.2.0",

src/App.jsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router";
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
 import Home from "./pages/Home";
 import BoothHome from "./pages/BoothHome";

src/components/RouteTracker.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import ReactGA from "react-ga4";
+
+export default function RouteTracker() {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.log("[PageTracker] 실행됨:", location.pathname);
+    if (ReactGA.isInitialized) {
+      ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }
+  }, [location]);
+
+  return null;
+}

src/main.jsx

@@ -1,13 +1,18 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import { BrowserRouter } from 'react-router'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.jsx";
+import ReactGA from "react-ga4";
+import RouteTracker from "./components/RouteTracker.jsx";
 
-createRoot(document.getElementById('root')).render(
+ReactGA.initialize(import.meta.env.VITE_GA_ID);
+
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <BrowserRouter>
+      <RouteTracker />
       <App />
     </BrowserRouter>
-  </StrictMode>,
-)
+  </StrictMode>
+);

src/pages/Home.jsx

@@ -9,6 +9,7 @@ import github from "../assets/github_3x.png";
 import apply from "../assets/apply.svg";
 import "./Home.css";
 import WikiMiniButton from "../components/WikiMiniButton";
+import { EventTrigger } from "../utils/gatriggers";
 
 export default function Home() {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); // 768px 이하를 모바일로 간주
@@ -118,16 +119,68 @@ function PublicMobileView() {
       </div>
       <div className="recruitment">신입부원 모집 3월 5일 마감!</div>
       <footer className="mobile-footer">
-        <a href="https://dgucaps.kr" target="_blank">
+        <a
+          href="https://dgucaps.kr"
+          target="_blank"
+          onClick={(e) => {
+            e.preventDefault();
+            EventTrigger({
+              action: "click",
+              category: "OutBound",
+              label: "https://dgucaps.kr",
+              value: 1,
+            });
+            window.open("https://dgucaps.kr");
+          }}
+        >
           <img className="footer-icon" src={capsCircle} alt="Caps" />
         </a>
-        <a href="https://www.instagram.com/caps_dongguk" target="_blank">
+        <a
+          href="https://www.instagram.com/caps_dongguk"
+          target="_blank"
+          onClick={(e) => {
+            e.preventDefault();
+            EventTrigger({
+              action: "click",
+              category: "OutBound",
+              label: "https://www.instagram.com/caps_dongguk",
+              value: 1,
+            });
+            window.open("https://www.instagram.com/caps_dongguk");
+          }}
+        >
           <img className="footer-icon" src={instagram} alt="Instagram" />
         </a>
-        <a href="https://github.com/CAPS-DGU" target="_blank">
+        <a
+          href="https://github.com/caps-dgu"
+          target="_blank"
+          onClick={(e) => {
+            e.preventDefault();
+            EventTrigger({
+              action: "click",
+              category: "OutBound",
+              label: "https://github.com/caps-dgu",
+              value: 1,
+            });
+            window.open("https://github.com/caps-dgu");
+          }}
+        >
           <img className="footer-icon" src={github} alt="GitHub" />
         </a>
-        <a href="http://forms.gle/8GhWeFvh4c72v7vPA" target="_blank">
+        <a
+          href="http://forms.gle/8GhWeFvh4c72v7vPA"
+          target="_blank"
+          onClick={(e) => {
+            e.preventDefault();
+            EventTrigger({
+              action: "click",
+              category: "OutBound",
+              label: "http://forms.gle/8GhWeFvh4c72v7vPA",
+              value: 1,
+            });
+            window.open("http://forms.gle/8GhWeFvh4c72v7vPA");
+          }}
+        >
           <img className="footer-icon" src={apply} alt="AApply" />
         </a>
       </footer>

src/utils/gatriggers.js

@@ -0,0 +1,16 @@
+import ReactGA from "react-ga4";
+export const PageviewTrigger = (router) => {
+  ReactGA.send({
+    hitType: "pageview",
+    page: router.pathname,
+  });
+};
+
+export const EventTrigger = ({ action, category, label, value }) => {
+  ReactGA.event({
+    action: action,
+    category: category,
+    label: label,
+    value: value,
+  });
+};

yarn.lock

@@ -26,6 +26,7 @@ __metadata:
     react: "npm:^19.0.0"
     react-device-detect: "npm:^2.2.3"
     react-dom: "npm:^19.0.0"
+    react-ga4: "npm:^2.1.0"
     react-markdown: "npm:^10.0.0"
     react-router: "npm:^7.1.5"
     react-router-dom: "npm:^7.2.0"
@@ -4493,6 +4494,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ga4@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "react-ga4@npm:2.1.0"
+  checksum: 10c0/314aa86dd7cb868535f26bfb8b537d3b3c20649c66b2b942fba72e081295441446932a4ae96499231c8a4836ab0a222a97b1bd03633b8cc1477991efe93444cd
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"