chore: update events for onboarding part 2 (#6397)

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -82,7 +82,7 @@ export function AboutSigNozQuestions({
 			otherInterestInSignoz,
 		});
 
-		logEvent('User Onboarding: About SigNoz Questions Answered', {
+		logEvent('Org Onboarding: Answered', {
 			hearAboutSignoz,
 			otherAboutSignoz,
 			interestInSignoz,

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -161,6 +161,13 @@ function InviteTeamMembers({
 
 			setInviteUsersSuccessResponse(successfulInvites);
 
+			logEvent('Org Onboarding: Invite Team Members Success', {
+				teamMembers: teamMembersToInvite,
+				totalInvites: inviteUsersResponse.summary.total_invites,
+				successfulInvites: inviteUsersResponse.summary.successful_invites,
+				failedInvites: inviteUsersResponse.summary.failed_invites,
+			});
+
 			setTimeout(() => {
 				setDisableNextButton(false);
 				onNext();
@@ -172,6 +179,13 @@ function InviteTeamMembers({
 
 			setInviteUsersSuccessResponse(successfulInvites);
 
+			logEvent('Org Onboarding: Invite Team Members Partial Success', {
+				teamMembers: teamMembersToInvite,
+				totalInvites: inviteUsersResponse.summary.total_invites,
+				successfulInvites: inviteUsersResponse.summary.successful_invites,
+				failedInvites: inviteUsersResponse.summary.failed_invites,
+			});
+
 			if (inviteUsersResponse.failed_invites.length > 0) {
 				setHasErrors(true);
 
@@ -182,27 +196,21 @@ function InviteTeamMembers({
 		}
 	};
 
-	const {
+	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
-		mutate: sendInvites,
+		inviteUsers,
-		isLoading: isSendingInvites,
+		{
-		data: inviteUsersApiResponseData,
+			onSuccess: (response: SuccessResponse<InviteUsersResponse>): void => {
-	} = useMutation(inviteUsers, {
+				handleInviteUsersSuccess(response);
-		onSuccess: (response: SuccessResponse<InviteUsersResponse>): void => {
+			},
-			logEvent('User Onboarding: Invite Team Members Sent', {
+			onError: (error: AxiosError): void => {
-				teamMembers: teamMembersToInvite,
+				logEvent('Org Onboarding: Invite Team Members Failed', {
-			});
+					teamMembers: teamMembersToInvite,
+				});
 
-			handleInviteUsersSuccess(response);
+				handleError(error);
+			},
 		},
-		onError: (error: AxiosError): void => {
+	);
-			logEvent('User Onboarding: Invite Team Members Failed', {
-				teamMembers: teamMembersToInvite,
-				error,
-			});
-
-			handleError(error);
-		},
-	});
 
 	const handleNext = (): void => {
 		if (validateAllUsers()) {
@@ -254,9 +262,8 @@ function InviteTeamMembers({
 	};
 
 	const handleDoLater = (): void => {
-		logEvent('User Onboarding: Invite Team Members Skipped', {
+		logEvent('Org Onboarding: Clicked Do Later', {
-			teamMembers: teamMembersToInvite,
+			currentPageID: 4,
-			apiResponse: inviteUsersApiResponseData,
 		});
 
 		onNext();

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -122,7 +122,7 @@ function OptimiseSignozNeeds({
 	}, [services, hostsPerDay, logsPerDay]);
 
 	const handleOnNext = (): void => {
-		logEvent('User Onboarding: Optimise SigNoz Needs Answered', {
+		logEvent('Org Onboarding: Answered', {
 			logsPerDay,
 			hostsPerDay,
 			services,
@@ -144,10 +144,8 @@ function OptimiseSignozNeeds({
 
 		onWillDoLater();
 
-		logEvent('User Onboarding: Optimise SigNoz Needs Skipped', {
+		logEvent('Org Onboarding: Clicked Do Later', {
-			logsPerDay: 0,
+			currentPageID: 3,
-			hostsPerDay: 0,
-			services: 0,
 		});
 	};
 

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -94,6 +94,13 @@ function OrgQuestions({
 			organisationName === '' ||
 			orgDetails.organisationName === organisationName
 		) {
+			logEvent('Org Onboarding: Answered', {
+				usesObservability,
+				observabilityTool,
+				otherTool,
+				familiarity,
+			});
+
 			onNext({
 				organisationName,
 				usesObservability,
@@ -121,10 +128,17 @@ function OrgQuestions({
 					},
 				});
 
-				logEvent('User Onboarding: Org Name Updated', {
+				logEvent('Org Onboarding: Org Name Updated', {
 					organisationName: orgDetails.organisationName,
 				});
 
+				logEvent('Org Onboarding: Answered', {
+					usesObservability,
+					observabilityTool,
+					otherTool,
+					familiarity,
+				});
+
 				onNext({
 					organisationName,
 					usesObservability,
@@ -133,7 +147,7 @@ function OrgQuestions({
 					familiarity,
 				});
 			} else {
-				logEvent('User Onboarding: Org Name Update Failed', {
+				logEvent('Org Onboarding: Org Name Update Failed', {
 					organisationName: orgDetails.organisationName,
 				});
 

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -1,6 +1,7 @@
 import './OnboardingQuestionaire.styles.scss';
 
 import { NotificationInstance } from 'antd/es/notification/interface';
+import logEvent from 'api/common/logEvent';
 import updateProfileAPI from 'api/onboarding/updateProfile';
 import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
 import updateOrgPreferenceAPI from 'api/preferences/updateOrgPreference';
@@ -61,6 +62,10 @@ const INITIAL_OPTIMISE_SIGNOZ_DETAILS: OptimiseSignozDetails = {
 	services: 0,
 };
 
+const BACK_BUTTON_EVENT_NAME = 'Org Onboarding: Back Button Clicked';
+const NEXT_BUTTON_EVENT_NAME = 'Org Onboarding: Next Button Clicked';
+const ONBOARDING_COMPLETE_EVENT_NAME = 'Org Onboarding: Complete';
+
 function OnboardingQuestionaire(): JSX.Element {
 	const { notifications } = useNotifications();
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -98,6 +103,13 @@ function OnboardingQuestionaire(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [org]);
 
+	useEffect(() => {
+		logEvent('Org Onboarding: Started', {
+			org_id: org?.[0]?.id,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const { refetch: refetchOrgPreferences } = useQuery({
 		queryFn: () => getAllOrgPreferences(),
 		queryKey: ['getOrgPreferences'],
@@ -120,6 +132,8 @@ function OnboardingQuestionaire(): JSX.Element {
 
 			setUpdatingOrgOnboardingStatus(false);
 
+			logEvent('Org Onboarding: Redirecting to Get Started', {});
+
 			history.push(ROUTES.GET_STARTED);
 		},
 		onError: () => {
@@ -156,6 +170,11 @@ function OnboardingQuestionaire(): JSX.Element {
 	});
 
 	const handleUpdateProfile = (): void => {
+		logEvent(NEXT_BUTTON_EVENT_NAME, {
+			currentPageID: 3,
+			nextPageID: 4,
+		});
+
 		updateProfile({
 			familiarity_with_observability: orgDetails?.familiarity as string,
 			has_existing_observability_tool: orgDetails?.usesObservability as boolean,
@@ -180,6 +199,10 @@ function OnboardingQuestionaire(): JSX.Element {
 	};
 
 	const handleOnboardingComplete = (): void => {
+		logEvent(ONBOARDING_COMPLETE_EVENT_NAME, {
+			currentPageID: 4,
+		});
+
 		setUpdatingOrgOnboardingStatus(true);
 		updateOrgPreference({
 			preferenceID: 'ORG_ONBOARDING',
@@ -199,6 +222,11 @@ function OnboardingQuestionaire(): JSX.Element {
 						currentOrgData={currentOrgData}
 						orgDetails={orgDetails}
 						onNext={(orgDetails: OrgDetails): void => {
+							logEvent(NEXT_BUTTON_EVENT_NAME, {
+								currentPageID: 1,
+								nextPageID: 2,
+							});
+
 							setOrgDetails(orgDetails);
 							setCurrentStep(2);
 						}}
@@ -209,8 +237,20 @@ function OnboardingQuestionaire(): JSX.Element {
 					<AboutSigNozQuestions
 						signozDetails={signozDetails}
 						setSignozDetails={setSignozDetails}
-						onBack={(): void => setCurrentStep(1)}
+						onBack={(): void => {
-						onNext={(): void => setCurrentStep(3)}
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 2,
+								prevPageID: 1,
+							});
+							setCurrentStep(1);
+						}}
+						onNext={(): void => {
+							logEvent(NEXT_BUTTON_EVENT_NAME, {
+								currentPageID: 2,
+								nextPageID: 3,
+							});
+							setCurrentStep(3);
+						}}
 					/>
 				)}
 
@@ -220,9 +260,15 @@ function OnboardingQuestionaire(): JSX.Element {
 						isUpdatingProfile={isUpdatingProfile}
 						optimiseSignozDetails={optimiseSignozDetails}
 						setOptimiseSignozDetails={setOptimiseSignozDetails}
-						onBack={(): void => setCurrentStep(2)}
+						onBack={(): void => {
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 3,
+								prevPageID: 2,
+							});
+							setCurrentStep(2);
+						}}
 						onNext={handleUpdateProfile}
-						onWillDoLater={(): void => setCurrentStep(4)} // This is temporary, only to skip gateway api call as it's not setup on staging yet
+						onWillDoLater={(): void => setCurrentStep(4)}
 					/>
 				)}
 
@@ -231,7 +277,13 @@ function OnboardingQuestionaire(): JSX.Element {
 						isLoading={updatingOrgOnboardingStatus}
 						teamMembers={teamMembers}
 						setTeamMembers={setTeamMembers}
-						onBack={(): void => setCurrentStep(3)}
+						onBack={(): void => {
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 4,
+								prevPageID: 3,
+							});
+							setCurrentStep(3);
+						}}
 						onNext={handleOnboardingComplete}
 					/>
 				)}