diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx new file mode 100644 index 0000000000000..8086a64eb437d --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/AllJSFinalSteps.tsx @@ -0,0 +1,22 @@ +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' + +function JSEventSnippet(): JSX.Element { + return ( + {`posthog.capture('my event', { property: 'value' })`} + ) +} + +export const ProductAnalyticsAllJSFinalSteps = (): JSX.Element => { + return ( + <> +

Send events

+

+ Click around and view a couple pages to generate some events. Our package automatically captures them + for you. +

+

Optional: Send a manual event

+

If you'd like, you can manually define events, too.

+ + + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index e3291c8d38124..c6bc257335e44 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -9,6 +9,7 @@ import { ProductAnalyticsFlutterInstructions, ProductAnalyticsGoInstructions, ProductAnalyticsIOSInstructions, + ProductAnalyticsNextJSInstructions, ProductAnalyticsNodeInstructions, ProductAnalyticsPHPInstructions, ProductAnalyticsPythonInstructions, @@ -19,7 +20,8 @@ import { export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.JS_WEB]: JSWebInstructions, [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions, - // add next, getsby, and others here + [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions, + // add getsby and other frameworks here [SDKKey.IOS]: ProductAnalyticsIOSInstructions, [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions, [SDKKey.ANDROID]: ProductAnalyticsAndroidInstructions, diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx index 48dc2e5a8058f..85ea4699977fd 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx @@ -1,22 +1,14 @@ import { LemonDivider } from '@posthog/lemon-ui' -import { CodeSnippet, Language } from 'lib/components/CodeSnippet' import { SDKHtmlSnippetInstructions } from '../sdk-install-instructions/html-snippet' - -function JSEventSnippet(): JSX.Element { - return ( - {`posthog.capture('my event', { property: 'value' })`} - ) -} +import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps' export function HTMLSnippetInstructions(): JSX.Element { return ( <> -

Optional: Send a manual event

-

Our snippet will autocapture events for you, but you can manually define events, too!

- + ) } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index 72e13e2a4a295..291d5555184a4 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx @@ -6,6 +6,7 @@ export * from './go' export * from './html-snippet' export * from './ios' export * from './js-web' +export * from './next-js' export * from './nodejs' export * from './php' export * from './python' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx index fe26ef71b1088..0c4289254152b 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx @@ -1,22 +1,14 @@ import { LemonDivider } from '@posthog/lemon-ui' -import { CodeSnippet, Language } from 'lib/components/CodeSnippet' import { SDKInstallJSWebInstructions } from '../sdk-install-instructions' - -function JSEventSnippet(): JSX.Element { - return ( - {`posthog.capture('my event', { property: 'value' })`} - ) -} +import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps' export function JSWebInstructions(): JSX.Element { return ( <> -

Optional: Send a manual event

-

Our package will autocapture events for you, but you can manually define events, too!

- + ) } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx new file mode 100644 index 0000000000000..3ce56e7e78ecd --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/next-js.tsx @@ -0,0 +1,14 @@ +import { LemonDivider } from '@posthog/lemon-ui' + +import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js' +import { ProductAnalyticsAllJSFinalSteps } from './AllJSFinalSteps' + +export function ProductAnalyticsNextJSInstructions(): JSX.Element { + return ( + <> + + + + + ) +}