cookielab
diff --git a/‎.github/workflows/deploy.yml‎
Lines changed: 2 additions & 0 deletions b/‎.github/workflows/deploy.yml‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎CLAUDE.md‎
Lines changed: 9 additions & 4 deletions b/‎CLAUDE.md‎
Lines changed: 9 additions & 4 deletions
diff --git a/‎src/layouts/BaseLayout.astro‎
Lines changed: 16 additions & 0 deletions b/‎src/layouts/BaseLayout.astro‎
Lines changed: 16 additions & 0 deletions
@@ -26,6 +26,8 @@ jobs:
 
       - run: npm ci
       - run: npm run build
+        env:
+          PUBLIC_GTM_ID: ${{ vars.PUBLIC_GTM_ID }}
 
       - uses: actions/upload-pages-artifact@v3
         with:
 
@@ -92,7 +92,12 @@ Chart.register(LineController, LineElement, PointElement, LinearScale, Tooltip);
 3. Provide values for all years 1970–2026 following S-curve shape
 4. No code changes needed — charts load data dynamically
 
-## Deployment (future)
-Cloudflare Pages via GitHub Actions with `cloudflare/wrangler-action`.
-Secrets needed: `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ACCOUNT_ID`.
-Project name: `devdrift-dev`. Build output: `devdrift/dist/`.
+## Deployment
+GitHub Pages via GitHub Actions (`.github/workflows/deploy.yml`). Every push to `main` builds and publishes `dist/`.
+
+## Analytics
+Google Tag Manager is injected into `BaseLayout.astro` when `PUBLIC_GTM_ID` is set at build time. GA4 is configured inside the GTM container (not in code), so tag changes never require a redeploy.
+
+- Local: set `PUBLIC_GTM_ID=GTM-XXXXXXX` in `devdrift/.env` (gitignored).
+- CI: set a repository **Variable** `PUBLIC_GTM_ID` in GitHub → Settings → Secrets and variables → Actions → Variables. The deploy workflow passes it to the build step via `env:`.
+- When unset, the snippet is omitted entirely (graceful no-op for local dev).
@@ -7,13 +7,23 @@ const {
   title = 'DevDrift — How Programming Changed · 1970–2026',
   description = 'An open-source timeline documenting how the skills and expectations of software developers have evolved from 1970 to 2026.'
 } = Astro.props;
+const GTM_ID = import.meta.env.PUBLIC_GTM_ID;
 ---
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{title}</title>
+  {GTM_ID && (
+    <script is:inline define:vars={{ GTM_ID }}>
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer',GTM_ID);
+    </script>
+  )}
   <meta name="description" content={description} />
   <meta property="og:title" content={title} />
   <meta property="og:description" content={description} />
@@ -27,6 +37,12 @@ const {
   <link rel="stylesheet" href="/src/styles/global.css" />
 </head>
 <body class="min-h-screen" style="background:#1E1E1E;color:#F2F0E5;font-family:'Inter',system-ui,sans-serif;">
+  {GTM_ID && (
+    <noscript>
+      <iframe src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+        height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+  )}
   <slot />
 </body>
 </html>