From 2155cf95b98e061b5b9e4c7529c7ea2a307a3c97 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Thu, 7 Nov 2024 19:52:52 +0530 Subject: [PATCH] chore: update events for onboarding part 2 --- .../AboutSigNozQuestions.tsx | 2 +- .../InviteTeamMembers/InviteTeamMembers.tsx | 53 +++++++++------- .../OptimiseSignozNeeds.tsx | 8 +-- .../OrgQuestions/OrgQuestions.tsx | 18 +++++- .../OnboardingQuestionaire/index.tsx | 62 +++++++++++++++++-- 5 files changed, 107 insertions(+), 36 deletions(-) diff --git a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx index ee7606ff3f..1c061803be 100644 --- a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx +++ b/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, diff --git a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx index fef689de3a..def1cf979d 100644 --- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx +++ b/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 { - mutate: sendInvites, - isLoading: isSendingInvites, - data: inviteUsersApiResponseData, - } = useMutation(inviteUsers, { - onSuccess: (response: SuccessResponse): void => { - logEvent('User Onboarding: Invite Team Members Sent', { - teamMembers: teamMembersToInvite, - }); - - handleInviteUsersSuccess(response); + const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation( + inviteUsers, + { + onSuccess: (response: SuccessResponse): void => { + handleInviteUsersSuccess(response); + }, + onError: (error: AxiosError): void => { + logEvent('Org Onboarding: Invite Team Members Failed', { + teamMembers: teamMembersToInvite, + }); + + 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', { - teamMembers: teamMembersToInvite, - apiResponse: inviteUsersApiResponseData, + logEvent('Org Onboarding: Clicked Do Later', { + currentPageID: 4, }); onNext(); diff --git a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx b/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx index f1be6fb8ee..dc499c9308 100644 --- a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx +++ b/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', { - logsPerDay: 0, - hostsPerDay: 0, - services: 0, + logEvent('Org Onboarding: Clicked Do Later', { + currentPageID: 3, }); }; diff --git a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx index e0376a6559..7569e0fa81 100644 --- a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx +++ b/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, }); diff --git a/frontend/src/container/OnboardingQuestionaire/index.tsx b/frontend/src/container/OnboardingQuestionaire/index.tsx index 3b3ed59354..390ac00212 100644 --- a/frontend/src/container/OnboardingQuestionaire/index.tsx +++ b/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((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 { setCurrentStep(1)} - onNext={(): void => setCurrentStep(3)} + onBack={(): void => { + 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} /> )}