feat(analytics): emit event for engagement score when dashboard loads (#97786)

Emits an event when a dashboard loads that includes a ratio of
engagement based on the number of issues, vs., tracing widgets.

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: bcoe

static/app/utils/analytics/dashboardsAnalyticsEvents.tsx

@@ -7,6 +7,12 @@ export enum WidgetBuilderVersion {
 
 // Used in the full-page widget builder
 type DashboardsEventParametersWidgetBuilder = {
+  'dashboards_views.engagement.load': {
+    issuesRatio: number;
+    logRatio: number;
+    title: string;
+    tracingRatio: number;
+  };
   'dashboards_views.widget_builder.change': {
     builder_version: WidgetBuilderVersion;
     field: string;
@@ -54,6 +60,7 @@ const dashboardsEventMapWidgetBuilder: Record<
     'Widget Builder: Template added to dashboard',
   'dashboards_views.widget_builder.templates.add_to_dashboard.customize':
     'Widget Builder: Template added to dashboard and customized',
+  'dashboards_views.engagement.load': 'Dashboard Load: Engagement by Product',
 };
 
 export type DashboardsEventParameters = {

static/app/views/dashboards/dashboard.tsx

@@ -153,7 +153,7 @@ class Dashboard extends Component<Props, State> {
   }
 
   componentDidMount() {
-    const {newWidget} = this.props;
+    const {dashboard, newWidget} = this.props;
     window.addEventListener('resize', this.debouncedHandleResize);
 
     // Always load organization tags on dashboards
@@ -167,6 +167,7 @@ class Dashboard extends Component<Props, State> {
     this.fetchMemberList();
 
     connectDashboardCharts(DASHBOARD_CHART_GROUP);
+    this.trackEngagementAnalytics(dashboard.widgets);
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -479,6 +480,41 @@ class Dashboard extends Component<Props, State> {
     this.setState({isMobile: false});
   };
 
+  trackEngagementAnalytics(widgets: Widget[]) {
+    // Handle edge-case of dashboard with no widgets.
+    if (!widgets.length) return;
+    const {dashboard, organization} = this.props;
+    // For attributing engagement metrics initially track the ratio
+    // of widgets reading from Transactions, Spans, Errors, and Issues, and Logs.
+    const issuesWidgetTypes = new Set<string | undefined>([
+      'error-events',
+      'issue',
+      'metrics',
+    ]);
+    const logWidgetTypes = new Set<string | undefined>(['logs']);
+    const tracingWidgetTypes = new Set<string | undefined>(['transaction-like', 'spans']);
+    let issuesWidgetCount = 0.0;
+    let logWidgetCount = 0.0;
+    let tracingWidgetCount = 0.0;
+    for (const widget of widgets) {
+      if (issuesWidgetTypes.has(widget.widgetType)) {
+        issuesWidgetCount += 1.0;
+      } else if (logWidgetTypes.has(widget.widgetType)) {
+        logWidgetCount += 1.0;
+      } else if (tracingWidgetTypes.has(widget.widgetType)) {
+        tracingWidgetCount += 1.0;
+      }
+    }
+    const analyticsPayload = {
+      organization,
+      title: dashboard.title,
+      tracingRatio: tracingWidgetCount / widgets.length,
+      issuesRatio: issuesWidgetCount / widgets.length,
+      logRatio: logWidgetCount / widgets.length,
+    };
+    trackAnalytics('dashboards_views.engagement.load', analyticsPayload);
+  }
+
   get addWidgetLayout() {
     const {isMobile, layouts} = this.state;
     let position: Position = BOTTOM_MOBILE_VIEW_POSITION;