feat: onboarding eventing (#17706)

* report when product is selected * sub during onboarding & completion
PostHog · Oct 2, 2023 · ccfdf03 · ccfdf03
1 parent e7e327b
commit ccfdf03
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -500,6 +500,10 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
         reportSurveyResumed: (survey: Survey) => ({ survey }),
         reportSurveyArchived: (survey: Survey) => ({ survey }),
         reportProductUnsubscribed: (product: string) => ({ product }),
+        // onboarding
+        reportOnboardingProductSelected: (productKey: string) => ({ productKey }),
+        reportOnboardingCompleted: (productKey: string) => ({ productKey }),
+        reportSubscribedDuringOnboarding: (productKey: string) => ({ productKey }),
     },
     listeners: ({ values }) => ({
         reportAxisUnitsChanged: (properties) => {
@@ -1239,5 +1243,21 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
                 $set: { [property_key]: true },
             })
         },
+        // onboarding
+        reportOnboardingProductSelected: ({ productKey }) => {
+            posthog.capture('onboarding product selected', {
+                product_key: productKey,
+            })
+        },
+        reportOnboardingCompleted: ({ productKey }) => {
+            posthog.capture('onboarding completed', {
+                product_key: productKey,
+            })
+        },
+        reportSubscribedDuringOnboarding: ({ productKey }) => {
+            posthog.capture('subscribed during onboarding', {
+                product_key: productKey,
+            })
+        },
     }),
 })
diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -6,6 +6,7 @@ import type { onboardingLogicType } from './onboardingLogicType'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { combineUrl } from 'kea-router'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 export interface OnboardingLogicProps {
     productKey: ProductKey | null
@@ -149,8 +150,17 @@ export const onboardingLogic = kea<onboardingLogicType>({
                 actions.setProduct(values.billing?.products.find((p) => p.type === values.productKey) || null)
             }
         },
+        setSubscribedDuringOnboarding: ({ subscribedDuringOnboarding }) => {
+            if (subscribedDuringOnboarding) {
+                // we might not have the product key yet
+                // if not we'll just use the current url to determine the product key
+                const productKey = values.productKey || (window.location.pathname.split('/')[2] as ProductKey)
+                eventUsageLogic.actions.reportSubscribedDuringOnboarding(productKey)
+            }
+        },
         completeOnboarding: ({ redirectUri }) => {
             if (values.productKey) {
+                eventUsageLogic.actions.reportOnboardingCompleted(values.productKey)
                 actions.updateCurrentTeam({
                     has_completed_onboarding_for: {
                         ...values.currentTeam?.has_completed_onboarding_for,

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -13,6 +13,7 @@ import { Spinner } from 'lib/lemon-ui/Spinner'
 import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
 import { router } from 'kea-router'
 import { getProductUri } from 'scenes/onboarding/onboardingLogic'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 export const scene: SceneExport = {
     component: Products,
@@ -22,25 +23,42 @@ export const scene: SceneExport = {
 function OnboardingCompletedButton({
     productUrl,
     onboardingUrl,
+    productKey,
 }: {
     productUrl: string
     onboardingUrl: string
+    productKey: ProductKey
 }): JSX.Element {
+    const { reportOnboardingProductSelected } = useActions(eventUsageLogic)
     return (
         <>
             <LemonButton type="secondary" status="muted" to={productUrl}>
                 Go to product
             </LemonButton>
-            <LemonButton type="tertiary" status="muted" to={onboardingUrl}>
+            <LemonButton
+                type="tertiary"
+                status="muted"
+                onClick={() => {
+                    reportOnboardingProductSelected(productKey)
+                    router.actions.push(onboardingUrl)
+                }}
+            >
                 Set up again
             </LemonButton>
         </>
     )
 }
 
-function OnboardingNotCompletedButton({ url }: { url: string }): JSX.Element {
+function OnboardingNotCompletedButton({ url, productKey }: { url: string; productKey: ProductKey }): JSX.Element {
+    const { reportOnboardingProductSelected } = useActions(eventUsageLogic)
     return (
-        <LemonButton type="primary" to={url}>
+        <LemonButton
+            type="primary"
+            onClick={() => {
+                reportOnboardingProductSelected(productKey)
+                router.actions.push(url)
+            }}
+        >
             Get started
         </LemonButton>
     )
@@ -69,9 +87,13 @@ function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Elemen
                     <OnboardingCompletedButton
                         productUrl={getProductUri(product.type as ProductKey)}
                         onboardingUrl={urls.onboarding(product.type)}
+                        productKey={product.type as ProductKey}
                     />
                 ) : (
-                    <OnboardingNotCompletedButton url={urls.onboarding(product.type)} />
+                    <OnboardingNotCompletedButton
+                        url={urls.onboarding(product.type)}
+                        productKey={product.type as ProductKey}
+                    />
                 )}
             </div>
         </LemonCard>