Add sidebar open/close events

PostHog · Mar 14, 2024 · a76bc76 · a76bc76
1 parent c86c99e
commit a76bc76
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.ts b/frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.ts
@@ -2,7 +2,6 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
 import api from 'lib/api'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
@@ -66,8 +65,6 @@ export const activationLogic = kea<activationLogicType>([
             ['loadPluginsSuccess', 'loadPluginsFailure'],
             sidePanelStateLogic,
             ['openSidePanel'],
-            eventUsageLogic,
-            ['reportActivationSideBarShown'],
             savedInsightsLogic,
             ['loadInsights', 'loadInsightsSuccess', 'loadInsightsFailure'],
             dashboardsModel,

diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx
@@ -1,6 +1,7 @@
-import { actions, kea, listeners, path, reducers } from 'kea'
+import { actions, connect, kea, listeners, path, reducers } from 'kea'
 import { actionToUrl, router, urlToAction } from 'kea-router'
 import { windowValues } from 'kea-window-values'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 import { SidePanelTab } from '~/types'
 
@@ -10,6 +11,9 @@ import type { sidePanelStateLogicType } from './sidePanelStateLogicType'
 
 export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelStateLogic']),
+    connect(() => ({
+        actions: [eventUsageLogic, ['reportActivationSideBarOpened', 'reportActivationSideBarClosed']],
+    })),
     actions({
         openSidePanel: (tab: SidePanelTab, options?: string) => ({ tab, options }),
         closeSidePanel: (tab?: SidePanelTab) => ({ tab }),
@@ -55,14 +59,17 @@ export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
     listeners(({ actions, values }) => ({
         // NOTE: We explicitly reference the actions instead of connecting so that people don't accidentally
         // use this logic instead of sidePanelStateLogic
-        openSidePanel: () => {
+        openSidePanel: ({ tab }) => {
+            actions.reportActivationSideBarOpened(tab)
             actions.setSidePanelOpen(true)
         },
         closeSidePanel: ({ tab }) => {
             if (!tab) {
+                actions.reportActivationSideBarClosed()
                 // If we aren't specifiying the tab we always close
                 actions.setSidePanelOpen(false)
             } else if (values.selectedTab === tab) {
+                actions.reportActivationSideBarClosed(tab)
                 // Otherwise we only close it if the tab is the currently open one
                 actions.setSidePanelOpen(false)
             }

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -43,6 +43,7 @@ import {
     SessionPlayerData,
     SessionRecordingPlayerTab,
     SessionRecordingUsageType,
+    SidePanelTab,
     Survey,
 } from '~/types'
 
@@ -457,11 +458,8 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportInstanceSettingChange: (name: string, value: string | boolean | number) => ({ name, value }),
         reportAxisUnitsChanged: (properties: Record<string, any>) => ({ ...properties }),
         reportTeamSettingChange: (name: string, value: any) => ({ name, value }),
-        reportActivationSideBarShown: (
-            activeTasksCount: number,
-            completedTasksCount: number,
-            completionPercent: number
-        ) => ({ activeTasksCount, completedTasksCount, completionPercent }),
+        reportActivationSideBarOpened: (tab: SidePanelTab) => ({ tab }),
+        reportActivationSideBarClosed: (tab?: SidePanelTab) => ({ tab }),
         reportActivationSideBarTaskClicked: (key: string) => ({ key }),
         reportActivationSideBarTaskSkipped: (key: string) => ({ key }),
         reportBillingUpgradeClicked: (plan: string) => ({ plan }),
@@ -1089,11 +1087,14 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
                 value,
             })
         },
-        reportActivationSideBarShown: ({ activeTasksCount, completedTasksCount, completionPercent }) => {
-            posthog.capture('activation sidebar shown', {
-                active_tasks_count: activeTasksCount,
-                completed_tasks_count: completedTasksCount,
-                completion_percent_count: completionPercent,
+        reportActivationSideBarOpened: ({ tab }) => {
+            posthog.capture('activation sidebar opened', {
+                tab,
+            })
+        },
+        reportActivationSideBarClosed: ({ tab }) => {
+            posthog.capture('activation sidebar closed', {
+                tab,
             })
         },
         reportActivationSideBarTaskClicked: ({ key }) => {