feat: add clarity ms (#3620)

frontend/src/AppRoutes/index.tsx

@@ -93,6 +93,8 @@ function App(): JSX.Element {
 				email: user?.email,
 				name: user?.name,
 			});
+
+			window.clarity('identify', user.email, user.name);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isLoggedInState, user]);

frontend/src/index.html.ejs

@@ -100,6 +100,25 @@
 			})();
 		</script>
 
+		<script type="text/javascript">
+			//Set your SEGMENT_ID
+			const CLARITY_PROJECT_ID =
+				'<%= htmlWebpackPlugin.options.CLARITY_PROJECT_ID %>';
+
+			(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', CLARITY_PROJECT_ID);
+		</script>
+
 		<script>
 			//Set your SEGMENT_ID
 			const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';

frontend/src/typings/window.ts

@@ -1,8 +1,11 @@
 import { compose, Store } from 'redux';
 
+type ClarityType<T> = (...args: string[]) => T;
+
 declare global {
 	interface Window {
 		store: Store;
+		clarity: ClarityType<string>;
 		analytics: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
 	}

frontend/webpack.config.js

@@ -21,6 +21,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 	}),
 	new webpack.ProvidePlugin({
 		process: 'process/browser',
@@ -31,6 +32,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		}),
 	}),
 ];

frontend/webpack.config.prod.js

@@ -25,6 +25,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 	}),
 	new CompressionPlugin({
 		exclude: /.map$/,
@@ -40,6 +41,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		}),
 	}),
 	new MiniCssExtractPlugin(),