-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web-analytics): Add web analytics to onboarding (#25239)
- Loading branch information
Showing
28 changed files
with
402 additions
and
3 deletions.
There are no files selected for viewing
Binary file modified
BIN
+3.74 KB
(110%)
frontend/__snapshots__/scenes-other-products--products--dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+3.49 KB
(110%)
frontend/__snapshots__/scenes-other-products--products--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
frontend/src/scenes/onboarding/sdks/web-analytics/FinalSteps.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { CodeSnippet, Language } from 'lib/components/CodeSnippet' | ||
|
||
function JSEventSnippet(): JSX.Element { | ||
return ( | ||
<CodeSnippet language={Language.JavaScript}>{`posthog.capture('my event', { property: 'value' })`}</CodeSnippet> | ||
) | ||
} | ||
|
||
export const WebAnalyticsAllJSFinalSteps = (): JSX.Element => { | ||
return ( | ||
<> | ||
<h4>Send events</h4> | ||
<p> | ||
Click around and view a couple pages to generate some events. Our package automatically captures them | ||
for you. | ||
</p> | ||
<h4>Optional: Send a manual event</h4> | ||
<p>If you'd like, you can manually define events, too.</p> | ||
<JSEventSnippet /> | ||
</> | ||
) | ||
} | ||
|
||
export const WebAnalyticsMobileFinalSteps = (): JSX.Element => { | ||
return ( | ||
<> | ||
<h3>Track screen views</h3> | ||
<p> | ||
Despite the name, the web analytics dashboard can be used to track screen views in mobile apps, too. | ||
Open your app and view some screens to generate some events. | ||
</p> | ||
</> | ||
) | ||
} |
39 changes: 39 additions & 0 deletions
39
frontend/src/scenes/onboarding/sdks/web-analytics/WebAnalyticsSDKInstructions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { SDKInstructionsMap, SDKKey } from '~/types' | ||
|
||
import { | ||
AndroidInstructions, | ||
AngularInstructions, | ||
AstroInstructions, | ||
BubbleInstructions, | ||
FramerInstructions, | ||
HTMLSnippetInstructions, | ||
iOSInstructions, | ||
JSWebInstructions, | ||
NextJSInstructions, | ||
NuxtJSInstructions, | ||
ReactInstructions, | ||
RemixInstructions, | ||
SvelteInstructions, | ||
VueInstructions, | ||
WebAnalyticsRNInstructions, | ||
WebflowInstructions, | ||
} from '.' | ||
|
||
export const WebAnalyticsSDKInstructions: SDKInstructionsMap = { | ||
[SDKKey.JS_WEB]: JSWebInstructions, | ||
[SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions, | ||
[SDKKey.ANGULAR]: AngularInstructions, | ||
[SDKKey.ASTRO]: AstroInstructions, | ||
[SDKKey.IOS]: iOSInstructions, | ||
[SDKKey.BUBBLE]: BubbleInstructions, | ||
[SDKKey.FRAMER]: FramerInstructions, | ||
[SDKKey.NEXT_JS]: NextJSInstructions, | ||
[SDKKey.NUXT_JS]: NuxtJSInstructions, | ||
[SDKKey.REACT]: ReactInstructions, | ||
[SDKKey.REMIX]: RemixInstructions, | ||
[SDKKey.SVELTE]: SvelteInstructions, | ||
[SDKKey.VUE_JS]: VueInstructions, | ||
[SDKKey.WEBFLOW]: WebflowInstructions, | ||
[SDKKey.ANDROID]: AndroidInstructions, | ||
[SDKKey.REACT_NATIVE]: WebAnalyticsRNInstructions, | ||
} |
13 changes: 13 additions & 0 deletions
13
frontend/src/scenes/onboarding/sdks/web-analytics/android.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { WebAnalyticsMobileFinalSteps } from 'scenes/onboarding/sdks/web-analytics/FinalSteps' | ||
|
||
import { SDKInstallAndroidInstructions, SDKInstallAndroidTrackScreenInstructions } from '../sdk-install-instructions' | ||
|
||
export function AndroidInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallAndroidInstructions includeReplay={false} /> | ||
<WebAnalyticsMobileFinalSteps /> | ||
<SDKInstallAndroidTrackScreenInstructions /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/angular.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallAngularInstructions } from '../sdk-install-instructions' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function AngularInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallAngularInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/astro.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallAstroInstructions } from '../sdk-install-instructions' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function AstroInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallAstroInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/bubble.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallBubbleInstructions } from '../sdk-install-instructions' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function BubbleInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallBubbleInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/framer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallFramerInstructions } from '../sdk-install-instructions' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function FramerInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallFramerInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/html-snippet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKHtmlSnippetInstructions } from '../sdk-install-instructions/html-snippet' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function HTMLSnippetInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKHtmlSnippetInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
16 changes: 16 additions & 0 deletions
16
frontend/src/scenes/onboarding/sdks/web-analytics/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
export * from './android' | ||
export * from './angular' | ||
export * from './astro' | ||
export * from './bubble' | ||
export * from './framer' | ||
export * from './html-snippet' | ||
export * from './ios' | ||
export * from './js-web' | ||
export * from './next-js' | ||
export * from './nuxt' | ||
export * from './react' | ||
export * from './react-native' | ||
export * from './remix' | ||
export * from './svelte' | ||
export * from './vue' | ||
export * from './webflow' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { WebAnalyticsMobileFinalSteps } from 'scenes/onboarding/sdks/web-analytics/FinalSteps' | ||
|
||
import { SDKInstallIOSInstructions, SDKInstallIOSTrackScreenInstructions } from '../sdk-install-instructions' | ||
|
||
export function iOSInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallIOSInstructions includeReplay={false} /> | ||
<WebAnalyticsMobileFinalSteps /> | ||
<SDKInstallIOSTrackScreenInstructions /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/js-web.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallJSWebInstructions } from '../sdk-install-instructions' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function JSWebInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallJSWebInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/next-js.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallNextJSInstructions } from '../sdk-install-instructions/next-js' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function NextJSInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallNextJSInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
11 changes: 11 additions & 0 deletions
11
frontend/src/scenes/onboarding/sdks/web-analytics/nuxt.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { SDKInstallNuxtJSInstructions } from '../sdk-install-instructions/nuxt' | ||
import { WebAnalyticsAllJSFinalSteps } from './FinalSteps' | ||
|
||
export function NuxtJSInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallNuxtJSInstructions /> | ||
<WebAnalyticsAllJSFinalSteps /> | ||
</> | ||
) | ||
} |
26 changes: 26 additions & 0 deletions
26
frontend/src/scenes/onboarding/sdks/web-analytics/react-native.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { CodeSnippet, Language } from 'lib/components/CodeSnippet' | ||
import { WebAnalyticsMobileFinalSteps } from 'scenes/onboarding/sdks/web-analytics/FinalSteps' | ||
|
||
import { SDKInstallRNInstructions } from '../sdk-install-instructions' | ||
|
||
export function WebAnalyticsRNInstructions(): JSX.Element { | ||
return ( | ||
<> | ||
<SDKInstallRNInstructions /> | ||
<h3 className="mt-4">Optional: Send a manual event</h3> | ||
<p>Our package will autocapture events for you, but you can manually define events, too!</p> | ||
<CodeSnippet language={Language.JSX}>{`// With hooks | ||
import { usePostHog } from 'posthog-react-native' | ||
const MyComponent = () => { | ||
const posthog = usePostHog() | ||
useEffect(() => { | ||
posthog.capture("MyComponent loaded", { foo: "bar" }) | ||
}, []) | ||
} | ||
`}</CodeSnippet> | ||
<WebAnalyticsMobileFinalSteps /> | ||
</> | ||
) | ||
} |
Oops, something went wrong.