From 0685ffecf7a17acbbbd30cec06d071ed103ec155 Mon Sep 17 00:00:00 2001
From: Shudipto Trafder <shudiptotrafder@gmail.com>
Date: Mon, 2 Nov 2026 16:10:34 +0600
Subject: [PATCH] feat: Add Google Analytics 4 integration to track site usage

---
 .github/workflows/deploy.yml |  3 +++
 src/layouts/BaseLayout.astro | 14 ++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 46afc1e1..e01b0c4a 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -34,6 +34,9 @@ jobs:
         run: npm ci
 
       - name: Build site
+        env:
+          # Google Analytics 4 measurement ID; public (it ships in every page), so not a secret.
+          PUBLIC_GA_ID: G-C902XCTMKD
         run: npm run build
 
       - name: Deploy to Cloudflare Pages
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 02d73b97..3b7b780f 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -44,6 +44,8 @@ const cleanPath = Astro.url.pathname.replace(/\.html$/, '').replace(/\/index$/,
 const canonical = new URL(cleanPath, Astro.site).toString();
 // Shared social card (logo lockup on the dark brand background) until pages get their own.
 const ogImage = new URL('/og-default.png', Astro.site).toString();
+// Google Analytics 4 measurement ID (G-XXXXXXXXXX), set at build time. No ID, no tag.
+const gaId = import.meta.env.PUBLIC_GA_ID;
 ---
 <!doctype html>
 <html lang="en" data-theme="dark">
@@ -107,6 +109,18 @@ const ogImage = new URL('/og-default.png', Astro.site).toString();
     <link rel="preload" href={bodyFont} as="font" type="font/woff2" crossorigin />
 
     {jsonLd.length > 0 && <script type="application/ld+json" set:html={JSON.stringify(jsonLd.length === 1 ? jsonLd[0] : jsonLd)} />}
+
+    {gaId && (
+      <>
+        <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
+        <script is:inline define:vars={{ gaId }}>
+          window.dataLayer = window.dataLayer || [];
+          function gtag() { dataLayer.push(arguments); }
+          gtag('js', new Date());
+          gtag('config', gaId);
+        </script>
+      </>
+    )}
   </head>
   <body>
     <a class="skip" href="#main">Skip to content</a>