Feat/#79

src/app/providers.tsx

@@ -6,19 +6,22 @@ import RootStyleRegistry from "./RootStyleRegistry";
 import { GlobalErrorBoundary } from "@/components/errorHandling/GlobalErrorBoundary";
 import { ViewTransitions } from "next-view-transitions";
 import PageNavigationProvider from "@/context/PageNavigationProvider";
+import { AnalyticsProvider } from "@/context/AnalyticsProvider";
 
 export default function Providers({ children }: { children: ReactNode }) {
   return (
     <GlobalErrorBoundary>
-      <ViewTransitions>
-        <PageNavigationProvider>
-          <QueryClientBoundary>
-            <ErrorCatcher />
+      <AnalyticsProvider>
+        <ViewTransitions>
+          <PageNavigationProvider>
+            <QueryClientBoundary>
+              <ErrorCatcher />
 
-            <RootStyleRegistry>{children}</RootStyleRegistry>
-          </QueryClientBoundary>
-        </PageNavigationProvider>
-      </ViewTransitions>
+              <RootStyleRegistry>{children}</RootStyleRegistry>
+            </QueryClientBoundary>
+          </PageNavigationProvider>
+        </ViewTransitions>
+      </AnalyticsProvider>
     </GlobalErrorBoundary>
   );
 }

src/context/AnalyticsProvider.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { createContext, useContext, useEffect, ReactNode } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import Script from "next/script";
+import { GA_TRACKING_ID, pageview, event } from "@/utils/gtag";
+
+interface AnalyticsContextType {
+  trackPageView: (pageName?: string) => void;
+  trackClick: (elementName: string, additionalData?: Record<string, any>) => void;
+}
+
+const AnalyticsContext = createContext<AnalyticsContextType | undefined>(undefined);
+
+interface AnalyticsProviderProps {
+  children: ReactNode;
+}
+
+export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // 자동 페이지 뷰 추적
+  useEffect(() => {
+    if (GA_TRACKING_ID) {
+      const url = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
+      pageview(url);
+    }
+  }, [pathname, searchParams]);
+
+  const trackPageView = (pageName?: string) => {
+    if (GA_TRACKING_ID) {
+      const name = pageName || pathname.replace("/", "") || "home";
+      event("page_view", {
+        page_title: name,
+        page_location: window.location.href,
+        page_path: pathname,
+      });
+    }
+  };
+
+  const trackClick = (elementName: string, additionalData?: Record<string, any>) => {
+    if (GA_TRACKING_ID) {
+      event("click", {
+        event_category: "engagement",
+        event_label: elementName,
+        page_path: pathname,
+        ...additionalData,
+      });
+    }
+  };
+
+  return (
+    <AnalyticsContext.Provider value={{ trackPageView, trackClick }}>
+      {/* Google Analytics Scripts */}
+      {GA_TRACKING_ID && (
+        <>
+          <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
+          <Script
+            id="google-analytics"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${GA_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
+        </>
+      )}
+      {children}
+    </AnalyticsContext.Provider>
+  );
+}
+
+export const useAnalytics = () => {
+  const context = useContext(AnalyticsContext);
+  if (context === undefined) {
+    throw new Error("useAnalytics must be used within an AnalyticsProvider");
+  }
+  return context;
+};

src/hooks/useClickTracking.tsx

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { useAnalytics } from "@/context/AnalyticsProvider";
+
+export const useClickTracking = () => {
+  const { trackClick } = useAnalytics();
+
+  const track = useCallback(
+    (elementName: string, additionalData?: Record<string, any>) => {
+      trackClick(elementName, additionalData);
+    },
+    [trackClick]
+  );
+
+  return { track };
+};

src/hooks/usePageTracking.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAnalytics } from "@/context/AnalyticsProvider";
+
+export const usePageTracking = (pageName?: string) => {
+  const { trackPageView } = useAnalytics();
+
+  useEffect(() => {
+    if (pageName) {
+      trackPageView(pageName);
+    }
+  }, [pageName, trackPageView]);
+};

src/page/Home/Home.tsx

@@ -16,9 +16,13 @@ import { isGuestUser } from "@/utils/user";
 
 import { useRouter } from "next/navigation";
 import axios from "axios";
+import { usePageTracking } from "@/hooks/usePageTracking";
+import { useClickTracking } from "@/hooks/useClickTracking";
 
 const Home = () => {
   const { name } = myPageStore();
+  usePageTracking("home");
+  const { track } = useClickTracking();
   const { setSearchTravel, setNotification } = useBackPathStore();
   const router = useRouter();
   console.log();
@@ -41,6 +45,7 @@ const Home = () => {
 
   // 이 부분 추후 유저 id로 대채해야함
   const onClickAlarm = () => {
+    track("알림 링크", { link_text: "알림 페이지" });
     setNotification("/");
     router.push(`/notification`);
   };

src/utils/gtag.ts

@@ -0,0 +1,15 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS || "";
+
+export const pageview = (url: string) => {
+  if (typeof window !== "undefined" && window.gtag) {
+    window.gtag("config", GA_TRACKING_ID, {
+      page_path: url,
+    });
+  }
+};
+
+export const event = (action: string, parameters?: Record<string, any>) => {
+  if (typeof window !== "undefined" && window.gtag) {
+    window.gtag("event", action, parameters);
+  }
+};