chore(analytics): instrument command bar (#19323)

PostHog · Dec 14, 2023 · f0aa25c · f0aa25c
1 parent a86a31a
commit f0aa25c
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 4 deletions.
diff --git a/frontend/src/lib/components/CommandBar/actionBarLogic.ts b/frontend/src/lib/components/CommandBar/actionBarLogic.ts
@@ -1,5 +1,6 @@
 import { afterMount, beforeUnmount, connect, kea, listeners, path } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 import { commandPaletteLogic } from '../CommandPalette/commandPaletteLogic'
 import type { actionBarLogicType } from './actionBarLogicType'
@@ -24,6 +25,8 @@ export const actionBarLogic = kea<actionBarLogicType>([
                 'onMouseEnterResult',
                 'onMouseLeaveResult',
             ],
+            eventUsageLogic,
+            ['reportCommandBarActionSearch', 'reportCommandBarActionResultExecuted'],
         ],
         values: [
             commandBarLogic,
@@ -44,6 +47,12 @@ export const actionBarLogic = kea<actionBarLogicType>([
             // listen on hide action from legacy palette, and hide command bar
             actions.hideCommandBar()
         },
+        setInput: ({ input }) => {
+            actions.reportCommandBarActionSearch(input)
+        },
+        executeResult: ({ result }) => {
+            actions.reportCommandBarActionResultExecuted(result.display)
+        },
     })),
     subscriptions(({ values, actions }) => ({
         barStatus: (value, oldvalue) => {

diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
@@ -1,11 +1,16 @@
-import { actions, afterMount, beforeUnmount, kea, path, reducers } from 'kea'
+import { actions, afterMount, beforeUnmount, connect, kea, path, reducers } from 'kea'
+import { subscriptions } from 'kea-subscriptions'
 import { shouldIgnoreInput } from 'lib/utils'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 import type { commandBarLogicType } from './commandBarLogicType'
 import { BarStatus } from './types'
 
 export const commandBarLogic = kea<commandBarLogicType>([
     path(['lib', 'components', 'CommandBar', 'commandBarLogic']),
+    connect({
+        actions: [eventUsageLogic, ['reportCommandBarStatusChanged']],
+    }),
     actions({
         setCommandBar: (status: BarStatus, initialQuery?: string) => ({ status, initialQuery }),
         hideCommandBar: true,
@@ -36,6 +41,13 @@ export const commandBarLogic = kea<commandBarLogicType>([
             },
         ],
     }),
+    subscriptions(({ actions }) => ({
+        barStatus: (status, prevStatus) => {
+            if (prevStatus !== undefined) {
+                actions.reportCommandBarStatusChanged(status)
+            }
+        },
+    })),
     afterMount(({ actions, cache }) => {
         // register keyboard shortcuts
         cache.onKeyDown = (event: KeyboardEvent) => {

diff --git a/frontend/src/lib/components/CommandBar/searchBarLogic.ts b/frontend/src/lib/components/CommandBar/searchBarLogic.ts
@@ -3,6 +3,7 @@ import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 import api, { CountedPaginatedResponse } from 'lib/api'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { urls } from 'scenes/urls'
 
 import { groupsModel } from '~/models/groupsModel'
@@ -46,7 +47,12 @@ export const searchBarLogic = kea<searchBarLogicType>([
     path(['lib', 'components', 'CommandBar', 'searchBarLogic']),
     connect({
         values: [commandBarLogic, ['initialQuery', 'barStatus'], groupsModel, ['groupTypes', 'aggregationLabel']],
-        actions: [commandBarLogic, ['hideCommandBar', 'setCommandBar', 'clearInitialQuery']],
+        actions: [
+            commandBarLogic,
+            ['hideCommandBar', 'setCommandBar', 'clearInitialQuery'],
+            eventUsageLogic,
+            ['reportCommandBarSearch', 'reportCommandBarSearchResultOpened'],
+        ],
     }),
     actions({
         search: true,
@@ -59,13 +65,15 @@ export const searchBarLogic = kea<searchBarLogicType>([
         setIsAutoScrolling: (scrolling: boolean) => ({ scrolling }),
         openResult: (index: number) => ({ index }),
     }),
-    loaders(({ values }) => ({
+    loaders(({ values, actions }) => ({
         rawSearchResponse: [
             null as SearchResponse | null,
             {
                 loadSearchResponse: async (_, breakpoint) => {
                     await breakpoint(DEBOUNCE_MS)
 
+                    actions.reportCommandBarSearch(values.searchQuery.length)
+
                     if (clickhouseTabs.includes(values.activeTab)) {
                         // prevent race conditions when switching tabs quickly
                         return values.rawSearchResponse
@@ -424,6 +432,7 @@ export const searchBarLogic = kea<searchBarLogicType>([
             const result = values.combinedSearchResults![index]
             router.actions.push(urlForResult(result))
             actions.hideCommandBar()
+            actions.reportCommandBarSearchResultOpened(result.type)
         },
     })),
     subscriptions(({ values, actions }) => ({

diff --git a/frontend/src/lib/components/CommandBar/types.ts b/frontend/src/lib/components/CommandBar/types.ts
@@ -7,7 +7,7 @@ export enum BarStatus {
     SHOW_SHORTCUTS = 'show_shortcuts',
 }
 
-export type ResultType = SearchableEntity | 'person'
+export type ResultType = SearchableEntity | 'person' | 'group'
 
 export type PersonResult = {
     type: 'person'

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -1,4 +1,5 @@
 import { actions, connect, kea, listeners, path } from 'kea'
+import { BarStatus, ResultType } from 'lib/components/CommandBar/types'
 import { convertPropertyGroupToProperties, isGroupPropertyFilter } from 'lib/components/PropertyFilters/utils'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import type { Dayjs } from 'lib/dayjs'
@@ -491,6 +492,12 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportOnboardingProductSelected: (productKey: string) => ({ productKey }),
         reportOnboardingCompleted: (productKey: string) => ({ productKey }),
         reportSubscribedDuringOnboarding: (productKey: string) => ({ productKey }),
+        // command bar
+        reportCommandBarStatusChanged: (status: BarStatus) => ({ status }),
+        reportCommandBarSearch: (queryLength: number) => ({ queryLength }),
+        reportCommandBarSearchResultOpened: (type: ResultType) => ({ type }),
+        reportCommandBarActionSearch: (query: string) => ({ query }),
+        reportCommandBarActionResultExecuted: (resultDisplay) => ({ resultDisplay }),
     }),
     listeners(({ values }) => ({
         reportAxisUnitsChanged: (properties) => {
@@ -1200,5 +1207,21 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
                 product_key: productKey,
             })
         },
+        // command bar
+        reportCommandBarStatusChanged: ({ status }) => {
+            posthog.capture('command bar status changed', { status })
+        },
+        reportCommandBarSearch: ({ queryLength }) => {
+            posthog.capture('command bar search', { queryLength })
+        },
+        reportCommandBarSearchResultOpened: ({ type }) => {
+            posthog.capture('command bar search result opened', { type })
+        },
+        reportCommandBarActionSearch: ({ query }) => {
+            posthog.capture('command bar action search', { query })
+        },
+        reportCommandBarActionResultExecuted: ({ resultDisplay }) => {
+            posthog.capture('command bar search result executed', { resultDisplay })
+        },
     })),
 ])