Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: exp for nontechnical users in prod. analytics #26993

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+118 −20
Open

feat: exp for nontechnical users in prod. analytics #26993

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d639bc6
onboarding product logic:
surbhi-posthog Dec 17, 2024
5ab27a5
updated experiment name and addressed other comments
surbhi-posthog Dec 18, 2024
c2dc08d
placing back resetSDK on setProductKey action
surbhi-posthog Dec 19, 2024
4b8948b
role_at_org model changes and ui updates
surbhi-posthog Dec 19, 2024
dd59b7d
user serializer udpates
surbhi-posthog Dec 19, 2024
7e5c788
ux updates
surbhi-posthog Dec 20, 2024
a80c01c
moving logic to selectors
surbhi-posthog Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/src/lib/constants.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commenting on this file so we can thread the discussion...

I'm generally hesitant about this change because it effectively hides the rest of the SDKs we offer from the page.

The null hypothesis is that people won't notice the "recommended" filter, won't click the "X" to clear it, and won't see all the other SDKs we offer.

Why don't we just put the recommended ones at the top in a separate section, with some way to show that they are recommended?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another thing - I think with this we are maybe prioritizing the wrong set of users?

High ICP users - engineers - will want to see all the SDK options we have so they can find the one they need. Maybe the experience there needs to change for those users if their conversion through this step isn't great, but I don't see why we'd change the onboarding for our most popular product to cater to low ICP users.

If anything, we should only apply this change to people who we know are low-ICP (using role data is easy easy easy and required on signup for this exact reason). We can even skip this SDKs screen entirely for these people and do a custom invite thing where it says "you're all set up, now invite your technical team to implement" and in the email we send them we give them context about what needs to happen.

Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const FEATURE_FLAGS = {
FF_DASHBOARD_TEMPLATES: 'ff-dashboard-templates', // owner: @EDsCODE
ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes
CS_DASHBOARDS: 'cs-dashboards', // owner: @pauldambra
PRODUCT_ANALYTICS_MODIFIED_SDK_LIST: 'product-analytics-modified-sdk-list', // owner: @surbhi
PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite
Expand Down
39 changes: 34 additions & 5 deletions frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import { actions, afterMount, connect, events, kea, listeners, path, reducers, s
import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
import api from 'lib/api'
import { FEATURE_FLAGS } from 'lib/constants'
import { LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'

import { HogQLQuery, NodeKind } from '~/queries/schema'
Expand Down Expand Up @@ -39,10 +41,25 @@ Products that will often be installed in multiple places, eg. web and mobile
*/
export const multiInstallProducts = [ProductKey.PRODUCT_ANALYTICS, ProductKey.FEATURE_FLAGS]

const getProductAnalyticsOrderedSDKs = (sdks: SDK[]): SDK[] => {
return [
...sdks.filter((sdk) => sdk.key === 'html'),
...sdks.filter((sdk) => sdk.key === 'javascript-web'),
surbhi-posthog marked this conversation as resolved.
Show resolved Hide resolved
...sdks.filter((sdk) => !['html', 'javascript-web'].includes(sdk.key)),
]
}

export const sdksLogic = kea<sdksLogicType>([
path(['scenes', 'onboarding', 'sdks', 'sdksLogic']),
connect({
values: [onboardingLogic, ['productKey'], liveEventsTableLogic, ['eventHosts']],
values: [
onboardingLogic,
['productKey'],
liveEventsTableLogic,
['eventHosts'],
featureFlagLogic,
['featureFlags'],
],
}),
actions({
setSourceFilter: (sourceFilter: string | null) => ({ sourceFilter }),
Expand Down Expand Up @@ -173,14 +190,21 @@ export const sdksLogic = kea<sdksLogicType>([
})),
listeners(({ actions, values }) => ({
filterSDKs: () => {
const filteredSDks: SDK[] = allSDKs
let filteredSDks: SDK[] = allSDKs
.filter((sdk) => {
if (!values.sourceFilter || !sdk) {
return true
}
return sdk.tags.includes(values.sourceFilter)
})
.filter((sdk) => Object.keys(values.availableSDKInstructionsMap).includes(sdk.key))

if (
values.featureFlags[FEATURE_FLAGS.PRODUCT_ANALYTICS_MODIFIED_SDK_LIST] === 'test' &&
values.productKey === ProductKey.PRODUCT_ANALYTICS
) {
filteredSDks = getProductAnalyticsOrderedSDKs(filteredSDks)
}
actions.setSDKs(filteredSDks)
actions.setSourceOptions(getSourceOptions(values.availableSDKInstructionsMap))
},
Expand All @@ -198,7 +222,6 @@ export const sdksLogic = kea<sdksLogicType>([
},
[onboardingLogic.actionTypes.setProductKey]: () => {
// TODO: This doesn't seem to run when the setProductKey action is called in onboardingLogic...
surbhi-posthog marked this conversation as resolved.
Show resolved Hide resolved
actions.resetSDKs()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason this was removed?

},
resetSDKs: () => {
actions.filterSDKs()
Expand All @@ -225,8 +248,14 @@ export const sdksLogic = kea<sdksLogicType>([
afterMount(({ actions }) => {
actions.loadSnippetEvents()
}),
urlToAction(({ actions }) => ({
'/onboarding/:productKey': (_productKey, { sdk }) => {
urlToAction(({ actions, values }) => ({
'/onboarding/:productKey': (_product_key, { sdk }) => {
if (
values.productKey === ProductKey.PRODUCT_ANALYTICS &&
values.featureFlags[FEATURE_FLAGS.PRODUCT_ANALYTICS_MODIFIED_SDK_LIST] === 'test'
) {
actions.setSourceFilter('Recommended')
}
const matchedSDK = allSDKs.find((s) => s.key === sdk)
if (matchedSDK) {
actions.setSelectedSDK(matchedSDK)
Expand Down
Loading