feat(perf): Add analytics to transaction summary and subpages (#35581)

static/app/utils/analytics/performanceAnalyticsEvents.tsx

@@ -10,6 +10,7 @@ type PerformanceTourParams = {
 };
 
 export type PerformanceEventParameters = {
+  'performance_views.all_events.open_in_discover': {};
   'performance_views.create_sample_transaction': SampleTransactionParam;
   'performance_views.landingv2.transactions.sort': {
     direction?: string;
@@ -52,6 +53,12 @@ export type PerformanceEventParameters = {
   'performance_views.spans.change_sort': {
     sort_column?: string;
   };
+  'performance_views.tags.change_tag': {
+    from_tag: string;
+    is_other_tag: boolean;
+    to_tag: string;
+  };
+  'performance_views.tags.jump_to_release': {};
   'performance_views.team_key_transaction.set': {
     action: string;
   };
@@ -59,6 +66,13 @@ export type PerformanceEventParameters = {
   'performance_views.tour.close': PerformanceTourParams;
   'performance_views.tour.start': {};
   'performance_views.trace_view.view': {};
+  'performance_views.transaction_summary.change_chart_display': {
+    from_chart: string;
+    to_chart: string;
+  };
+  'performance_views.transaction_summary.status_breakdown_click': {
+    status: string;
+  };
   'performance_views.trends.change_duration': {
     value: string;
     widget_type: string;
@@ -102,6 +116,16 @@ export const performanceEventMap: Record<PerformanceEventKey, string | null> = {
   'performance_views.overview.search': 'Performance Views: Transaction overview search',
   'performance_views.vital_detail.view': 'Performance Views: Vital Detail viewed',
   'performance_views.trace_view.view': 'Performance Views: Trace View viewed',
+  'performance_views.transaction_summary.change_chart_display':
+    'Performance Views: Transaction Summary chart display changed',
+  'performance_views.transaction_summary.status_breakdown_click':
+    'Performance Views: Transaction Summary status breakdown option clicked',
+  'performance_views.all_events.open_in_discover':
+    'Performance Views: All Events page open in Discover button clicked',
+  'performance_views.tags.change_tag':
+    'Performance Views: Tags Page changed selected tag',
+  'performance_views.tags.jump_to_release':
+    'Performance Views: Tags Page link to release in table clicked',
   'performance_views.team_key_transaction.set':
     'Performance Views: Set Team Key Transaction',
   'performance_views.trends.widget_interaction':

static/app/views/performance/transactionSummary/transactionEvents/content.tsx

@@ -14,6 +14,7 @@ import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilte
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {WebVital} from 'sentry/utils/discover/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -127,6 +128,12 @@ function Search(props: Props) {
     percentileValues
   );
 
+  const handleDiscoverButtonClick = () => {
+    trackAdvancedAnalyticsEvent('performance_views.all_events.open_in_discover', {
+      organization,
+    });
+  };
+
   return (
     <FilterActions>
       <Filter
@@ -163,7 +170,10 @@ function Search(props: Props) {
           );
         })}
       </DropdownControl>
-      <Button to={eventView.getResultsViewUrlTarget(organization.slug)}>
+      <Button
+        to={eventView.getResultsViewUrlTarget(organization.slug)}
+        onClick={handleDiscoverButtonClick}
+      >
         {t('Open in Discover')}
       </Button>
     </FilterActions>

static/app/views/performance/transactionSummary/transactionOverview/charts.tsx

@@ -12,7 +12,8 @@ import {
 import {Panel} from 'sentry/components/panels';
 import Placeholder from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
-import {OrganizationSummary, SelectValue} from 'sentry/types';
+import {Organization, SelectValue} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {removeHistogramQueryStrings} from 'sentry/utils/performance/histogram';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -73,7 +74,7 @@ type Props = {
   currentFilter: SpanOperationBreakdownFilter;
   eventView: EventView;
   location: Location;
-  organization: OrganizationSummary;
+  organization: Organization;
   totalValues: number | null;
   withoutZerofill: boolean;
 };
@@ -87,6 +88,16 @@ function TransactionSummaryCharts({
   withoutZerofill,
 }: Props) {
   function handleDisplayChange(value: string) {
+    const display = decodeScalar(location.query.display, DisplayModes.DURATION);
+    trackAdvancedAnalyticsEvent(
+      'performance_views.transaction_summary.change_chart_display',
+      {
+        organization,
+        from_chart: display,
+        to_chart: value,
+      }
+    );
+
     browserHistory.push({
       pathname: location.pathname,
       query: {

static/app/views/performance/transactionSummary/transactionOverview/statusBreakdown.tsx

@@ -12,6 +12,7 @@ import QuestionTooltip from 'sentry/components/questionTooltip';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -85,6 +86,14 @@ function StatusBreakdown({eventView, location, organization}: Props) {
                   query: query.formatString(),
                 },
               });
+
+              trackAdvancedAnalyticsEvent(
+                'performance_views.transaction_summary.status_breakdown_click',
+                {
+                  organization,
+                  status: row['transaction.status'] as string,
+                }
+              );
             },
           }));
           return <BreakdownBars data={points} />;

static/app/views/performance/transactionSummary/transactionTags/content.tsx

@@ -16,6 +16,7 @@ import Radio from 'sentry/components/radio';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import SegmentExplorerQuery, {
   TableData,
@@ -122,6 +123,7 @@ const InnerContent = (
     if (initialTag) {
       changeTagSelected(initialTag);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialTag]);
 
   const handleSearch = (query: string) => {
@@ -136,7 +138,14 @@ const InnerContent = (
     });
   };
 
-  const changeTag = (tag: string) => {
+  const changeTag = (tag: string, isOtherTag: boolean) => {
+    trackAdvancedAnalyticsEvent('performance_views.tags.change_tag', {
+      organization,
+      from_tag: tagSelected!,
+      to_tag: tag,
+      is_other_tag: isOtherTag,
+    });
+
     return changeTagSelected(tag);
   };
   if (tagSelected) {
@@ -175,7 +184,7 @@ const InnerContent = (
 };
 
 const TagsSideBar = (props: {
-  changeTag: (tag: string) => void;
+  changeTag: (tag: string, isOtherTag: boolean) => void;
   otherTags: TagOption[];
   suspectTags: TagOption[];
   isLoading?: boolean;
@@ -202,7 +211,7 @@ const TagsSideBar = (props: {
             <Radio
               aria-label={tag}
               checked={tagSelected === tag}
-              onChange={() => changeTag(tag)}
+              onChange={() => changeTag(tag, false)}
             />
             <SidebarTagValue className="truncate">{tag}</SidebarTagValue>
           </RadioLabel>
@@ -231,7 +240,7 @@ const TagsSideBar = (props: {
             <Radio
               aria-label={tag}
               checked={tagSelected === tag}
-              onChange={() => changeTag(tag)}
+              onChange={() => changeTag(tag, true)}
             />
             <SidebarTagValue className="truncate">{tag}</SidebarTagValue>
           </RadioLabel>

static/app/views/performance/transactionSummary/transactionTags/tagValueTable.tsx

@@ -15,6 +15,7 @@ import {IconAdd} from 'sentry/icons/iconAdd';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {formatPercentage} from 'sentry/utils/formatters';
@@ -160,6 +161,13 @@ export class TagValueTable extends Component<Props, State> {
     };
   };
 
+  handleReleaseLinkClicked = () => {
+    const {organization} = this.props;
+    trackAdvancedAnalyticsEvent('performance_views.tags.jump_to_release', {
+      organization,
+    });
+  };
+
   renderBodyCell = (
     parentProps: Props,
     column: TableColumn<TagsTableColumnKeys>,
@@ -185,7 +193,10 @@ export class TagValueTable extends Component<Props, State> {
           allowActions={allowActions}
         >
           {column.name === 'release' ? (
-            <Link to={this.generateReleaseLocation(dataRow.tags_value)}>
+            <Link
+              to={this.generateReleaseLocation(dataRow.tags_value)}
+              onClick={this.handleReleaseLinkClicked}
+            >
               <TagValue row={dataRow} />
             </Link>
           ) : (