feat: integrate segment and track page views (#3586)

frontend/src/AppRoutes/index.tsx

@@ -10,7 +10,7 @@ import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import { Suspense, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Router, Switch } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -18,6 +18,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app';
 import AppReducer from 'types/reducer/app';
+import { trackPageView } from 'utils/segmentAnalytics';
 
 import PrivateRoute from './Private';
 import defaultRoutes from './routes';
@@ -32,7 +33,7 @@ function App(): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	const { hostname } = window.location;
+	const { hostname, pathname } = window.location;
 
 	const featureResponse = useGetFeatureFlag((allFlags) => {
 		const isOnboardingEnabled =
@@ -73,6 +74,20 @@ function App(): JSX.Element {
 		}
 	});
 
+	useEffect(() => {
+		if (isLoggedInState && user && user.userId && user.email) {
+			window.analytics.identify(user?.userId, {
+				email: user?.email || '',
+				name: user?.name || '',
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoggedInState]);
+
+	useEffect(() => {
+		trackPageView(pathname);
+	}, [pathname]);
+
 	return (
 		<ConfigProvider theme={themeConfig}>
 			<Router history={history}>

frontend/src/index.html.ejs

@@ -99,5 +99,72 @@
 				}
 			})();
 		</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>

frontend/src/typings/window.ts

@@ -3,7 +3,7 @@ import { compose, Store } from 'redux';
 declare global {
 	interface Window {
 		store: Store;
-
+		analytics: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
 	}
 }

frontend/src/utils/segmentAnalytics.ts

@@ -0,0 +1,12 @@
+function trackPageView(pageName: string): void {
+	window.analytics.page(pageName);
+}
+
+function trackEvent(
+	eventName: string,
+	properties: Record<string, string>,
+): void {
+	window.analytics.track(eventName, properties);
+}
+
+export { trackEvent, trackPageView };

frontend/webpack.config.js

@@ -20,6 +20,7 @@ const plugins = [
 	new HtmlWebpackPlugin({
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+		SEGMENT_ID: process.env.SEGMENT_ID,
 	}),
 	new webpack.ProvidePlugin({
 		process: 'process/browser',
@@ -29,6 +30,7 @@ const plugins = [
 			NODE_ENV: process.env.NODE_ENV,
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+			SEGMENT_ID: process.env.SEGMENT_ID,
 		}),
 	}),
 ];