From 6f5ea5a8724d80a3e11a77bf1529a4ab969556ce Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sat, 25 Apr 2026 05:23:20 +0530
Subject: [PATCH] feat: integrate Microsoft Clarity and Google Analytics with
 environment variable support

---
 Dockerfile         |  4 ++++
 src/app/layout.tsx | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 364ae9e..a24d86f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -32,6 +32,8 @@ ARG NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
 ARG NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
 ARG NEXT_PUBLIC_FIREBASE_APP_ID
 ARG NEXT_PUBLIC_FIREBASE_VAPID_KEY
+ARG NEXT_PUBLIC_CLARITY_ID
+ARG NEXT_PUBLIC_GA_ID
 
 # Set environment variables for build (NEXT_PUBLIC_* must be set at build time)
 ENV NEXT_TELEMETRY_DISABLED=1
@@ -45,6 +47,8 @@ ENV NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=${NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}
 ENV NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=${NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}
 ENV NEXT_PUBLIC_FIREBASE_APP_ID=${NEXT_PUBLIC_FIREBASE_APP_ID}
 ENV NEXT_PUBLIC_FIREBASE_VAPID_KEY=${NEXT_PUBLIC_FIREBASE_VAPID_KEY}
+ENV NEXT_PUBLIC_CLARITY_ID=${NEXT_PUBLIC_CLARITY_ID}
+ENV NEXT_PUBLIC_GA_ID=${NEXT_PUBLIC_GA_ID}
 
 # Build the application
 RUN npm run build
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 56ca824..aeb7bbc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -145,6 +145,27 @@ export default function RootLayout({
           data-website-id="00e1ce31-e174-4519-8b59-63e8d4556b01"
           strategy="afterInteractive"
         />
+        {/* Microsoft Clarity */}
+        {process.env.NEXT_PUBLIC_CLARITY_ID && (
+          <Script id="ms-clarity" strategy="afterInteractive">
+            {`(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})(window,document,"clarity","script","${process.env.NEXT_PUBLIC_CLARITY_ID}");`}
+          </Script>
+        )}
+        {/* Google Analytics 4 */}
+        {process.env.NEXT_PUBLIC_GA_ID && (
+          <>
+            <Script
+              src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
+              strategy="afterInteractive"
+            />
+            <Script id="ga4" strategy="afterInteractive">
+              {`window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');`}
+            </Script>
+          </>
+        )}
       </body>
     </html>
   );