feat: GoogleAnalystics 컴포넌트 추가

nodak-v2 · Jul 6, 2024 · e505340 · e505340
1 parent 9ab2e7d
commit e505340
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata, Viewport } from 'next';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
+import GoogleAnalytics from '@/src/components/GoogleAnalystics';
+
 import Introduction from '../components/Introduction';
 import { MSWComponent } from '../mocks/MSWComponent';
 import Providers from './Providers';
@@ -30,7 +32,10 @@ const RootLayout = ({
 }>) => {
   return (
     <html lang='ko'>
-      <link rel='icon' href='/icon.ico' sizes='any' />
+      <head>
+        <link rel='icon' href='/icon.ico' sizes='any' />
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_MEASUREMENT_ID!} />
+      </head>
       <body className='font-sans'>
         <Providers>
           <MSWComponent>

diff --git a/src/components/GoogleAnalystics.tsx b/src/components/GoogleAnalystics.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Script from 'next/script';
+
+interface GoogleAnalytics {
+  gaId: string;
+}
+
+const GoogleAnalytics = ({ gaId }: GoogleAnalytics) => {
+  return (
+    <>
+      <Script
+        strategy='lazyOnload'
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+      />
+
+      <Script id='' strategy='lazyOnload'>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}');
+        `}
+      </Script>
+    </>
+  );
+};
+
+export default GoogleAnalytics;