feat: split snippet sdks into JS web and HTML snippet (#20023)

* split JS snippet into package and HTML

* do for replay

* do for surveys

* clarify that it's a manual event

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/onboarding/sdks/allSDKs.tsx

@@ -11,6 +11,14 @@ export const allSDKs: SDK[] = [
         image: require('./logos/javascript_web.svg'),
         docsLink: 'https://posthog.com/docs/libraries/js',
     },
+    {
+        name: 'HTML snippet',
+        key: SDKKey.HTML_SNIPPET,
+        recommended: true,
+        tags: [SDKTag.RECOMMENDED, SDKTag.WEB],
+        image: require('./logos/html.svg'),
+        docsLink: 'https://posthog.com/docs/libraries/js',
+    },
     {
         name: 'React',
         key: SDKKey.REACT,

frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx

@@ -1,6 +1,7 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
 
 import {
+    HTMLSnippetInstructions,
     JSWebInstructions,
     ProductAnalyticsAndroidInstructions,
     ProductAnalyticsAPIInstructions,
@@ -17,6 +18,7 @@ import {
 
 export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
+    [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
     // add next, getsby, and others here
     [SDKKey.IOS]: ProductAnalyticsIOSInstructions,
     [SDKKey.REACT_NATIVE]: ProductAnalyticsRNInstructions,

frontend/src/scenes/onboarding/sdks/product-analytics/html-snippet.tsx

@@ -0,0 +1,22 @@
+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 (
+        <CodeSnippet language={Language.JavaScript}>{`posthog.capture('my event', { property: 'value' })`}</CodeSnippet>
+    )
+}
+
+export function HTMLSnippetInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKHtmlSnippetInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <h4>Optional: Send a manual event</h4>
+            <p>Our snippet will autocapture events for you, but you can manually define events, too!</p>
+            <JSEventSnippet />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx

@@ -3,6 +3,7 @@ export * from './api'
 export * from './elixir'
 export * from './flutter'
 export * from './go'
+export * from './html-snippet'
 export * from './ios'
 export * from './js-web'
 export * from './nodejs'

frontend/src/scenes/onboarding/sdks/product-analytics/js-web.tsx

@@ -14,7 +14,8 @@ export function JSWebInstructions(): JSX.Element {
         <>
             <SDKInstallJSWebInstructions />
             <LemonDivider thick dashed className="my-4" />
-            <h4>Send your first event</h4>
+            <h4>Optional: Send a manual event</h4>
+            <p>Our package will autocapture events for you, but you can manually define events, too!</p>
             <JSEventSnippet />
         </>
     )

frontend/src/scenes/onboarding/sdks/product-analytics/react-native.tsx

@@ -6,7 +6,8 @@ export function ProductAnalyticsRNInstructions(): JSX.Element {
     return (
         <>
             <SDKInstallRNInstructions />
-            <h3 className="mt-4">Send an Event</h3>
+            <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'
 

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/html-snippet.tsx

@@ -0,0 +1,14 @@
+import { JSSnippet } from 'lib/components/JSSnippet'
+
+export function SDKHtmlSnippetInstructions(): JSX.Element {
+    return (
+        <>
+            <h3>Install</h3>
+            <p>
+                Just add this snippet to your website within the <code>&lt;head&gt;</code> tag and you'll be ready to
+                start using PostHog. This can also be used in services like Google Tag Manager.
+            </p>
+            <JSSnippet />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/js-web.tsx

@@ -1,7 +1,5 @@
 import { useValues } from 'kea'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { JSSnippet } from 'lib/components/JSSnippet'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { teamLogic } from 'scenes/teamLogic'
 
 export function JSInstallSnippet(): JSX.Element {
@@ -29,17 +27,9 @@ export function JSSetupSnippet(): JSX.Element {
 export function SDKInstallJSWebInstructions(): JSX.Element {
     return (
         <>
-            <h3>Option 1. Code snippet</h3>
-            <p>
-                Just add this snippet to your website within the <code>&lt;head&gt;</code> tag and you'll be ready to
-                start using PostHog.{' '}
-            </p>
-            <JSSnippet />
-            <LemonDivider thick dashed className="my-4" />
-            <h3>Option 2. Javascript Library</h3>
-            <h4>Install the package</h4>
+            <h3>Install</h3>
             <JSInstallSnippet />
-            <h4>Initialize</h4>
+            <h3>Initialize</h3>
             <JSSetupSnippet />
         </>
     )

frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx

@@ -1,9 +1,10 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
 
-import { JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
+import { HTMLSnippetInstructions, JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
 
 export const SessionReplaySDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
+    [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
     [SDKKey.NEXT_JS]: NextJSInstructions,
     [SDKKey.REACT]: ReactInstructions,
 }

frontend/src/scenes/onboarding/sdks/session-replay/html-snippet.tsx

@@ -0,0 +1,15 @@
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+
+import { SDKHtmlSnippetInstructions } from '../sdk-install-instructions/html-snippet'
+import { SessionReplayFinalSteps } from '../shared-snippets'
+
+export function HTMLSnippetInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKHtmlSnippetInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <h3>Final steps</h3>
+            <SessionReplayFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/session-replay/index.tsx

@@ -1,3 +1,4 @@
+export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'
 export * from './react'

frontend/src/scenes/onboarding/sdks/surveys/SurveysSDKInstructions.tsx

@@ -1,9 +1,10 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
 
-import { JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
+import { HTMLSnippetInstructions, JSWebInstructions, NextJSInstructions, ReactInstructions } from '.'
 
 export const SurveysSDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,
+    [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions,
     [SDKKey.NEXT_JS]: NextJSInstructions,
     [SDKKey.REACT]: ReactInstructions,
 }

frontend/src/scenes/onboarding/sdks/surveys/html-snippet.tsx

@@ -0,0 +1,14 @@
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+
+import { SDKHtmlSnippetInstructions } from '../sdk-install-instructions/html-snippet'
+import { SurveysFinalSteps } from './SurveysFinalSteps'
+
+export function HTMLSnippetInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKHtmlSnippetInstructions />
+            <LemonDivider thick dashed className="my-4" />
+            <SurveysFinalSteps />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/surveys/index.tsx

@@ -1,3 +1,4 @@
+export * from './html-snippet'
 export * from './js-web'
 export * from './next-js'
 export * from './react'

frontend/src/types.ts

@@ -3683,6 +3683,7 @@ export enum SDKKey {
     WORDPRESS = 'wordpress',
     SENTRY = 'sentry',
     RETOOL = 'retool',
+    HTML_SNIPPET = 'html',
 }
 
 export enum SDKTag {