diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx index 4354349304..dfe2f7affe 100644 --- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx +++ b/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, }); diff --git a/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx index 2a7e6621ea..ca168fbf88 100644 --- a/frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx +++ b/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', }); diff --git a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx index 9483576bc2..a52113c572 100644 --- a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx +++ b/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({ diff --git a/frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx b/frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx index dc8cc85a5c..f4f8381de7 100644 --- a/frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx +++ b/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 ( <> diff --git a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx index 954dadd677..994234eca8 100644 --- a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx +++ b/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(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', }); diff --git a/frontend/src/container/OnboardingContainer/Steps/MarkdownStep/MarkdownStep.tsx b/frontend/src/container/OnboardingContainer/Steps/MarkdownStep/MarkdownStep.tsx index beec4d1065..d39e83ed53 100644 --- a/frontend/src/container/OnboardingContainer/Steps/MarkdownStep/MarkdownStep.tsx +++ b/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 (
diff --git a/frontend/src/container/OnboardingContainer/Steps/SelectMethod/SelectMethod.tsx b/frontend/src/container/OnboardingContainer/Steps/SelectMethod/SelectMethod.tsx index 79cba00260..adde17d7be 100644 --- a/frontend/src/container/OnboardingContainer/Steps/SelectMethod/SelectMethod.tsx +++ b/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 { useEffect, useState } from 'react'; +import { useState } from 'react'; export default function SelectMethod(): JSX.Element { - const { - activeStep, - selectedDataSource, - selectedFramework, - selectedEnvironment, - selectedMethod, - updateSelectedMethod, - } = useOnboardingContext(); + const { 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 (
diff --git a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx index efc4916790..7362e9a47d 100644 --- a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx +++ b/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 diff --git a/frontend/src/hooks/analytics/useAnalytics.tsx b/frontend/src/hooks/analytics/useAnalytics.tsx index 23d535063d..28213c9579 100644 --- a/frontend/src/hooks/analytics/useAnalytics.tsx +++ b/frontend/src/hooks/analytics/useAnalytics.tsx @@ -26,8 +26,8 @@ const useAnalytics = (): any => { }, }; - const updatedPropertes = { ...properties }; - updatedPropertes.userId = user.email; + const updatedProperties = { ...properties }; + updatedProperties.userId = user.email; window.analytics.track(eventName, properties, context); } };