feat: add clarity tracking code

docker-entrypoint.sh

@@ -85,6 +85,8 @@ sed -i "s@{VITE_ODD_QUESTIONNAIRE}@$VITE_ODD_QUESTIONNAIRE@g" /app/build/assets/
 sed -i "s@{VITE_JTOOL_USERS}@$VITE_JTOOL_USERS@g" /app/build/assets/*.js
 sed -i "s@{VITE_ODD_MAP}@$VITE_ODD_MAP@g" /app/build/assets/*.js
 
+sed -i "s@{VITE_CLARITY_APP_ID}@$VITE_CLARITY_APP_ID@g" /app/build/index.html
+
 # Restart nginx to apply changes
 service nginx restart
 

index.html

@@ -14,6 +14,17 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="stylesheet" href="/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+    <script type="text/javascript">
+      var undefinedClarityAppId = "{" + "VITE_CLARITY_APP_ID" + "}"
+      var clarityAppId = "{VITE_CLARITY_APP_ID}"
+      if (clarityAppId !== "" && clarityAppId !== undefinedClarityAppId) {
+        (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", clarityAppId);
+      }
+    </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/Routes/PrivateRoute.tsx

@@ -10,6 +10,9 @@ import { ACCESS_TOKEN } from '../../constants'
 import { useAppSelector, useAppDispatch } from '../../state'
 import { login } from '../../state/me'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const window: any
+
 const ME = gql`
   query me {
     me {
@@ -43,6 +46,12 @@ const PrivateRoute: React.FC = () => {
     }
   }, [me, data, dispatch])
 
+  useEffect(() => {
+    if (window.clarity && me?.id) {
+      window.clarity('identify', me?.id)
+    }
+  }, [me?.id])
+
   if (!me || (!me && !authToken) || error || (authToken && !loading && data && !data.me)) {
     if (allowRedirect === true) return <Navigate to="/" replace />