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

@@ -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>
+    </>
+  )
 }

src/config.json

@@ -115,7 +115,10 @@
     },
     "umami": {
       "serverUrl": "",
-      "websitId": ""
+      "websiteId": ""
+    },
+    "microsoftClarity": {
+        "projectId": ""
     }
   }
 }