ref(analytics): convert pagelayout analytics (#42093)

static/app/utils/analytics/performanceAnalyticsEvents.tsx

@@ -9,22 +9,28 @@ type PerformanceTourParams = {
   step: number;
 };
 
+type PageLayoutParams = {
+  project_platforms: string;
+};
+
 export type PerformanceEventParameters = {
   'performance_views.all_events.open_in_discover': {};
+  'performance_views.anomalies.anomalies_tab_clicked': PageLayoutParams;
   'performance_views.create_sample_transaction': SampleTransactionParam;
   'performance_views.event_details.anchor_span': {
     span_id: string;
   };
+
   'performance_views.event_details.filter_by_op': {
     operation: string;
   };
-
   'performance_views.event_details.json_button_click': {};
   'performance_views.event_details.open_span_details': {
     operation: string;
     project_platform: string;
   };
   'performance_views.event_details.search_query': {};
+  'performance_views.events.events_tab_clicked': PageLayoutParams;
   'performance_views.filter_dropdown.selection': {
     action: string;
   };
@@ -83,6 +89,7 @@ export type PerformanceEventParameters = {
   'performance_views.spans.change_sort': {
     sort_column?: string;
   };
+  'performance_views.spans.spans_tab_clicked': PageLayoutParams;
   'performance_views.summary.tag_explorer.cell_action': {};
   'performance_views.summary.tag_explorer.change_page': {};
   'performance_views.summary.tag_explorer.sort': {
@@ -100,6 +107,7 @@ export type PerformanceEventParameters = {
     to_tag: string;
   };
   'performance_views.tags.jump_to_release': {};
+  'performance_views.tags.tags_tab_clicked': PageLayoutParams;
   'performance_views.team_key_transaction.set': {
     action: string;
   };
@@ -138,6 +146,7 @@ export type PerformanceEventParameters = {
   'performance_views.vital_detail.view': {
     project_platforms: string;
   };
+  'performance_views.vitals.vitals_tab_clicked': PageLayoutParams;
 };
 
 export type PerformanceEventKey = keyof PerformanceEventParameters;
@@ -223,4 +232,10 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
   'performance_views.relative_breakdown.selection':
     'Performance Views: Select Relative Breakdown',
   'performance_views.mep.metrics_outcome': 'Performance Views: Metrics Outcome',
+  'performance_views.vitals.vitals_tab_clicked': 'Performance Views: Vitals tab clicked',
+  'performance_views.tags.tags_tab_clicked': 'Performance Views: Tags tab clicked',
+  'performance_views.events.events_tab_clicked': 'Performance Views: Events tab clicked',
+  'performance_views.spans.spans_tab_clicked': 'Performance Views: Spans tab clicked',
+  'performance_views.anomalies.anomalies_tab_clicked':
+    'Performance Views: Anomalies tab clicked',
 };

static/app/views/performance/transactionSummary/pageLayout.tsx

@@ -14,7 +14,7 @@ import {t} from 'sentry/locale';
 import {PageContent} from 'sentry/styles/organization';
 import {Organization, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {useMetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/performanceEventViewContext';
@@ -35,32 +35,19 @@ import Tab from './tabs';
 import {TransactionThresholdMetric} from './transactionThresholdModal';
 import {transactionSummaryRouteWithQuery} from './utils';
 
-type AnalyticInfo = {
-  eventKey: string;
-  eventName: string;
-};
+type TabEvents =
+  | 'performance_views.vitals.vitals_tab_clicked'
+  | 'performance_views.tags.tags_tab_clicked'
+  | 'performance_views.events.events_tab_clicked'
+  | 'performance_views.spans.spans_tab_clicked'
+  | 'performance_views.anomalies.anomalies_tab_clicked';
 
-const TAB_ANALYTICS: Partial<Record<Tab, AnalyticInfo>> = {
-  [Tab.WebVitals]: {
-    eventKey: 'performance_views.vitals.vitals_tab_clicked',
-    eventName: 'Performance Views: Vitals tab clicked',
-  },
-  [Tab.Tags]: {
-    eventKey: 'performance_views.tags.tags_tab_clicked',
-    eventName: 'Performance Views: Tags tab clicked',
-  },
-  [Tab.Events]: {
-    eventKey: 'performance_views.events.events_tab_clicked',
-    eventName: 'Performance Views: Events tab clicked',
-  },
-  [Tab.Spans]: {
-    eventKey: 'performance_views.spans.spans_tab_clicked',
-    eventName: 'Performance Views: Spans tab clicked',
-  },
-  [Tab.Anomalies]: {
-    eventKey: 'performance_views.anomalies.anomalies_tab_clicked',
-    eventName: 'Performance Views: Anomalies tab clicked',
-  },
+const TAB_ANALYTICS: Partial<Record<Tab, TabEvents>> = {
+  [Tab.WebVitals]: 'performance_views.vitals.vitals_tab_clicked',
+  [Tab.Tags]: 'performance_views.tags.tags_tab_clicked',
+  [Tab.Events]: 'performance_views.events.events_tab_clicked',
+  [Tab.Spans]: 'performance_views.spans.spans_tab_clicked',
+  [Tab.Anomalies]: 'performance_views.anomalies.anomalies_tab_clicked',
 };
 
 export type ChildProps = {
@@ -161,11 +148,10 @@ function PageLayout(props: Props) {
         return;
       }
 
-      const analyticKeys = TAB_ANALYTICS[newTab];
-      if (analyticKeys) {
-        trackAnalyticsEvent({
-          ...analyticKeys,
-          organization_id: organization.id,
+      const analyticsKey = TAB_ANALYTICS[newTab];
+      if (analyticsKey) {
+        trackAdvancedAnalyticsEvent(analyticsKey, {
+          organization,
           project_platforms: getSelectedProjectPlatforms(location, projects),
         });
       }