From 708956045323dddbbcbdef5d4ad597076d04c176 Mon Sep 17 00:00:00 2001 From: Jonathan Irhodia Date: Fri, 19 Jan 2024 11:35:57 +0100 Subject: [PATCH] feat: setup in-app clarity tracker (#205) --- .github/workflows/deploy-dev.yml | 1 + .github/workflows/deploy-epsilon.yml | 1 + .github/workflows/deploy-prod.yml | 1 + .github/workflows/deploy-staging.yml | 1 + packages/frontend/.env.sample | 1 + packages/frontend/package.json | 1 + packages/frontend/src/config/config.ts | 6 ++++++ packages/frontend/src/main.tsx | 8 ++++++++ yarn.lock | 5 +++++ 9 files changed, 25 insertions(+) diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index 96a362cc..67e7be8b 100644 --- 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 index 99735fa3..1b2d512e 100644 --- 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 index f4748a66..7041b5c4 100644 --- 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 index 32023254..3754c06c 100644 --- 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 index fb9659d2..74c005ab 100644 --- 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://examplePublicKey@o0.ingest.sentry.io/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 index 29c73466..e01dd580 100644 --- 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 index 77346b19..7cc05f6f 100644 --- 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 index a92c7963..93927e2b 100644 --- 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 ? : ; diff --git a/yarn.lock b/yarn.lock index b670d347..2902d115 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14595,6 +14595,11 @@ react-markdown@8.0.7: unist-util-visit "^4.0.0" vfile "^5.0.0" +react-microsoft-clarity@1.2.0: + 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"