feat: setup in-app clarity tracker (#205)

AlphadayHQ · Jan 19, 2024 · 7089560 · 7089560
1 parent aa75bda
commit 7089560
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 0 deletions.
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -81,6 +81,7 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.DEV__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.DEV__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.DEV__REACT_APP_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

diff --git a/.github/workflows/deploy-epsilon.yml b/.github/workflows/deploy-epsilon.yml
@@ -76,6 +76,7 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.DEV__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.DEV__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.DEV__REACT_APP_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -71,6 +71,7 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.PROD__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.PROD__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.PROD__VITE_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -79,6 +79,7 @@ jobs:
                   VITE_FIRE_MESSAGE_SENDER_ID: ${{ secrets.STAGING__REACT_APP_FIRE_MESSAGE_SENDER_ID }}
                   VITE_FIRE_APP_ID: ${{ secrets.STAGING__REACT_APP_FIRE_APP_ID }}
                   VITE_SENTRY_DSN: ${{ secrets.PROD__VITE_SENTRY_DSN }}
+                  VITE_CLARITY_PROJECT_ID: ${{ secrets.STAGING__VITE_CLARITY_PROJECT_ID }}
 
                   NODE_OPTIONS: "--max_old_space_size=4096"
 

diff --git a/packages/frontend/.env.sample b/packages/frontend/.env.sample
@@ -27,6 +27,7 @@ VITE_SWAP_FEE_ADDRESS=0x038C5e782FcE70C5CAf39b0Ba2Afe211F34f0bC5
 
 VITE_GA_MEASUREMENT_ID=G-ZT80HRR0MD
 VITE_SENTRY_DSN=https://[email protected]/0
+VITE_CLARITY_PROJECT_ID=X
 
 VITE_HOTJAR_SITE_ID=X
 VITE_HOTJAR_SNIPPET_VERSION=6

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -50,6 +50,7 @@
     "react-hot-toast": "2.4.1",
     "react-laag": "2.0.5",
     "react-markdown": "8.0.7",
+    "react-microsoft-clarity": "1.2.0",
     "react-redux": "8.0.2",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",

diff --git a/packages/frontend/src/config/config.ts b/packages/frontend/src/config/config.ts
@@ -48,6 +48,11 @@ const SENTRY = {
     ENABLE: true,
 };
 
+const CLARITY = {
+    ENABLE: !!import.meta.env.VITE_CLARITY_PROJECT_ID,
+    PROJECT_ID: import.meta.env.VITE_CLARITY_PROJECT_ID,
+};
+
 const COOKIES = {
     // in these, a "reject all" option will be included
     STRICT_COUNTRY_LIST: ["DE", "FR", "UK", "IE"],
@@ -73,6 +78,7 @@ const CONFIG = {
     SEO: SEO_CONFIG,
     FIREBASE: FIREBASE_CONFIG,
     SENTRY,
+    CLARITY,
     COOKIES,
     API_PROVIDERS,
     NUMBERS,

diff --git a/packages/frontend/src/main.tsx b/packages/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import "./polyfills";
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/tracing";
 import { createRoot } from "react-dom/client";
+import { clarity } from "react-microsoft-clarity";
 import { Provider } from "react-redux";
 import { WagmiConfig } from "wagmi";
 import { useIsMobile } from "./api/hooks/useIsMobile";
@@ -56,6 +57,13 @@ try {
     );
 }
 
+if (CONFIG.CLARITY.ENABLE) {
+    Logger.debug("initializing clarity...");
+    clarity.init(CONFIG.CLARITY.PROJECT_ID);
+    clarity.consent();
+    Logger.debug("clarity initialized");
+}
+
 const AppSwitcher = () => {
     const isMobile = useIsMobile();
     return isMobile ? <MobileApp /> : <App />;

diff --git a/yarn.lock b/yarn.lock
@@ -14595,6 +14595,11 @@ [email protected]:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-microsoft-clarity/-/react-microsoft-clarity-1.2.0.tgz#949f953cec4d4f9d7b4eaab01c240dfa48fb44c8"
+  integrity sha512-a1bsJR1uN1daWq3cBc7NheEGPXrotMRE0oFeRio7kXvHawzQfqu5iX9BoYFF9zRUL0dn+Mz57h1fNlcv3pqXEg==
+
 react-popper@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"