feat: add reverse proxy step to quick start steps + more quick start …

…events (#20939) * Add reverse proxy to the quick start list * Add sidebar task skipped event * Add sidebar open/close events * Update quick start proxy copy * Move the sidebar closed call * Put reportActivationSideBarShown import back * Remove eventUsageLogic calls * remove eventUserLogic usage * spelling fix * Switch sidebar events * update task skipped key * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * rename sidebar events --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Mar 20, 2024 · 921ee5a · 921ee5a
1 parent a22c8a6
commit 921ee5a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/activation/SidePanelActivation.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/activation/SidePanelActivation.tsx
@@ -97,6 +97,9 @@ const ActivationTask = ({
     if (url) {
         params.to = url
         params.targetBlank = true
+        params.onClick = () => {
+            reportActivationSideBarTaskClicked(id)
+        }
     } else {
         params.onClick = () => {
             runTask(id)

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,8 +2,8 @@ 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 posthog from 'posthog-js'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
@@ -25,6 +25,7 @@ export enum ActivationTasks {
     SetupSessionRecordings = 'setup_session_recordings',
     TrackCustomEvents = 'track_custom_events',
     InstallFirstApp = 'install_first_app',
+    SetUpReverseProxy = 'set_up_reverse_proxy',
 }
 
 export type ActivationTaskType = {
@@ -65,8 +66,6 @@ export const activationLogic = kea<activationLogicType>([
             ['loadPluginsSuccess', 'loadPluginsFailure'],
             sidePanelStateLogic,
             ['openSidePanel'],
-            eventUsageLogic,
-            ['reportActivationSideBarShown'],
             savedInsightsLogic,
             ['loadInsights', 'loadInsightsSuccess', 'loadInsightsFailure'],
             dashboardsModel,
@@ -282,6 +281,17 @@ export const activationLogic = kea<activationLogicType>([
                                 skipped: skippedTasks.includes(ActivationTasks.InstallFirstApp),
                             })
                             break
+                        case ActivationTasks.SetUpReverseProxy:
+                            tasks.push({
+                                id: ActivationTasks.SetUpReverseProxy,
+                                name: 'Set up a reverse proxy',
+                                description: 'Send your events from your own domain to avoid tracking blockers',
+                                completed: false,
+                                canSkip: true,
+                                skipped: skippedTasks.includes(ActivationTasks.SetUpReverseProxy),
+                                url: 'https://posthog.com/docs/advanced/proxy',
+                            })
+                            break
                         default:
                             break
                     }
@@ -342,6 +352,9 @@ export const activationLogic = kea<activationLogicType>([
             }
         },
         skipTask: ({ id }) => {
+            posthog.capture('activation sidebar task skipped', {
+                task: id,
+            })
             if (values.currentTeam?.id) {
                 actions.addSkippedTask(values.currentTeam.id, id)
             }

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 { actionToUrl, router, urlToAction } from 'kea-router'
 import { windowValues } from 'kea-window-values'
+import posthog from 'posthog-js'
 
 import { SidePanelTab } from '~/types'
 
@@ -55,10 +56,12 @@ 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 }) => {
+            posthog.capture('sidebar opened', { tab })
             actions.setSidePanelOpen(true)
         },
         closeSidePanel: ({ tab }) => {
+            posthog.capture('sidebar closed', { tab })
             if (!tab) {
                 // If we aren't specifiying the tab we always close
                 actions.setSidePanelOpen(false)

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -457,11 +457,6 @@ 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 }),
         reportActivationSideBarTaskClicked: (key: string) => ({ key }),
         reportBillingUpgradeClicked: (plan: string) => ({ plan }),
         reportRoleCreated: (role: string) => ({ role }),
@@ -1092,13 +1087,6 @@ 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,
-            })
-        },
         reportActivationSideBarTaskClicked: ({ key }) => {
             posthog.capture('activation sidebar task clicked', {
                 key,