chore: update onboarding events (#4387)

* chore: update onboarding events

* chore: update retry count

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -93,7 +93,7 @@ export default function Onboarding(): JSX.Element {
 	} = useOnboardingContext();
 
 	useEffectOnce(() => {
-		trackEvent('Onboarding Started');
+		trackEvent('Onboarding V2 Started');
 	});
 
 	const { status, data: ingestionData } = useQuery({
@@ -180,20 +180,12 @@ export default function Onboarding(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModule, selectedDataSource, selectedEnvironment, selectedMethod]);
 
-	useEffect(() => {
-		// on select
-		trackEvent('Onboarding: Module Selected', {
-			selectedModule: selectedModule.id,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModule]);
-
 	const handleNext = (): void => {
 		if (activeStep <= 3) {
 			const nextStep = activeStep + 1;
 
 			// on next
-			trackEvent('Onboarding: Get Started', {
+			trackEvent('Onboarding V2: Get Started', {
 				selectedModule: selectedModule.id,
 				nextStepId: nextStep,
 			});

frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx

@@ -30,6 +30,9 @@ export default function ConnectionStatus(): JSX.Element {
 	const {
 		serviceName,
 		selectedDataSource,
+		selectedEnvironment,
+		activeStep,
+		selectedMethod,
 		selectedFramework,
 	} = useOnboardingContext();
 	const { queries } = useResourceAttribute();
@@ -40,7 +43,7 @@ export default function ConnectionStatus(): JSX.Element {
 
 	const { trackEvent } = useAnalytics();
 
-	const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins
+	const [retryCount, setRetryCount] = useState(20); // Retry for 3 mins 20s
 	const [loading, setLoading] = useState(true);
 	const [isReceivingData, setIsReceivingData] = useState(false);
 	const dispatch = useDispatch();
@@ -122,7 +125,12 @@ export default function ConnectionStatus(): JSX.Element {
 		if (data || isError) {
 			setRetryCount(retryCount - 1);
 			if (retryCount < 0) {
-				trackEvent('❌ Onboarding: APM: Connection Status', {
+				trackEvent('Onboarding V2: Connection Status', {
+					dataSource: selectedDataSource?.id,
+					framework: selectedFramework,
+					environment: selectedEnvironment,
+					selectedMethod,
+					module: activeStep?.module?.id,
 					serviceName,
 					status: 'Failed',
 				});
@@ -136,7 +144,12 @@ export default function ConnectionStatus(): JSX.Element {
 					setLoading(false);
 					setIsReceivingData(true);
 
-					trackEvent('✅ Onboarding: APM: Connection Status', {
+					trackEvent('Onboarding V2: Connection Status', {
+						dataSource: selectedDataSource?.id,
+						framework: selectedFramework,
+						environment: selectedEnvironment,
+						selectedMethod,
+						module: activeStep?.module?.id,
 						serviceName,
 						status: 'Successful',
 					});

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -11,7 +11,6 @@ import {
 	getSupportedFrameworks,
 	hasFrameworks,
 } from 'container/OnboardingContainer/utils/dataSourceUtils';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useEffect, useState } from 'react';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -25,10 +24,7 @@ export interface DataSourceType {
 export default function DataSource(): JSX.Element {
 	const [form] = Form.useForm();
 
-	const { trackEvent } = useAnalytics();
-
 	const {
-		activeStep,
 		serviceName,
 		selectedModule,
 		selectedDataSource,
@@ -56,39 +52,6 @@ export default function DataSource(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	useEffect(() => {
-		// on language select
-		trackEvent('Onboarding: Data Source Selected', {
-			dataSource: selectedDataSource,
-			module: {
-				name: activeStep?.module?.title,
-				id: activeStep?.module?.id,
-			},
-			step: {
-				name: activeStep?.step?.title,
-				id: activeStep?.step?.id,
-			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedDataSource]);
-
-	useEffect(() => {
-		// on framework select
-		trackEvent('Onboarding: Framework Selected', {
-			dataSource: selectedDataSource,
-			framework: selectedFramework,
-			module: {
-				name: activeStep?.module?.title,
-				id: activeStep?.module?.id,
-			},
-			step: {
-				name: activeStep?.step?.title,
-				id: activeStep?.step?.id,
-			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedFramework]);
-
 	useEffect(() => {
 		if (selectedModule && selectedDataSource) {
 			const frameworks = hasFrameworks({

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -2,9 +2,7 @@ import { Card, Typography } from 'antd';
 import cx from 'classnames';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
 import { useCases } from 'container/OnboardingContainer/OnboardingContainer';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { Server } from 'lucide-react';
-import { useEffect } from 'react';
 
 interface SupportedEnvironmentsProps {
 	name: string;
@@ -36,9 +34,6 @@ const supportedEnvironments: SupportedEnvironmentsProps[] = [
 
 export default function EnvironmentDetails(): JSX.Element {
 	const {
-		activeStep,
-		selectedDataSource,
-		selectedFramework,
 		selectedEnvironment,
 		updateSelectedEnvironment,
 		selectedModule,
@@ -46,26 +41,6 @@ export default function EnvironmentDetails(): JSX.Element {
 		updateErrorDetails,
 	} = useOnboardingContext();
 
-	const { trackEvent } = useAnalytics();
-
-	useEffect(() => {
-		// on language select
-		trackEvent('Onboarding: Environment Selected', {
-			dataSource: selectedDataSource,
-			framework: selectedFramework,
-			environment: selectedEnvironment,
-			module: {
-				name: activeStep?.module?.title,
-				id: activeStep?.module?.id,
-			},
-			step: {
-				name: activeStep?.step?.title,
-				id: activeStep?.step?.id,
-			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedEnvironment]);
-
 	return (
 		<>
 			<Typography.Text className="environment-title">

frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx

@@ -26,7 +26,11 @@ const enum ApplicationLogsType {
 
 export default function LogsConnectionStatus(): JSX.Element {
 	const [loading, setLoading] = useState(true);
-	const { selectedDataSource } = useOnboardingContext();
+	const {
+		selectedDataSource,
+		activeStep,
+		selectedEnvironment,
+	} = useOnboardingContext();
 	const { trackEvent } = useAnalytics();
 	const [isReceivingData, setIsReceivingData] = useState(false);
 	const [pollingInterval, setPollingInterval] = useState<number | false>(15000); // initial Polling interval of 15 secs , Set to false after 5 mins
@@ -94,7 +98,10 @@ export default function LogsConnectionStatus(): JSX.Element {
 			setRetryCount(retryCount - 1);
 
 			if (retryCount < 0) {
-				trackEvent('❌ Onboarding: Logs Management: Connection Status', {
+				trackEvent('Onboarding V2: Connection Status', {
+					dataSource: selectedDataSource?.id,
+					environment: selectedEnvironment,
+					module: activeStep?.module?.id,
 					status: 'Failed',
 				});
 
@@ -127,7 +134,10 @@ export default function LogsConnectionStatus(): JSX.Element {
 					setRetryCount(-1);
 					setPollingInterval(false);
 
-					trackEvent('✅ Onboarding: Logs Management: Connection Status', {
+					trackEvent('Onboarding V2: Connection Status', {
+						dataSource: selectedDataSource?.id,
+						environment: selectedEnvironment,
+						module: activeStep?.module?.id,
 						status: 'Successful',
 					});
 

frontend/src/container/OnboardingContainer/Steps/MarkdownStep/MarkdownStep.tsx

@@ -8,7 +8,6 @@ import {
 	useOnboardingContext,
 } from 'container/OnboardingContainer/context/OnboardingContext';
 import { ModulesMap } from 'container/OnboardingContainer/OnboardingContainer';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useEffect, useState } from 'react';
 
 export interface IngestionInfoProps {
@@ -28,8 +27,6 @@ export default function MarkdownStep(): JSX.Element {
 		selectedMethod,
 	} = useOnboardingContext();
 
-	const { trackEvent } = useAnalytics();
-
 	const [markdownContent, setMarkdownContent] = useState('');
 
 	const { step } = activeStep;
@@ -86,26 +83,6 @@ export default function MarkdownStep(): JSX.Element {
 		REGION: ingestionData?.REGION || 'region',
 	};
 
-	useEffect(() => {
-		trackEvent(
-			`Onboarding: ${activeStep?.module?.id}: ${selectedDataSource?.name}: ${activeStep?.step?.title}`,
-			{
-				dataSource: selectedDataSource,
-				framework: selectedFramework,
-				environment: selectedEnvironment,
-				module: {
-					name: activeStep?.module?.title,
-					id: activeStep?.module?.id,
-				},
-				step: {
-					name: activeStep?.step?.title,
-					id: activeStep?.step?.id,
-				},
-			},
-		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [step]);
-
 	return (
 		<div className="markdown-container">
 			<MarkdownRenderer markdownContent={markdownContent} variables={variables} />

frontend/src/container/OnboardingContainer/Steps/SelectMethod/SelectMethod.tsx

@@ -3,45 +3,17 @@ import {
 	OnboardingMethods,
 	useOnboardingContext,
 } from 'container/OnboardingContainer/context/OnboardingContext';
-import useAnalytics from 'hooks/analytics/useAnalytics';
+import { useState } from 'react';
-import { useEffect, useState } from 'react';
 
 export default function SelectMethod(): JSX.Element {
-	const {
+	const { selectedMethod, updateSelectedMethod } = useOnboardingContext();
-		activeStep,
-		selectedDataSource,
-		selectedFramework,
-		selectedEnvironment,
-		selectedMethod,
-		updateSelectedMethod,
-	} = useOnboardingContext();
 	const [value, setValue] = useState(selectedMethod);
 
-	const { trackEvent } = useAnalytics();
-
 	const onChange = (e: RadioChangeEvent): void => {
 		setValue(e.target.value);
 		updateSelectedMethod(e.target.value);
 	};
 
-	useEffect(() => {
-		// on language select
-		trackEvent('Onboarding: Environment Selected', {
-			dataSource: selectedDataSource,
-			framework: selectedFramework,
-			environment: selectedEnvironment,
-			module: {
-				name: activeStep?.module?.title,
-				id: activeStep?.module?.id,
-			},
-			step: {
-				name: activeStep?.step?.title,
-				id: activeStep?.step?.id,
-			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedMethod]);
-
 	return (
 		<div>
 			<Radio.Group onChange={onChange} value={value}>

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -68,6 +68,7 @@ export default function ModuleStepsContainer({
 		selectedDataSource,
 		selectedEnvironment,
 		selectedFramework,
+		selectedMethod,
 		updateActiveStep,
 		updateErrorDetails,
 		resetProgress,
@@ -135,8 +136,13 @@ export default function ModuleStepsContainer({
 	};
 
 	const redirectToModules = (): void => {
-		trackEvent('Onboarding Complete', {
+		trackEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
+			dataSource: selectedDataSource?.id,
+			framework: selectedFramework,
+			environment: selectedEnvironment,
+			selectedMethod,
+			serviceName,
 		});
 
 		if (selectedModule.id === ModulesMap.APM) {
@@ -166,6 +172,101 @@ export default function ModuleStepsContainer({
 					module: selectedModule,
 					step: selectedModuleSteps[current + 1],
 				});
+				// on next step click track events
+				switch (selectedModuleSteps[current].id) {
+					case stepsMap.dataSource:
+						trackEvent('Onboarding V2: Data Source Selected', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.environmentDetails:
+						trackEvent('Onboarding V2: Environment Selected', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							environment: selectedEnvironment,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.selectMethod:
+						trackEvent('Onboarding V2: Method Selected', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							environment: selectedEnvironment,
+							selectedMethod,
+							module: activeStep?.module?.id,
+						});
+						break;
+
+					case stepsMap.setupOtelCollector:
+						trackEvent('Onboarding V2: Setup Otel Collector', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							environment: selectedEnvironment,
+							selectedMethod,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.instrumentApplication:
+						trackEvent('Onboarding V2: Instrument Application', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							environment: selectedEnvironment,
+							selectedMethod,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.cloneRepository:
+						trackEvent('Onboarding V2: Clone Repository', {
+							dataSource: selectedDataSource?.id,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.runApplication:
+						trackEvent('Onboarding V2: Run Application', {
+							dataSource: selectedDataSource?.id,
+							framework: selectedFramework,
+							environment: selectedEnvironment,
+							selectedMethod,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.addHttpDrain:
+						trackEvent('Onboarding V2: Add HTTP Drain', {
+							dataSource: selectedDataSource?.id,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.startContainer:
+						trackEvent('Onboarding V2: Start Container', {
+							dataSource: selectedDataSource?.id,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.setupLogDrains:
+						trackEvent('Onboarding V2: Setup Log Drains', {
+							dataSource: selectedDataSource?.id,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.configureReceiver:
+						trackEvent('Onboarding V2: Configure Receiver', {
+							dataSource: selectedDataSource?.id,
+							environment: selectedEnvironment,
+							module: activeStep?.module?.id,
+						});
+						break;
+					case stepsMap.configureAws:
+						trackEvent('Onboarding V2: Configure AWS', {
+							dataSource: selectedDataSource?.id,
+							environment: selectedEnvironment,
+							module: activeStep?.module?.id,
+						});
+						break;
+					default:
+						break;
+				}
 			}
 
 			// set meta data

frontend/src/hooks/analytics/useAnalytics.tsx

@@ -26,8 +26,8 @@ const useAnalytics = (): any => {
 				},
 			};
 
-			const updatedPropertes = { ...properties };
+			const updatedProperties = { ...properties };
-			updatedPropertes.userId = user.email;
+			updatedProperties.userId = user.email;
 			window.analytics.track(eventName, properties, context);
 		}
 	};