+
+
+
>
)
}
diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx
index ff740be34f4fd..103a87f183508 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/android.tsx
@@ -1,8 +1,14 @@
+import { Link } from '@posthog/lemon-ui'
import { useValues } from 'kea'
import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { apiHostOrigin } from 'lib/utils/apiHost'
import { teamLogic } from 'scenes/teamLogic'
+export interface AndroidSetupProps {
+ includeReplay?: boolean
+}
+
function AndroidInstallSnippet(): JSX.Element {
return (
@@ -13,7 +19,7 @@ function AndroidInstallSnippet(): JSX.Element {
)
}
-function AndroidSetupSnippet(): JSX.Element {
+function AndroidSetupSnippet({ includeReplay }: AndroidSetupProps): JSX.Element {
const { currentTeam } = useValues(teamLogic)
return (
@@ -33,6 +39,18 @@ function AndroidSetupSnippet(): JSX.Element {
apiKey = POSTHOG_API_KEY,
host = POSTHOG_HOST
)
+ ${
+ includeReplay
+ ? `
+ // check https://posthog.com/docs/session-replay/mobile#installation
+ // for more config and to learn about how we capture sessions on mobile
+ // and what to expect
+ config.sessionReplay = true
+ // choose whether to mask images or text
+ config.sessionReplayConfig.maskAllImages = false
+ config.sessionReplayConfig.maskAllTextInputs = true`
+ : ''
+ }
// Setup PostHog with the given Context and Config
PostHogAndroid.setup(this, config)
@@ -41,13 +59,24 @@ function AndroidSetupSnippet(): JSX.Element {
)
}
-export function SDKInstallAndroidInstructions(): JSX.Element {
+export function SDKInstallAndroidInstructions(props: AndroidSetupProps): JSX.Element {
return (
<>
+ {props.includeReplay ? (
+
+ 🚧 NOTE: Mobile recording is
+ currently in beta. We are keen to gather as much feedback as possible so if you try this out please
+ let us know. You can send feedback via the{' '}
+
+ in-app support panel
+ {' '}
+ or one of our other support options.
+
+ ) : null}
Install
Configure
-
+
>
)
}
diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
index df4a13d8adaf1..a46984ee8f897 100644
--- a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -1,5 +1,6 @@
import { actions, afterMount, connect, events, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
+import { urlToAction } from 'kea-router'
import api from 'lib/api'
import { LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect'
@@ -11,7 +12,7 @@ import { onboardingLogic } from '../onboardingLogic'
import { allSDKs } from './allSDKs'
import type { sdksLogicType } from './sdksLogicType'
-/*
+/*
To add SDK instructions for your product:
1. If needed, add a new ProductKey enum value in ~/types.ts
2. Create a folder in this directory for your product
@@ -118,14 +119,16 @@ export const sdksLogic = kea([
loadSnippetEvents: async () => {
const query: HogQLQuery = {
kind: NodeKind.HogQLQuery,
- query: hogql`SELECT properties.$lib_version AS lib_version, max(timestamp) AS latest_timestamp, count(lib_version) as count
- FROM events
- WHERE timestamp >= now() - INTERVAL 3 DAY
- AND timestamp <= now()
- AND properties.$lib = 'web'
- GROUP BY lib_version
- ORDER BY latest_timestamp DESC
- limit 10`,
+ query: hogql`SELECT properties.$lib_version AS lib_version,
+ max(timestamp) AS latest_timestamp,
+ count(lib_version) as count
+ FROM events
+ WHERE timestamp >= now() - INTERVAL 3 DAY
+ AND timestamp <= now()
+ AND properties.$lib = 'web'
+ GROUP BY lib_version
+ ORDER BY latest_timestamp DESC
+ limit 10`,
}
const res = await api.query(query)
@@ -188,4 +191,12 @@ export const sdksLogic = kea([
afterMount(({ actions }) => {
actions.loadSnippetEvents()
}),
+ urlToAction(({ actions }) => ({
+ '/onboarding/:productKey': (_productKey, { sdk }) => {
+ const matchedSDK = allSDKs.find((s) => s.key === sdk)
+ if (matchedSDK) {
+ actions.setSelectedSDK(matchedSDK)
+ }
+ },
+ })),
])
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
index 7e43a06b7faba..16db14dbd1d85 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx
@@ -7,4 +7,6 @@ export const SessionReplaySDKInstructions: SDKInstructionsMap = {
[SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
[SDKKey.NEXT_JS]: NextJSInstructions,
[SDKKey.REACT]: ReactInstructions,
+ // added by feature flag in Onboarding.tsx until released
+ //[SDKKey.ANDROID]: AndroidInstructions,
}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/android.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/android.tsx
new file mode 100644
index 0000000000000..4afb1dc91ce60
--- /dev/null
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/android.tsx
@@ -0,0 +1,11 @@
+import { SDKInstallAndroidInstructions } from '../sdk-install-instructions'
+import { SessionReplayFinalSteps } from '../shared-snippets'
+
+export function AndroidInstructions(): JSX.Element {
+ return (
+ <>
+
+
+ >
+ )
+}
diff --git a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
index bee13a5ce58bb..1ef01349747b4 100644
--- a/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
+++ b/frontend/src/scenes/onboarding/sdks/session-replay/index.tsx
@@ -1,3 +1,4 @@
+export * from './android'
export * from './html-snippet'
export * from './js-web'
export * from './next-js'
diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts
index 943ebbaa80bb2..13262c0eb3656 100644
--- a/frontend/src/scenes/urls.ts
+++ b/frontend/src/scenes/urls.ts
@@ -16,6 +16,7 @@ import {
PipelineTab,
ProductKey,
ReplayTabs,
+ SDKKey,
} from '~/types'
import { OnboardingStepKey } from './onboarding/onboardingLogic'
@@ -175,8 +176,10 @@ export const urls = {
`/verify_email${userUuid ? `/${userUuid}` : ''}${token ? `/${token}` : ''}`,
inviteSignup: (id: string): string => `/signup/${id}`,
products: (): string => '/products',
- onboarding: (productKey: string, stepKey?: OnboardingStepKey): string =>
- `/onboarding/${productKey}${stepKey ? '?step=' + stepKey : ''}`,
+ onboarding: (productKey: string, stepKey?: OnboardingStepKey, sdk?: SDKKey): string =>
+ `/onboarding/${productKey}${stepKey ? '?step=' + stepKey : ''}${
+ sdk && stepKey ? '&sdk=' + sdk : sdk ? '?sdk=' + sdk : ''
+ }`,
// Cloud only
organizationBilling: (products?: ProductKey[]): string =>
`/organization/billing${products && products.length ? `?products=${products.join(',')}` : ''}`,