diff --git a/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx index 72cd45f88e..a036223b07 100644 --- a/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx +++ b/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx @@ -19,7 +19,7 @@ import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectO interface IConnectSDKDialogProps { open: boolean; onClose: () => void; - onFinish: () => void; + onFinish: (sdkName: string) => void; project: string; environments: string[]; feature?: string; @@ -169,7 +169,12 @@ export const ConnectSdkDialog = ({ ) : null} - diff --git a/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx b/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx index cdceda486e..9a9a9af5d7 100644 --- a/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx +++ b/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx @@ -18,6 +18,7 @@ import { useEffect } from 'react'; import { SectionHeader, StepperBox } from './SharedComponents'; import { Stepper } from './Stepper'; import { Badge } from 'component/common/Badge/Badge'; +import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; const ChooseEnvironment = ({ environments, @@ -194,6 +195,7 @@ export const GenerateApiKey = ({ onEnvSelect, onApiKey, }: GenerateApiKeyProps) => { + const { trackEvent } = usePlausibleTracker(); const { tokens, refetch: refreshTokens } = useProjectApiTokens(project); const { createToken, loading: creatingToken } = useProjectApiTokensApi(); const currentEnvironmentToken = tokens.find( @@ -220,11 +222,20 @@ export const GenerateApiKey = ({ project, ); refreshTokens(); + trackGenerate(); } catch (error: unknown) { setToastApiError(formatUnknownError(error)); } }; + const trackGenerate = () => { + trackEvent('onboarding', { + props: { + eventType: 'api-key-generated', + }, + }); + }; + return ( Connect an SDK to Unleash diff --git a/frontend/src/component/onboarding/flow/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx index 9e8ec1416e..3924a94ba1 100644 --- a/frontend/src/component/onboarding/flow/SdkExample.tsx +++ b/frontend/src/component/onboarding/flow/SdkExample.tsx @@ -9,6 +9,7 @@ import { Link } from 'react-router-dom'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; import Select from 'component/common/select'; import { allSdks, type SdkName } from '../dialog/sharedTypes'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const TitleContainer = styled('div')(({ theme }) => ({ display: 'flex', @@ -51,6 +52,8 @@ type exampleDirectories = | 'Vue'; export const SdkExample = () => { + const { trackEvent } = usePlausibleTracker(); + const sdkOptions = allSdks.map((sdk) => ({ key: sdk.name, label: sdk.name, @@ -64,6 +67,15 @@ export const SdkExample = () => { setSelectedSdk(event.target.value as SdkName); }; + const trackClick = () => { + trackEvent('onboarding', { + props: { + eventType: 'sdk-example-opened', + sdk: selectedSdk, + }, + }); + }; + return ( <> View SDK Example @@ -88,6 +100,7 @@ export const SdkExample = () => { component={Link} variant='text' color='primary' + onClick={trackClick} > Go to example diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx index e41143d4a4..26f2ff9ff7 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx @@ -27,6 +27,7 @@ import { useStickinessOptions } from 'hooks/useStickinessOptions'; import { ChangeRequestTableConfigButton } from './ConfigButtons/ChangeRequestTableConfigButton'; import { StyledDefinitionList } from './CreateProjectDialog.styles'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; +import { useUiFlag } from '../../../../../hooks/useUiFlag'; interface ICreateProjectDialogProps { open: boolean; @@ -118,6 +119,7 @@ export const CreateProjectDialog = ({ const { setToastData, setToastApiError } = useToast(); const navigate = useNavigate(); const { trackEvent } = usePlausibleTracker(); + const onboardingUIEnabled = useUiFlag('onboardingUI'); const { projectName, projectDesc, @@ -190,6 +192,11 @@ export const CreateProjectDialog = ({ trackEvent('project-mode', { props: { mode: projectMode, action: 'added' }, }); + if (onboardingUIEnabled) { + trackEvent('onboarding', { + props: { eventType: 'onboarding-started' }, + }); + } } catch (error: unknown) { setToastApiError(formatUnknownError(error)); } diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index a81e782efc..cfdf04472a 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -46,6 +46,7 @@ import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog'; import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding'; import { useLocalStorageState } from 'hooks/useLocalStorageState'; import { ProjectOnboarded } from 'component/onboarding/flow/ProjectOnboarded'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IPaginatedProjectFeatureTogglesProps { environments: string[]; @@ -66,6 +67,7 @@ const Container = styled('div')(({ theme }) => ({ export const ProjectFeatureToggles = ({ environments, }: IPaginatedProjectFeatureTogglesProps) => { + const { trackEvent } = usePlausibleTracker(); const onboardingUIEnabled = useUiFlag('onboardingUI'); const projectId = useRequiredPathParam('projectId'); const { project } = useProjectOverview(projectId); @@ -135,6 +137,17 @@ export const ProjectFeatureToggles = ({ const showFeaturesTable = (total !== undefined && total > 0) || notOnboarding; + const trackOnboardingFinish = (sdkName: string) => { + if (!isOnboarding) { + trackEvent('onboarding', { + props: { + eventType: 'onboarding-finished', + onboardedSdk: sdkName, + }, + }); + } + }; + const columns = useMemo( () => [ columnHelper.display({ @@ -557,9 +570,10 @@ export const ProjectFeatureToggles = ({ onClose={() => { setConnectSdkOpen(false); }} - onFinish={() => { + onFinish={(sdkName: string) => { setConnectSdkOpen(false); setSetupCompletedState('show-setup'); + trackOnboardingFinish(sdkName); }} project={projectId} environments={environments} diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 7430cde70d..fb807fd976 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -69,7 +69,8 @@ export type CustomEvents = | 'events-exported' | 'event-timeline-open' | 'event-timeline-close' - | 'event-timeline-event-hover'; + | 'event-timeline-event-hover' + | 'onboarding'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);