analytics(explore): Adding onboarding ui analytics (#85611)

Co-authored-by: Abdullah Khan <[email protected]>
getsentry · Feb 21, 2025 · f8cf152 · f8cf152
1 parent f413bda
commit f8cf152
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 8 deletions.
diff --git a/static/app/utils/analytics/tracingEventMap.tsx b/static/app/utils/analytics/tracingEventMap.tsx
@@ -1,3 +1,4 @@
+import type {PlatformKey} from 'sentry/types/project';
 import type {BaseVisualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import type {TraceWaterFallSource} from 'sentry/views/performance/newTraceDetails/traceAnalytics';
 import type {TraceDrawerActionKind} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
@@ -103,6 +104,17 @@ export type TracingEventParameters = {
   'trace.trace_warning_type': {
     type: string;
   };
+  'trace.tracing_onboarding': {
+    platform: PlatformKey;
+    supports_onboarding_checklist: boolean;
+    supports_performance: boolean;
+  };
+  'trace.tracing_onboarding_performance_docs_viewed': {
+    platform: string;
+  };
+  'trace.tracing_onboarding_platform_docs_viewed': {
+    platform: string;
+  };
   'trace_explorer.add_span_condition': Record<string, unknown>;
   'trace_explorer.open_in_issues': Record<string, unknown>;
   'trace_explorer.open_trace': {
@@ -146,6 +158,11 @@ export const tracingEventMap: Record<TracingEventKey, string | null> = {
   'trace.trace_layout.change': 'Changed Trace Layout',
   'trace.trace_layout.drawer_minimize': 'Minimized Trace Drawer',
   'trace.trace_drawer_explore_search': 'Searched Trace Explorer',
+  'trace.tracing_onboarding': 'Tracing Onboarding UI',
+  'trace.tracing_onboarding_platform_docs_viewed':
+    'Viewed Platform Docs for Onboarding UI',
+  'trace.tracing_onboarding_performance_docs_viewed':
+    'Viewed Performance Setup Docs from Onboarding UI',
   'trace.trace_layout.show_in_view': 'Clicked Show in View Action',
   'trace.trace_layout.view_event_json': 'Clicked View Event JSON Action',
   'trace.trace_layout.tab_pin': 'Pinned Trace Tab',

diff --git a/static/app/views/performance/newTraceDetails/traceAnalytics.tsx b/static/app/views/performance/newTraceDetails/traceAnalytics.tsx
@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/react';
 import * as qs from 'query-string';
 
 import type {Organization} from 'sentry/types/organization';
-import type {Project} from 'sentry/types/project';
+import type {PlatformKey, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 
 import type {TraceDrawerActionKind} from './traceDrawer/details/utils';
@@ -76,6 +76,31 @@ const trackShowInView = (organization: Organization) =>
     organization,
   });
 
+const trackTracingOnboarding = (
+  organization: Organization,
+  platform: PlatformKey,
+  supports_performance: boolean,
+  supports_onboarding_checklist: boolean
+) =>
+  trackAnalytics('trace.tracing_onboarding', {
+    organization,
+    platform,
+    supports_performance,
+    supports_onboarding_checklist,
+  });
+
+const trackPlatformDocsViewed = (organization: Organization, platform: string) =>
+  trackAnalytics('trace.tracing_onboarding_platform_docs_viewed', {
+    organization,
+    platform,
+  });
+
+const trackPerformanceSetupDocsViewed = (organization: Organization, platform: string) =>
+  trackAnalytics('trace.tracing_onboarding_performance_docs_viewed', {
+    organization,
+    platform,
+  });
+
 const trackViewEventJSON = (organization: Organization) =>
   trackAnalytics('trace.trace_layout.view_event_json', {
     organization,
@@ -231,6 +256,10 @@ function trackTraceShape(
 }
 
 const traceAnalytics = {
+  // Trace Onboarding
+  trackTracingOnboarding,
+  trackPlatformDocsViewed,
+  trackPerformanceSetupDocsViewed,
   // Trace shape
   trackTraceMetadata,
   trackTraceShape,

diff --git a/static/app/views/performance/onboarding.tsx b/static/app/views/performance/onboarding.tsx
@@ -62,6 +62,8 @@ import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useProjects from 'sentry/utils/useProjects';
 
+import {traceAnalytics} from './newTraceDetails/traceAnalytics';
+
 const performanceSetupUrl =
   'https://docs.sentry.io/performance-monitoring/getting-started/';
 
@@ -488,6 +490,30 @@ export function Onboarding({organization, project}: OnboardingProps) {
     productType: 'performance',
   });
 
+  const doesNotSupportPerformance = project.platform
+    ? withoutPerformanceSupport.has(project.platform)
+    : false;
+
+  useEffect(() => {
+    if (isLoading || !currentPlatform || !dsn || !projectKeyId) {
+      return;
+    }
+
+    traceAnalytics.trackTracingOnboarding(
+      organization,
+      currentPlatform.id,
+      !doesNotSupportPerformance,
+      withPerformanceOnboarding.has(currentPlatform.id)
+    );
+  }, [
+    currentPlatform,
+    isLoading,
+    dsn,
+    projectKeyId,
+    organization,
+    doesNotSupportPerformance,
+  ]);
+
   if (!showNewUi) {
     return <LegacyOnboarding organization={organization} project={project} />;
   }
@@ -498,10 +524,6 @@ export function Onboarding({organization, project}: OnboardingProps) {
     return <LoadingIndicator />;
   }
 
-  const doesNotSupportPerformance = project.platform
-    ? withoutPerformanceSupport.has(project.platform)
-    : false;
-
   if (doesNotSupportPerformance) {
     return (
       <OnboardingPanel project={project}>
@@ -513,8 +535,18 @@ export function Onboarding({organization, project}: OnboardingProps) {
         </div>
         <br />
         <div>
-          <LinkButton size="sm" href="https://docs.sentry.io/platforms/" external>
-            {t('Go to Sentry Documentation')}
+          <LinkButton
+            size="sm"
+            href="https://docs.sentry.io/platforms/"
+            external
+            onClick={() => {
+              traceAnalytics.trackPlatformDocsViewed(
+                organization,
+                currentPlatform?.id ?? project.platform ?? 'unknown'
+              );
+            }}
+          >
+            {t('Go to Documentation')}
           </LinkButton>
         </div>
       </OnboardingPanel>
@@ -536,8 +568,14 @@ export function Onboarding({organization, project}: OnboardingProps) {
             size="sm"
             href="https://docs.sentry.io/product/performance/getting-started/"
             external
+            onClick={() => {
+              traceAnalytics.trackPerformanceSetupDocsViewed(
+                organization,
+                currentPlatform?.id ?? project.platform ?? 'unknown'
+              );
+            }}
           >
-            {t('Go to documentation')}
+            {t('Go to Documentation')}
           </LinkButton>
         </div>
       </OnboardingPanel>