diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 40007ac..a4ac980 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import Feed from '@/components/Feed';
 import Footer from '@/components/Footer';
 import Sidebar from '@/components/Sidebar';
 import ToastArea from '@/components/common/Toast/ToastArea';
+import GoogleAnalytics from '@/lib/GoogleAnalytics';
 import type { Metadata } from 'next';
 import '../../styles/tailwind.css';
 import Provider from './Provider';
@@ -32,6 +33,9 @@ export default function RootLayout({
         <link rel='icon' href='/logo.svg' />
       </head>
       <body className='flex'>
+        {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
+          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
+        )}
         <Provider>
           <Sidebar />
           <div className='min-h-dvh flex-1 flex flex-col overflow-y-scroll styled-scroll'>
diff --git a/src/lib/GoogleAnalytics.tsx b/src/lib/GoogleAnalytics.tsx
new file mode 100644
index 0000000..ebffc5c
--- /dev/null
+++ b/src/lib/GoogleAnalytics.tsx
@@ -0,0 +1,27 @@
+import Script from 'next/script';
+
+const GoogleAnalytics = ({ gaId }: { gaId: string }) => {
+  return (
+    <>
+      <Script
+        async
+        src={`https://www.googletagmanager.com/gtag/js
+				?id=${gaId}`}
+      />
+      <Script
+        id='google-analytics'
+        dangerouslySetInnerHTML={{
+          __html: `
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', '${gaId}');
+		`,
+        }}
+      />
+    </>
+  );
+};
+
+export default GoogleAnalytics;
