feat: CustomGoogleAnalytics 컴포넌트 작성

prgrms-web-devcourse · Jun 27, 2024 · d63cf53 · d63cf53
1 parent e2798cf
commit d63cf53
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 
 import { appleSplashScreens } from '@/constants/metadata';
 
+import GoogleAnalytics from '@/components/common/GoogleAnalytics';
 import ContextProvider from '@/components/common/ContextProvider';
 import AuthFailedErrorBoundary from '@/components/common/AuthFailedErrorBoundary';
 import Layout from '@/components/layout/Layout';
@@ -39,6 +40,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
       <body className={`${LineSeedKR.variable} app-layout font-lineseed`}>
+        <GoogleAnalytics />
         <Layout>
           <ContextProvider>
             <AuthFailedErrorBoundary>{children}</AuthFailedErrorBoundary>

diff --git a/src/components/common/GoogleAnalytics.tsx b/src/components/common/GoogleAnalytics.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import Script from 'next/script';
+
+import * as gtag from '@/utils/gtag';
+
+const GoogleAnalytics = () => {
+  return (
+    <>
+      <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,
+            });
+          `,
+        }}
+      />
+    </>
+  );
+};
+
+export default GoogleAnalytics;