Merge pull request #111 from Senity-Waved/feature/#109

[#109][FEATURE] 구글 애널리틱스(GA) 도입

package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
+    "@types/gtag.js": "^0.0.19",
     "axios": "^1.6.7",
     "cookies-next": "^4.1.1",
     "event-source-polyfill": "^1.0.31",

src/lib/ga/gtag.ts

@@ -0,0 +1,26 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: URL) => {
+  if (typeof window.gtag === 'undefined') return;
+
+  window.gtag('config', GA_TRACKING_ID as string, {
+    page_path: url,
+  });
+};
+
+interface GTagEventProps {
+  action: string;
+  category: string;
+  label: string;
+  value: number;
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }: GTagEventProps) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value,
+  });
+};

src/pages/_app.tsx

@@ -2,23 +2,61 @@ import { Global, ThemeProvider } from '@emotion/react';
 import type { AppProps } from 'next/app';
 import { RecoilEnv, RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
 import theme from '@/styles/theme';
 import global from '@/styles/global';
 import ClientErrorSnackBar from '@/lib/axios/clientErrorSnackBar';
+import * as gtag from '@/lib/ga/gtag';
 
 RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(() => new QueryClient());
 
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRoutingChange = (url: URL) => {
+      gtag.pageview(url);
+    };
+    router.events.on('routeChangeComplete', handleRoutingChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRoutingChange);
+    };
+  }, [router.events]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <ClientErrorSnackBar />
         <ThemeProvider theme={theme}>
           <Global styles={global} />
+          {process.env.NODE_ENV === 'production' && (
+            <>
+              <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+              />
+              <Script
+                id="gtag-init"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                  __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', '${gtag.GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+                }}
+              />
+            </>
+          )}
           <Component {...pageProps} />
         </ThemeProvider>
       </RecoilRoot>