Browse Source

feat: adds ab test for apm (#45805)

This PR adds an A/B test to show `APM` in the sidebar
![Screen Shot 2023-03-14 at 3 52 54
PM](https://user-images.githubusercontent.com/8533851/225160714-f0c82b44-2545-4f03-bb95-ad3ffa6acade.png)

Going to see if that helps get people to click the tab more often and
use the product more
Stephen Cefali 2 years ago
parent
commit
1d1f986492
2 changed files with 22 additions and 1 deletions
  1. 16 1
      static/app/components/sidebar/index.tsx
  2. 6 0
      static/app/data/experimentConfig.tsx

+ 16 - 1
static/app/components/sidebar/index.tsx

@@ -36,6 +36,7 @@ import {Organization} from 'sentry/types';
 import {isDemoWalkthrough} from 'sentry/utils/demoMode';
 import {getDiscoverLandingUrl} from 'sentry/utils/discover/urls';
 import theme from 'sentry/utils/theme';
+import {useExperiment} from 'sentry/utils/useExperiment';
 import useMedia from 'sentry/utils/useMedia';
 
 import {ProfilingOnboardingSidebar} from '../profiling/ProfilingOnboarding/profilingOnboardingSidebar';
@@ -72,6 +73,9 @@ function Sidebar({location, organization}: Props) {
 
   const collapsed = !!preferences.collapsed;
   const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
+  const {logExperiment, experimentAssignment} = useExperiment('APMSidebarExperiment', {
+    logExperimentOnMount: false,
+  });
 
   const toggleCollapse = () => {
     const action = collapsed ? showSidebar : hideSidebar;
@@ -83,6 +87,13 @@ function Sidebar({location, organization}: Props) {
   // Close panel on any navigation
   useEffect(() => void hidePanel(), [location?.pathname]);
 
+  // log experiment on mount if feature enabled
+  useEffect(() => {
+    if (organization?.features.includes('performance-view')) {
+      logExperiment();
+    }
+  }, [logExperiment, organization?.features]);
+
   // Add classname to body
   useEffect(() => {
     bcl.add('body-sidebar');
@@ -180,7 +191,11 @@ function Sidebar({location, organization}: Props) {
       <SidebarItem
         {...sidebarItemProps}
         icon={<IconLightning size="md" />}
-        label={<GuideAnchor target="performance">{t('Performance')}</GuideAnchor>}
+        label={
+          <GuideAnchor target="performance">
+            {experimentAssignment === 1 ? t('APM') : t('Performance')}
+          </GuideAnchor>
+        }
         to={`/organizations/${organization.slug}/performance/`}
         id="performance"
       />

+ 6 - 0
static/app/data/experimentConfig.tsx

@@ -23,6 +23,12 @@ export const experimentList: {
     parameter: 'scenario',
     assignments: ['baseline', 'variant1', 'variant2'],
   },
+  {
+    key: 'APMSidebarExperiment',
+    type: ExperimentType.Organization,
+    parameter: 'exposed',
+    assignments: [0, 1],
+  },
 ];
 
 export const experimentConfig = experimentList.reduce(