feat(conversations): Add analytics tracking for conversations feature

static/app/utils/analytics.tsx

@@ -42,6 +42,8 @@ import type {AgentMonitoringEventParameters} from './analytics/agentMonitoringAn
 import {agentMonitoringEventMap} from './analytics/agentMonitoringAnalyticsEvents';
 import type {BreadcrumbsAnalyticsEventParameters} from './analytics/breadcrumbsAnalyticsEvents';
 import {breadcrumbsAnalyticsEventMap} from './analytics/breadcrumbsAnalyticsEvents';
+import type {ConversationsEventParameters} from './analytics/conversationsAnalyticsEvents';
+import {conversationsEventMap} from './analytics/conversationsAnalyticsEvents';
 import type {CoreUIEventParameters} from './analytics/coreuiAnalyticsEvents';
 import {coreUIEventMap} from './analytics/coreuiAnalyticsEvents';
 import type {DashboardsEventParameters} from './analytics/dashboardsAnalyticsEvents';
@@ -104,6 +106,7 @@ interface EventParameters
   extends GrowthEventParameters,
     AgentMonitoringEventParameters,
     AlertsEventParameters,
+    ConversationsEventParameters,
     BreadcrumbsAnalyticsEventParameters,
     CoreUIEventParameters,
     DashboardsEventParameters,
@@ -144,6 +147,7 @@ interface EventParameters
 const allEventMap: Record<string, string | null> = {
   ...agentMonitoringEventMap,
   ...alertsEventMap,
+  ...conversationsEventMap,
   ...breadcrumbsAnalyticsEventMap,
   ...coreUIEventMap,
   ...dashboardsEventMap,

static/app/utils/analytics/conversationsAnalyticsEvents.tsx

@@ -0,0 +1,24 @@
+export type ConversationDrawerOpenSource =
+  | 'direct_link'
+  | 'table_conversation_id'
+  | 'table_input'
+  | 'table_output';
+
+export type ConversationsEventParameters = {
+  'conversations.drawer.open': {
+    source: ConversationDrawerOpenSource;
+  };
+  'conversations.drawer.span-select': Record<string, unknown>;
+  'conversations.drawer.tab-switch': {
+    fromTab: string;
+    toTab: string;
+  };
+  'conversations.page-view': Record<string, unknown>;
+};
+
+export const conversationsEventMap: Record<keyof ConversationsEventParameters, string> = {
+  'conversations.page-view': 'Conversations: Page View',
+  'conversations.drawer.open': 'Conversations: Drawer Open',
+  'conversations.drawer.tab-switch': 'Conversations: Drawer Tab Switch',
+  'conversations.drawer.span-select': 'Conversations: Drawer Span Select',
+};

static/app/views/insights/pages/conversations/components/conversationDrawer.tsx

@@ -10,6 +10,7 @@ import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/component
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import type {ConversationDrawerOpenSource} from 'sentry/utils/analytics/conversationsAnalyticsEvents';
 import useOrganization from 'sentry/utils/useOrganization';
 import {AISpanList} from 'sentry/views/insights/pages/agents/components/aiSpanList';
 import {getDefaultSelectedNode} from 'sentry/views/insights/pages/agents/utils/getDefaultSelectedNode';
@@ -50,7 +51,7 @@ const ConversationDrawerContent = memo(function ConversationDrawerContent({
       setConversationDrawerQueryState({
         spanId: node.id,
       });
-      trackAnalytics('agent-monitoring.conversation-drawer.span-select', {
+      trackAnalytics('conversations.drawer.span-select', {
         organization,
       });
     },
@@ -117,9 +118,18 @@ export function useConversationViewDrawer({
   const {openDrawer, isDrawerOpen, drawerUrlState} = useUrlConversationDrawer();
 
   const openConversationViewDrawer = useCallback(
-    (conversation: UseConversationsOptions, initialSpanId?: string) => {
-      trackAnalytics('agent-monitoring.conversation-drawer.open', {
+    ({
+      conversation,
+      initialSpanId,
+      source,
+    }: {
+      conversation: UseConversationsOptions;
+      source: ConversationDrawerOpenSource;
+      initialSpanId?: string;
+    }) => {
+      trackAnalytics('conversations.drawer.open', {
         organization,
+        source,
       });
 
       return openDrawer(() => <ConversationDrawerContent conversation={conversation} />, {
@@ -139,7 +149,11 @@ export function useConversationViewDrawer({
   useEffect(() => {
     const {conversationId, spanId} = drawerUrlState;
     if (conversationId && !isDrawerOpen) {
-      openConversationViewDrawer({conversationId}, spanId ?? undefined);
+      openConversationViewDrawer({
+        conversation: {conversationId},
+        initialSpanId: spanId ?? undefined,
+        source: 'direct_link',
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount
   }, []);
@@ -168,6 +182,20 @@ function ConversationView({
   const organization = useOrganization();
   const [activeTab, setActiveTab] = useState<ConversationTab>('messages');
 
+  const handleTabChange = useCallback(
+    (newTab: ConversationTab) => {
+      if (activeTab !== newTab) {
+        trackAnalytics('conversations.drawer.tab-switch', {
+          organization,
+          fromTab: activeTab,
+          toTab: newTab,
+        });
+      }
+      setActiveTab(newTab);
+    },
+    [organization, activeTab]
+  );
+
   if (isLoading) {
     return (
       <Flex justify="center" align="center" flex="1" height="100%">
@@ -189,7 +217,7 @@ function ConversationView({
       <LeftPanel>
         <StyledTabs
           value={activeTab}
-          onChange={key => setActiveTab(key as ConversationTab)}
+          onChange={key => handleTabChange(key as ConversationTab)}
         >
           <Container padding="xs lg">
             <TabList>

static/app/views/insights/pages/conversations/components/conversationsTable.tsx

@@ -174,7 +174,12 @@ const BodyCell = memo(function BodyCell({
       return (
         <ConversationIdButton
           priority="link"
-          onClick={() => openConversationViewDrawer(dataRow)}
+          onClick={() =>
+            openConversationViewDrawer({
+              conversation: dataRow,
+              source: 'table_conversation_id',
+            })
+          }
         >
           {dataRow.conversationId.slice(0, 8)}
         </ConversationIdButton>
@@ -209,7 +214,9 @@ const BodyCell = memo(function BodyCell({
         <Stack width="100%">
           <InputOutputRow
             type="button"
-            onClick={() => openConversationViewDrawer(dataRow)}
+            onClick={() =>
+              openConversationViewDrawer({conversation: dataRow, source: 'table_input'})
+            }
           >
             <InputOutputLabel variant="muted">{t('Input')}</InputOutputLabel>
             <Flex flex="1" minWidth="0">
@@ -233,7 +240,9 @@ const BodyCell = memo(function BodyCell({
           </InputOutputRow>
           <InputOutputRow
             type="button"
-            onClick={() => openConversationViewDrawer(dataRow)}
+            onClick={() =>
+              openConversationViewDrawer({conversation: dataRow, source: 'table_output'})
+            }
           >
             <InputOutputLabel variant="muted">{t('Output')}</InputOutputLabel>
             <Flex flex="1" minWidth="0">

static/app/views/insights/pages/conversations/overview.tsx

@@ -16,6 +16,7 @@ import {
 import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
 import {DataCategory} from 'sentry/types/core';
 import type {TagCollection} from 'sentry/types/group';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {useDatePageFilterProps} from 'sentry/utils/useDatePageFilterProps';
 import {useMaxPickableDays} from 'sentry/utils/useMaxPickableDays';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -55,6 +56,12 @@ function ConversationsOverviewPage({
   );
   const {unsetCursor} = useTableCursor();
 
+  useEffect(() => {
+    trackAnalytics('conversations.page-view', {
+      organization,
+    });
+  }, [organization]);
+
   useEffect(() => {
     if (searchQuery === null) {
       setSearchQuery(DEFAULT_QUERY);