From f9bdb49c7a49545154cb87cc6cab28f15337ffae Mon Sep 17 00:00:00 2001
From: Osama Sayed <osamasayed@users.noreply.github.com>
Date: Sun, 15 Sep 2024 15:55:07 +0700
Subject: [PATCH] Add Microsoft Clarity script (#2203)

---
 .../MicrosoftClarityScript.tsx                | 23 +++++++++++++++++++
 .../ThirdPartyScripts/ThirdPartyScripts.tsx   |  8 ++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ThirdPartyScripts/MicrosoftClarityScript.tsx

diff --git a/src/components/ThirdPartyScripts/MicrosoftClarityScript.tsx b/src/components/ThirdPartyScripts/MicrosoftClarityScript.tsx
new file mode 100644
index 0000000000..b286a1a979
--- /dev/null
+++ b/src/components/ThirdPartyScripts/MicrosoftClarityScript.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Script from 'next/script';
+
+const CLARITY_TRACKING_CODE = process.env.NEXT_PUBLIC_CLARITY_TRACKING_CODE;
+const ENABLE_MICROSOFT_CLARITY = process.env.NEXT_PUBLIC_ENABLE_MICROSOFT_CLARITY === 'true';
+
+const MicrosoftClarityScript = () => {
+  if (!ENABLE_MICROSOFT_CLARITY) {
+    return <></>;
+  }
+  return (
+    <Script id="microsoft-clarity-script-code">
+      {`(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", "${CLARITY_TRACKING_CODE}");`}
+    </Script>
+  );
+};
+
+export default MicrosoftClarityScript;
diff --git a/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx b/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx
index bef9eb14eb..06bda63324 100644
--- a/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx
+++ b/src/components/ThirdPartyScripts/ThirdPartyScripts.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 
 import GoogleAnalyticsScript from './GoogleAnalyticsScript';
+import MicrosoftClarityScript from './MicrosoftClarityScript';
 
-const ThirdPartyScripts = () => <GoogleAnalyticsScript />;
+const ThirdPartyScripts = () => (
+  <>
+    <GoogleAnalyticsScript />
+    <MicrosoftClarityScript />
+  </>
+);
 
 export default ThirdPartyScripts;