Feat/microsoft clarity analytics

.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"

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'}
             >

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>
+  );
+};