From fd3a7365f0edbb1ca2736b09008ee7891638ebbc Mon Sep 17 00:00:00 2001
From: Yunus A M <myounis.ar@live.com>
Date: Mon, 25 Sep 2023 18:56:26 +0530
Subject: [PATCH] feat: add clarity ms

---
 frontend/src/AppRoutes/index.tsx |   2 +
 frontend/src/index.html.ejs      | 359 ++++++++++++++++---------------
 frontend/src/typings/window.ts   |   3 +
 frontend/webpack.config.js       |   2 +
 frontend/webpack.config.prod.js  |   2 +
 5 files changed, 198 insertions(+), 170 deletions(-)
diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx
index 38874ccd2a2..56ba19fdf49 100644
--- a/frontend/src/AppRoutes/index.tsx
+++ b/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]);
diff --git a/frontend/src/index.html.ejs b/frontend/src/index.html.ejs
index 8fe2ea80bbd..abfd8258bb9 100644
--- a/frontend/src/index.html.ejs
+++ b/frontend/src/index.html.ejs
@@ -1,170 +1,189 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta
-			http-equiv="Cache-Control"
-			content="no-cache, no-store, must-revalidate, max-age: 0"
-		/>
-		<meta http-equiv="Pragma" content="no-cache" />
-		<meta http-equiv="Expires" content="0" />
-
-		<title data-react-helmet="true">
-			Open source Observability platform | SigNoz
-		</title>
-		<meta
-			data-react-helmet="true"
-			property="og:title"
-			content="Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:image"
-			content="https://signoz.io/img/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image"
-			content="https://signoz.io/img/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image:alt"
-			content="Image for Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:card"
-			content="summary_large_image"
-		/>
-		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
-		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css?family=Fira+Code"
-			rel="stylesheet"
-		/>
-	</head>
-	<body>
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-
-		<script>
-			//Set your APP_ID
-			const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
-
-			(function () {
-				var w = window;
-				var ic = w.Intercom;
-				if (typeof ic === 'function') {
-					ic('reattach_activator');
-					ic('update', w.intercomSettings);
-				} else {
-					var d = document;
-					var i = function () {
-						i.c(arguments);
-					};
-					i.q = [];
-					i.c = function (args) {
-						i.q.push(args);
-					};
-					w.Intercom = i;
-					var l = function () {
-						var s = d.createElement('script');
-						s.type = 'text/javascript';
-						s.async = true;
-						s.src = 'https://widget.intercom.io/widget/' + APP_ID;
-						var x = d.getElementsByTagName('script')[0];
-						x.parentNode.insertBefore(s, x);
-					};
-					if (document.readyState === 'complete') {
-						l();
-					} else if (w.attachEvent) {
-						w.attachEvent('onload', l);
-					} else {
-						w.addEventListener('load', l, false);
-					}
-				}
-			})();
-		</script>
-
-		<script>
-			//Set your SEGMENT_ID
-			const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';
-
-			!(function () {
-				var analytics = (window.analytics = window.analytics || []);
-				if (!analytics.initialize)
-					if (analytics.invoked)
-						window.console &&
-							console.error &&
-							console.error('Segment snippet included twice.');
-					else {
-						analytics.invoked = !0;
-						analytics.methods = [
-							'trackSubmit',
-							'trackClick',
-							'trackLink',
-							'trackForm',
-							'pageview',
-							'identify',
-							'reset',
-							'group',
-							'track',
-							'ready',
-							'alias',
-							'debug',
-							'page',
-							'once',
-							'off',
-							'on',
-							'addSourceMiddleware',
-							'addIntegrationMiddleware',
-							'setAnonymousId',
-							'addDestinationMiddleware',
-						];
-						analytics.factory = function (e) {
-							return function () {
-								if (window.analytics.initialized)
-									return window.analytics[e].apply(window.analytics, arguments);
-								var i = Array.prototype.slice.call(arguments);
-								i.unshift(e);
-								analytics.push(i);
-								return analytics;
-							};
-						};
-						for (var i = 0; i < analytics.methods.length; i++) {
-							var key = analytics.methods[i];
-							analytics[key] = analytics.factory(key);
-						}
-						analytics.load = function (key, i) {
-							var t = document.createElement('script');
-							t.type = 'text/javascript';
-							t.async = !0;
-							t.src =
-								'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
-							var n = document.getElementsByTagName('script')[0];
-							n.parentNode.insertBefore(t, n);
-							analytics._loadOptions = i;
-						};
-						analytics._writeKey = SEGMENT_ID;
-						analytics.SNIPPET_VERSION = '4.16.1';
-						analytics.load(SEGMENT_ID);
-						analytics.page();
-					}
-			})();
-		</script>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			http-equiv="Cache-Control"
+			content="no-cache, no-store, must-revalidate, max-age: 0"
+		/>
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+
+		<title data-react-helmet="true">
+			Open source Observability platform | SigNoz
+		</title>
+		<meta
+			data-react-helmet="true"
+			property="og:title"
+			content="Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:image"
+			content="https://signoz.io/img/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image"
+			content="https://signoz.io/img/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image:alt"
+			content="Image for Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:card"
+			content="summary_large_image"
+		/>
+		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
+		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css?family=Fira+Code"
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+
+		<script>
+			//Set your APP_ID
+			const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
+
+			(function () {
+				var w = window;
+				var ic = w.Intercom;
+				if (typeof ic === 'function') {
+					ic('reattach_activator');
+					ic('update', w.intercomSettings);
+				} else {
+					var d = document;
+					var i = function () {
+						i.c(arguments);
+					};
+					i.q = [];
+					i.c = function (args) {
+						i.q.push(args);
+					};
+					w.Intercom = i;
+					var l = function () {
+						var s = d.createElement('script');
+						s.type = 'text/javascript';
+						s.async = true;
+						s.src = 'https://widget.intercom.io/widget/' + APP_ID;
+						var x = d.getElementsByTagName('script')[0];
+						x.parentNode.insertBefore(s, x);
+					};
+					if (document.readyState === 'complete') {
+						l();
+					} else if (w.attachEvent) {
+						w.attachEvent('onload', l);
+					} else {
+						w.addEventListener('load', l, false);
+					}
+				}
+			})();
+		</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 %>';
+
+			!(function () {
+				var analytics = (window.analytics = window.analytics || []);
+				if (!analytics.initialize)
+					if (analytics.invoked)
+						window.console &&
+							console.error &&
+							console.error('Segment snippet included twice.');
+					else {
+						analytics.invoked = !0;
+						analytics.methods = [
+							'trackSubmit',
+							'trackClick',
+							'trackLink',
+							'trackForm',
+							'pageview',
+							'identify',
+							'reset',
+							'group',
+							'track',
+							'ready',
+							'alias',
+							'debug',
+							'page',
+							'once',
+							'off',
+							'on',
+							'addSourceMiddleware',
+							'addIntegrationMiddleware',
+							'setAnonymousId',
+							'addDestinationMiddleware',
+						];
+						analytics.factory = function (e) {
+							return function () {
+								if (window.analytics.initialized)
+									return window.analytics[e].apply(window.analytics, arguments);
+								var i = Array.prototype.slice.call(arguments);
+								i.unshift(e);
+								analytics.push(i);
+								return analytics;
+							};
+						};
+						for (var i = 0; i < analytics.methods.length; i++) {
+							var key = analytics.methods[i];
+							analytics[key] = analytics.factory(key);
+						}
+						analytics.load = function (key, i) {
+							var t = document.createElement('script');
+							t.type = 'text/javascript';
+							t.async = !0;
+							t.src =
+								'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
+							var n = document.getElementsByTagName('script')[0];
+							n.parentNode.insertBefore(t, n);
+							analytics._loadOptions = i;
+						};
+						analytics._writeKey = SEGMENT_ID;
+						analytics.SNIPPET_VERSION = '4.16.1';
+						analytics.load(SEGMENT_ID);
+						analytics.page();
+					}
+			})();
+		</script>
+	</body>
+</html>
diff --git a/frontend/src/typings/window.ts b/frontend/src/typings/window.ts
index a05152e5a52..02197e24446 100644
--- a/frontend/src/typings/window.ts
+++ b/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;
 	}
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 8690e5e55f5..5fe07bfa87f 100644
--- a/frontend/webpack.config.js
+++ b/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,
 		}),
 	}),
 ];
diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js
index b35c471fff5..c75ea529448 100644
--- a/frontend/webpack.config.prod.js
+++ b/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(),
