diff --git a/src/app/providers.tsx b/src/app/providers.tsx index c47a52a1..6be0fa11 100644 --- a/src/app/providers.tsx +++ b/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 ( - - - - + + + + + - {children} - - - + {children} + + + + ); } diff --git a/src/context/AnalyticsProvider.tsx b/src/context/AnalyticsProvider.tsx new file mode 100644 index 00000000..dfb9f83b --- /dev/null +++ b/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) => void; +} + +const AnalyticsContext = createContext(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) => { + if (GA_TRACKING_ID) { + event("click", { + event_category: "engagement", + event_label: elementName, + page_path: pathname, + ...additionalData, + }); + } + }; + + return ( + + {/* Google Analytics Scripts */} + {GA_TRACKING_ID && ( + <> +