Add Google Analytics

UTDNebula · Oct 8, 2024 · d30664e · d30664e
1 parent 62d3430
commit d30664e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/.env.example b/.env.example
@@ -7,4 +7,5 @@ PSQL_PASS=
 DATABASE_URL=
 DISCORD_CLIENT_ID=
 DISCORD_CLIENT_SECRET=
+NEXT_PUBLIC_MEASUREMENT_ID=
 ```
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import Sidebar from '@src/components/nav/Sidebar';
 import { type Metadata } from 'next';
 
 import { Analytics } from '@vercel/analytics/react';
+import GoogleAnalytics from '@src/components/googleAnalytics';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -43,6 +44,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <GoogleAnalytics />
       <body className={`font-sans ${inter.variable}`}>
         <TRPCReactProvider headers={headers()}>
           <Sidebar />

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