From bd9d4e33fbd182d89c1691ef8715d75087455728 Mon Sep 17 00:00:00 2001
From: Cedar <FYLSen@users.noreply.github.com>
Date: Tue, 28 May 2024 14:59:02 +0800
Subject: [PATCH] feat: add Microsoft Clarity and fix websiteId typo

- Added Microsoft Clarity analytics integration in the WebAnalytics
component.
- Fixed a typo in the UmamiAnalytics component: changed 'websitId'
variable to 'websiteId'.
---
 src/components/head/WebAnalytics.tsx | 30 ++++++++++++++++++++++++----
 src/config.json                      |  5 ++++-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/head/WebAnalytics.tsx b/src/components/head/WebAnalytics.tsx
index e98f66d..ce3f25e 100644
--- a/src/components/head/WebAnalytics.tsx
+++ b/src/components/head/WebAnalytics.tsx
@@ -5,24 +5,27 @@ export function WebAnalytics() {
 
   return <>
     {
-      analytics.umami.websitId && <UmamiAnalytics {...analytics.umami} />
+      analytics.umami.websiteId && <UmamiAnalytics {...analytics.umami} />
     }
     {
       analytics.google.measurementId && <GoogleAnalytics {...analytics.google} />
     }
+    {
+      analytics.microsoftClarity.projectId && <MicrosoftClarity {...analytics.microsoftClarity} />
+    }
   </>
 }
 
 function UmamiAnalytics({
   serverUrl,
-  websitId,
+  websiteId,
 }: {
   serverUrl?: string,
-  websitId: string,
+  websiteId: string,
 }) {
   const src = `${serverUrl || 'https://cloud.umami.is'}/script.js`
 
-  return <script defer src={src} data-website-id={websitId} />
+  return <script defer src={src} data-website-id={websiteId} />
 }
 
 
@@ -43,4 +46,23 @@ gtag('config', '${measurementId}');`,
       }}></script>
     </>
   )
+}
+
+
+function MicrosoftClarity({
+  projectId,
+}: {
+  projectId: string,
+}) {
+  return (
+    <>
+      <script dangerouslySetInnerHTML={{
+        __html: `(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", "${projectId}");`
+      }}></script>
+    </>
+  )
 }
\ No newline at end of file
diff --git a/src/config.json b/src/config.json
index d4fcef7..5ce2ba2 100644
--- a/src/config.json
+++ b/src/config.json
@@ -115,7 +115,10 @@
     },
     "umami": {
       "serverUrl": "",
-      "websitId": ""
+      "websiteId": ""
+    },
+    "microsoftClarity": {
+        "projectId": ""
     }
   }
 }