From 4147f187d1fca83d94290578b52299f0217b7f01 Mon Sep 17 00:00:00 2001
From: Elias <eliasgichuru0@gmail.com>
Date: Wed, 29 Jul 2026 14:55:06 +0300
Subject: [PATCH] feat(analytics): add Microsoft Clarity to the frontend

Render the Clarity tag from the root app layout when
NEXT_PUBLIC_CLARITY_PROJECT_ID is set, following the existing Facebook
pixel component. Document the variable in .env.example.
---
 .env.example                                   |  4 ++++
 apps/frontend/src/app/(app)/layout.tsx         |  2 ++
 .../components/layout/clarity.component.tsx    | 18 ++++++++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 apps/frontend/src/components/layout/clarity.component.tsx

diff --git a/.env.example b/.env.example
index f03b955460..3632cfa239 100644
--- a/.env.example
+++ b/.env.example
@@ -96,6 +96,10 @@ IS_GENERAL="true" # required for now
 
 # Parent app URL (used by the UI "Back to Olitt" button)
 NEXT_PUBLIC_OLITT_APP_URL=""
+
+# Microsoft Clarity project id. Leave empty to disable analytics.
+# Inlined at build time, so it must be set when the image is built.
+NEXT_PUBLIC_CLARITY_PROJECT_ID=""
 NEXT_PUBLIC_POSTIZ_OAUTH_DISPLAY_NAME="Authentik"
 NEXT_PUBLIC_POSTIZ_OAUTH_LOGO_URL="https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/authentik.png"
 POSTIZ_GENERIC_OAUTH="false"
diff --git a/apps/frontend/src/app/(app)/layout.tsx b/apps/frontend/src/app/(app)/layout.tsx
index 88ba611114..4d93da6216 100644
--- a/apps/frontend/src/app/(app)/layout.tsx
+++ b/apps/frontend/src/app/(app)/layout.tsx
@@ -15,6 +15,7 @@ import { PHProvider } from '@gitroom/react/helpers/posthog';
 import UtmSaver from '@gitroom/helpers/utils/utm.saver';
 import { DubAnalytics } from '@gitroom/frontend/components/layout/dubAnalytics';
 import { FacebookComponent } from '@gitroom/frontend/components/layout/facebook.component';
+import { ClarityComponent } from '@gitroom/frontend/components/layout/clarity.component';
 import { headers } from 'next/headers';
 import { headerName } from '@gitroom/react/translation/i18n.config';
 import { HtmlComponent } from '@gitroom/frontend/components/layout/html.component';
@@ -85,6 +86,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
             <HtmlComponent />
             <DubAnalytics />
             <FacebookComponent />
+            <ClarityComponent />
             <Plausible
               domain={!!process.env.IS_GENERAL ? 'postiz.com' : 'gitroom.com'}
             >
diff --git a/apps/frontend/src/components/layout/clarity.component.tsx b/apps/frontend/src/components/layout/clarity.component.tsx
new file mode 100644
index 0000000000..53cccfed9a
--- /dev/null
+++ b/apps/frontend/src/components/layout/clarity.component.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import Script from 'next/script';
+
+export const ClarityComponent = () => {
+  if (!process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID) {
+    return null;
+  }
+  return (
+    <Script strategy="afterInteractive" id="ms-clarity">
+      {`(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_PROJECT_ID}");`}
+    </Script>
+  );
+};