Merge pull request #59 from depromeet/feat/monitoring-setting

Feat/monitoring setting
depromeet · Dec 12, 2023 · f24bf5a · f24bf5a
2 parents 96fdd91 + 9d288c3
commit f24bf5a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import MonitoringInitializer from '@/components/MonitoringInitializer';
 import { css } from '@/styled-system/css';
 import { pretendardFont } from '@/styles/font';
 
@@ -15,6 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" suppressHydrationWarning className={pretendardFont.variable}>
       <body>
+        <MonitoringInitializer />
         <QueryProvider>
           <div className={css(containerCss)}>{children}</div>
         </QueryProvider>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,6 +11,8 @@ export default function Home() {
         <h1 className={MainTitleCss}>하루 10분의 변화를 경험하세요.</h1>
       </div>
       <Link className={LinkCss} href={'/select'}>
+        {/* 이후 추가될 믹스패널 이벤트는 아래와 같이 추적 */}
+        {/* mixpanel.track("이벤트명"); */}
         <button type={'button'} className={LoginButtonCss}>
           게스트 로그인
         </button>

diff --git a/src/components/MonitoringInitializer.tsx b/src/components/MonitoringInitializer.tsx
@@ -0,0 +1,31 @@
+import Script from 'next/script';
+
+const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;
+
+const MonitoringInitializer = () => {
+  return (
+    <>
+      {
+        <>
+          <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${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', '${GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+            `,
+            }}
+          />
+        </>
+      }
+    </>
+  );
+};
+
+export default MonitoringInitializer;
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ yarn-error.log* @@
     # local env files
     .env*.local
+    .env
     # vercel
     .vercel
@@ Expand Down @@