feat(onboarding): Add product selection experiment - (#46433)

static/app/data/experimentConfig.tsx

@@ -12,6 +12,12 @@ export const unassignedValue = -1;
  * Frontend experiment configuration object
  */
 export const experimentList = [
+  {
+    key: 'OnboardingProductSelectionExperiment',
+    type: ExperimentType.Organization,
+    parameter: 'scenario',
+    assignments: ['baseline', 'variant1', 'variant2'],
+  },
   {
     key: 'OnboardingNewFooterExperiment',
     type: ExperimentType.Organization,

static/app/views/onboarding/onboarding.tsx

@@ -22,6 +22,7 @@ import handleXhrErrorResponse from 'sentry/utils/handleXhrErrorResponse';
 import Redirect from 'sentry/utils/redirect';
 import testableTransition from 'sentry/utils/testableTransition';
 import useApi from 'sentry/utils/useApi';
+import {useExperiment} from 'sentry/utils/useExperiment';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import PageCorners from 'sentry/views/onboarding/components/pageCorners';
@@ -82,6 +83,16 @@ function Onboarding(props: Props) {
   const onboardingContext = useContext(OnboardingContext);
   const selectedPlatforms = clientState?.selectedPlatforms || [];
   const selectedProjectSlug = selectedPlatforms[0];
+  const {
+    logExperiment: productSelectionLogExperiment,
+    experimentAssignment: productSelectionAssignment,
+  } = useExperiment('OnboardingProductSelectionExperiment', {
+    logExperimentOnMount: false,
+  });
+
+  const docsWithProductSelection = !!organization.features?.includes(
+    'onboarding-docs-with-product-selection'
+  );
 
   const {
     params: {step: stepId},
@@ -95,6 +106,12 @@ function Onboarding(props: Props) {
     };
   }, []);
 
+  useEffect(() => {
+    if (docsWithProductSelection) {
+      productSelectionLogExperiment();
+    }
+  }, [productSelectionLogExperiment, docsWithProductSelection]);
+
   const heartbeatFooter = !!organization?.features.includes(
     'onboarding-heartbeat-footer'
   );
@@ -160,14 +177,16 @@ function Onboarding(props: Props) {
       if (
         nextStep.id === 'setup-docs' &&
         platforms?.[0] === 'javascript-react' &&
-        organization.features?.includes('onboarding-docs-with-product-selection')
+        docsWithProductSelection
       ) {
-        props.router.push(
-          normalizeUrl(
-            `/onboarding/${organization.slug}/${nextStep.id}/?product=${PRODUCT.PERFORMANCE_MONITORING}&product=${PRODUCT.SESSION_REPLAY}`
-          )
-        );
-        return;
+        if (productSelectionAssignment === 'variant1') {
+          props.router.push(
+            normalizeUrl(
+              `/onboarding/${organization.slug}/${nextStep.id}/?product=${PRODUCT.PERFORMANCE_MONITORING}&product=${PRODUCT.SESSION_REPLAY}`
+            )
+          );
+          return;
+        }
       }
       props.router.push(normalizeUrl(`/onboarding/${organization.slug}/${nextStep.id}/`));
     },
@@ -176,7 +195,8 @@ function Onboarding(props: Props) {
       onboardingSteps,
       cornerVariantControl,
       props.router,
-      organization.features,
+      productSelectionAssignment,
+      docsWithProductSelection,
     ]
   );
 

static/app/views/onboarding/setupDocs.tsx

@@ -39,6 +39,32 @@ const INCOMPLETE_DOC_FLAG = 'TODO-ADD-VERIFICATION-EXAMPLE';
 
 type PlatformDoc = {html: string; link: string};
 
+function OnboardingProductSelection({organization}: {organization: Organization}) {
+  const {experimentAssignment: productSelectionAssignment} = useExperiment(
+    'OnboardingProductSelectionExperiment',
+    {
+      logExperimentOnMount: false,
+    }
+  );
+
+  const docsWithProductSelection = !!organization.features?.includes(
+    'onboarding-docs-with-product-selection'
+  );
+
+  if (!docsWithProductSelection) {
+    return null;
+  }
+
+  if (
+    productSelectionAssignment === 'variant1' ||
+    productSelectionAssignment === 'variant2'
+  ) {
+    return <ProductSelection />;
+  }
+
+  return null;
+}
+
 type Props = {
   search: string;
 } & StepProps;
@@ -56,6 +82,7 @@ function ProjectDocs(props: {
       Platform documentation is not rendered in for tests in CI
     </Alert>
   );
+
   const missingExampleWarning = () => {
     const missingExample =
       props.platformDocs && props.platformDocs.html.includes(INCOMPLETE_DOC_FLAG);
@@ -108,10 +135,9 @@ function ProjectDocs(props: {
         )}
         platform={currentPlatform}
       />
-      {currentPlatform === 'javascript-react' &&
-        props.organization.features?.includes(
-          'onboarding-docs-with-product-selection'
-        ) && <ProductSelection />}
+      {currentPlatform === 'javascript-react' && (
+        <OnboardingProductSelection organization={props.organization} />
+      )}
       {getDynamicText({
         value: !props.hasError ? docs : loadingError,
         fixed: testOnlyAlert,
@@ -129,12 +155,12 @@ function SetupDocs({search, route, router, location, ...props}: Props) {
     props.selectedProjectSlug
   );
 
-  const {logExperiment, experimentAssignment} = useExperiment(
-    'OnboardingNewFooterExperiment',
-    {
-      logExperimentOnMount: false,
-    }
-  );
+  const {
+    logExperiment: newFooterLogExperiment,
+    experimentAssignment: newFooterAssignment,
+  } = useExperiment('OnboardingNewFooterExperiment', {
+    logExperimentOnMount: false,
+  });
 
   const singleSelectPlatform = !!organization?.features.includes(
     'onboarding-remove-multiselect-platform'
@@ -260,9 +286,9 @@ function SetupDocs({search, route, router, location, ...props}: Props) {
   // log experiment on mount if feature enabled
   useEffect(() => {
     if (heartbeatFooter) {
-      logExperiment();
+      newFooterLogExperiment();
     }
-  }, [logExperiment, heartbeatFooter]);
+  }, [newFooterLogExperiment, heartbeatFooter]);
 
   if (!project) {
     return null;
@@ -336,7 +362,7 @@ function SetupDocs({search, route, router, location, ...props}: Props) {
       </Wrapper>
 
       {heartbeatFooter ? (
-        experimentAssignment === 'variant2' ? (
+        newFooterAssignment === 'variant2' ? (
           <FooterWithViewSampleErrorButton
             projectSlug={project.slug}
             projectId={project.id}
@@ -345,7 +371,7 @@ function SetupDocs({search, route, router, location, ...props}: Props) {
             location={location}
             newOrg
           />
-        ) : experimentAssignment === 'variant1' ? (
+        ) : newFooterAssignment === 'variant1' ? (
           <Footer
             projectSlug={project.slug}
             projectId={project.id}