Add Microsoft Clarity analytics script to Layout.astro

Copilot · garrytrinder · Copilot · commit 42884ee7e8f9 · 2026-03-05T15:31:31.000Z
Co-authored-by: garrytrinder &lt;11563347+garrytrinder@users.noreply.github.com&gt;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -10,6 +10,7 @@ interface Props {
 const { title, description = 'Dev Proxy - Simulate API behaviors for testing and development', image } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site ?? 'https://devproxy.net');
 const ogImage = image ? new URL(image, Astro.site ?? 'https://devproxy.net').href : undefined;
+const clarityProjectId = import.meta.env.PUBLIC_CLARITY_PROJECT_ID;
 ---
 
 <!doctype html>
@@ -45,6 +46,15 @@ const ogImage = image ? new URL(image, Astro.site ?? 'https://devproxy.net').hre
         }
       })();
     </script>
+    {clarityProjectId && (
+      <script is:inline define:vars={{ clarityProjectId }}>
+        (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", clarityProjectId);
+      </script>
+    )}
   </head>
   <body class="min-h-screen flex flex-col">
     <nav class="border-b sticky top-0 z-50 backdrop-blur-sm" style="border-color: var(--border-primary); background: var(--bg-nav);">
