feat: add plausible for onboarding (#8352)

Tracking events for

1. Onboarding started/project created
2. Onboarding finishes
3. API token generated
4. Sdk example clicked

Not tracking events that can happen multiple times and results are
skewed

1. Moving between onboarding steps

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 = ({
                                     </Button>
                                 ) : null}
 
-                                <Button variant='contained' onClick={onFinish}>
+                                <Button
+                                    variant='contained'
+                                    onClick={() => {
+                                        onFinish(sdk.name);
+                                    }}
+                                >
                                     Complete
                                 </Button>
                             </NextStepSectionSpacedContainer>

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 (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>

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 (
         <>
             <TitleContainer>View SDK Example</TitleContainer>
@@ -88,6 +100,7 @@ export const SdkExample = () => {
                         component={Link}
                         variant='text'
                         color='primary'
+                        onClick={trackClick}
                     >
                         Go to example
                     </StyledButton>

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));
             }

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}

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);