From b3fdb8c3ae5dbc934a472a3e9e8aa23fa46b5e27 Mon Sep 17 00:00:00 2001
From: Raquel Smith <raquelmsmith@users.noreply.github.com>
Date: Thu, 12 Sep 2024 12:26:22 -0700
Subject: [PATCH] feat(onboarding-templates): allow someone to select pageview
 as variable (#24899)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../authorizedUrlListLogic.ts                 |   2 +-
 .../IframedToolbarBrowser.tsx                 |   4 +-
 .../iframedToolbarBrowserLogic.ts             |  28 ++-
 .../components/IframedToolbarBrowser/utils.ts |   1 +
 .../LemonInputSelect/LemonInputSelect.tsx     |  11 +-
 .../scenes/dashboard/Dashboards.stories.tsx   |  14 +-
 .../dashboardTemplateVariablesLogic.ts        |  27 +-
 .../src/scenes/dashboard/newDashboardLogic.ts |   2 +-
 .../DashboardTemplateConfigureStep.tsx        | 238 ++++++++++++------
 .../DashboardTemplateVariables.tsx            |  32 ++-
 .../src/scenes/onboarding/sdks/sdksLogic.tsx  |  13 +-
 frontend/src/toolbar/bar/toolbarLogic.ts      |  28 +++
 frontend/src/types.ts                         |  14 +-
 13 files changed, 299 insertions(+), 115 deletions(-)

diff --git a/frontend/src/lib/components/AuthorizedUrlList/authorizedUrlListLogic.ts b/frontend/src/lib/components/AuthorizedUrlList/authorizedUrlListLogic.ts
index 20d0811578258..8cc977e20f2ae 100644
--- a/frontend/src/lib/components/AuthorizedUrlList/authorizedUrlListLogic.ts
+++ b/frontend/src/lib/components/AuthorizedUrlList/authorizedUrlListLogic.ts
@@ -241,7 +241,7 @@ export const authorizedUrlListLogic = kea<authorizedUrlListLogicType>([
             [] as string[],
             {
                 setAuthorizedUrls: (_, { authorizedUrls }) => authorizedUrls,
-                addUrl: (state, { url }) => state.concat([url]),
+                addUrl: (state, { url }) => (!state.includes(url) ? state.concat([url]) : state),
                 updateUrl: (state, { index, url }) => Object.assign([...state], { [index]: url }),
                 removeUrl: (state, { index }) => {
                     const newUrls = [...state]
diff --git a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
index aa32b83e36ee7..2013b1a5e32c0 100644
--- a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
+++ b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
@@ -40,7 +40,7 @@ export function IframedToolbarBrowser({
 }): JSX.Element | null {
     const logic = iframedToolbarBrowserLogic({ iframeRef, userIntent: userIntent })
 
-    const { browserUrl } = useValues(logic)
+    const { browserUrl, initialPath } = useValues(logic)
     const { onIframeLoad, setIframeWidth } = useActions(logic)
 
     const { width: iframeWidth } = useResizeObserver<HTMLIFrameElement>({ ref: iframeRef })
@@ -55,7 +55,7 @@ export function IframedToolbarBrowser({
             <iframe
                 ref={iframeRef}
                 className="w-full h-full"
-                src={appEditorUrl(browserUrl, {
+                src={appEditorUrl(browserUrl + '/' + initialPath, {
                     userIntent: userIntent,
                 })}
                 // eslint-disable-next-line react/forbid-dom-props
diff --git a/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts b/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
index a2d74018d6aa8..93c4ddbeba724 100644
--- a/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
+++ b/frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
@@ -57,6 +57,8 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
         disableElementSelector: true,
         setNewActionName: (name: string | null) => ({ name }),
         toolbarMessageReceived: (type: PostHogAppToolbarEvent, payload: Record<string, any>) => ({ type, payload }),
+        setCurrentPath: (path: string) => ({ path }),
+        setInitialPath: (path: string) => ({ path }),
     }),
 
     reducers(({ props }) => ({
@@ -99,6 +101,22 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
                 setBrowserUrl: (_, { url }) => url,
             },
         ],
+        currentPath: [
+            // this does not have the leading / because we always need that to be a given since this value is user-editable
+            '' as string,
+            {
+                setCurrentPath: (_, { path }) => path,
+            },
+        ],
+        initialPath: [
+            // similar to currentPath, this also does not have the leading /
+            // this is used to set the initial browser URL if the user provides a path to navigate to
+            // we can't do this from within the iFrame with window.location.href = currentPath because we get XSS errors
+            '' as string,
+            {
+                setInitialPath: (_, { path }) => path,
+            },
+        ],
         loading: [
             false as boolean,
             {
@@ -133,6 +151,12 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
                 return iframeWidth ? calculateViewportRange(heatmapFilters, iframeWidth) : { min: 0, max: 1800 }
             },
         ],
+        currentFullUrl: [
+            (s) => [s.browserUrl, s.currentPath],
+            (browserUrl, currentPath) => {
+                return browserUrl + '/' + currentPath
+            },
+        ],
     }),
 
     listeners(({ actions, cache, props, values }) => ({
@@ -255,6 +279,9 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
                         actions.setNewActionName(null)
                         actions.disableElementSelector()
                         return
+                    case PostHogAppToolbarEvent.PH_TOOLBAR_NAVIGATED:
+                        // remove leading / from path
+                        return actions.setCurrentPath(payload.path.replace(/^\/+/, ''))
                     default:
                         console.warn(`[PostHog Heatmaps] Received unknown child window message: ${type}`)
                 }
@@ -270,7 +297,6 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
                 actions.startTrackingLoading()
             }
         },
-
         startTrackingLoading: () => {
             actions.setIframeBanner(null)
 
diff --git a/frontend/src/lib/components/IframedToolbarBrowser/utils.ts b/frontend/src/lib/components/IframedToolbarBrowser/utils.ts
index 87d9cae13cf9f..2e6a95577742a 100644
--- a/frontend/src/lib/components/IframedToolbarBrowser/utils.ts
+++ b/frontend/src/lib/components/IframedToolbarBrowser/utils.ts
@@ -17,6 +17,7 @@ export enum PostHogAppToolbarEvent {
     PH_ELEMENT_SELECTOR = 'ph-element-selector',
     PH_NEW_ACTION_NAME = 'ph-new-action-name',
     PH_NEW_ACTION_CREATED = 'ph-new-action-created',
+    PH_TOOLBAR_NAVIGATED = 'ph-toolbar-navigated',
 }
 
 export const DEFAULT_HEATMAP_FILTERS: HeatmapFilters = {
diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
index 6187ea318f6b7..4e457ed8f01dc 100644
--- a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
@@ -46,6 +46,9 @@ export type LemonInputSelectProps = Pick<
     onInputChange?: (newValue: string) => void
     'data-attr'?: string
     popoverClassName?: string
+    size?: 'xsmall' | 'small' | 'medium' | 'large'
+    borderless?: boolean
+    transparentBackground?: boolean
 }
 
 export function LemonInputSelect({
@@ -65,6 +68,9 @@ export function LemonInputSelect({
     autoFocus = false,
     popoverClassName,
     'data-attr': dataAttr,
+    size = 'medium',
+    borderless,
+    transparentBackground,
 }: LemonInputSelectProps): JSX.Element {
     const [showPopover, setShowPopover] = useState(false)
     const [inputValue, _setInputValue] = useState('')
@@ -444,6 +450,7 @@ export function LemonInputSelect({
                 onKeyDown={_onKeyDown}
                 disabled={disabled}
                 autoFocus={autoFocus}
+                transparentBackground={transparentBackground}
                 className={clsx(
                     'flex-wrap h-auto min-w-24',
                     // Putting button-like text styling on the single-select unfocused placeholder
@@ -451,9 +458,11 @@ export function LemonInputSelect({
                     mode === 'single' &&
                         values.length > 0 &&
                         !showPopover &&
-                        'cursor-pointer placeholder:*:text-default'
+                        'cursor-pointer placeholder:*:text-default',
+                    borderless && 'border-none'
                 )}
                 data-attr={dataAttr}
+                size={size}
             />
         </LemonDropdown>
     )
diff --git a/frontend/src/scenes/dashboard/Dashboards.stories.tsx b/frontend/src/scenes/dashboard/Dashboards.stories.tsx
index 1e25ad376ba95..34e6be5f20878 100644
--- a/frontend/src/scenes/dashboard/Dashboards.stories.tsx
+++ b/frontend/src/scenes/dashboard/Dashboards.stories.tsx
@@ -9,7 +9,7 @@ import { urls } from 'scenes/urls'
 
 import { mswDecorator } from '~/mocks/browser'
 import { useAvailableFeatures } from '~/mocks/features'
-import { DashboardMode } from '~/types'
+import { BaseMathType, DashboardMode, EntityTypes } from '~/types'
 
 import { dashboardTemplatesLogic } from './dashboards/templates/dashboardTemplatesLogic'
 
@@ -76,8 +76,8 @@ export const NewSelectVariables = (): JSX.Element => {
                     type: 'event',
                     default: {
                         id: '$pageview',
-                        math: 'dau',
-                        type: 'events',
+                        math: BaseMathType.UniqueUsers,
+                        type: EntityTypes.EVENTS,
                     },
                     required: true,
                     description: 'Add the current_url filter that matches your sign up page',
@@ -88,8 +88,8 @@ export const NewSelectVariables = (): JSX.Element => {
                     type: 'event',
                     default: {
                         id: '$pageview',
-                        math: 'dau',
-                        type: 'events',
+                        math: BaseMathType.UniqueUsers,
+                        type: EntityTypes.EVENTS,
                     },
                     required: true,
                     description:
@@ -101,8 +101,8 @@ export const NewSelectVariables = (): JSX.Element => {
                     type: 'event',
                     default: {
                         id: '$pageview',
-                        math: 'dau',
-                        type: 'events',
+                        math: BaseMathType.UniqueUsers,
+                        type: EntityTypes.EVENTS,
                     },
                     required: false,
                     description: 'Select the event which best represents when a user is activated',
diff --git a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
index e12513e025d38..340b6b2ed278e 100644
--- a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
+++ b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
@@ -22,8 +22,8 @@ export interface DashboardTemplateVariablesLogicProps {
 
 const FALLBACK_EVENT = {
     id: '$pageview',
-    math: 'dau',
-    type: 'events',
+    math: BaseMathType.UniqueUsers,
+    type: EntityTypes.EVENTS,
 }
 
 export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLogicType>([
@@ -39,6 +39,7 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
             filterGroup,
         }),
         setVariableFromAction: (variableName: string, action: ActionType) => ({ variableName, action }),
+        setVariableForPageview: (variableName: string, url: string) => ({ variableName, url }),
         setActiveVariableIndex: (index: number) => ({ index }),
         incrementActiveVariableIndex: true,
         possiblyIncrementActiveVariableIndex: true,
@@ -162,6 +163,28 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
             actions.setVariable(originalVariableName, filterGroup)
             actions.setIsCurrentlySelectingElement(false)
         },
+        setVariableForPageview: ({ variableName, url }) => {
+            const step: TemplateVariableStep = {
+                id: '$pageview',
+                math: BaseMathType.UniqueUsers,
+                type: EntityTypes.EVENTS,
+                order: 0,
+                name: '$pageview',
+                properties: [
+                    {
+                        key: '$current_url',
+                        value: url,
+                        operator: 'icontains',
+                        type: 'event',
+                    },
+                ],
+            }
+            const filterGroup: FilterType = {
+                events: [step],
+            }
+            actions.setVariable(variableName, filterGroup)
+            actions.setIsCurrentlySelectingElement(false)
+        },
         toolbarMessageReceived: ({ type, payload }) => {
             if (type === PostHogAppToolbarEvent.PH_NEW_ACTION_CREATED) {
                 actions.setVariableFromAction(payload.action.name, payload.action as ActionType)
diff --git a/frontend/src/scenes/dashboard/newDashboardLogic.ts b/frontend/src/scenes/dashboard/newDashboardLogic.ts
index 7e03ff6170fe1..fb83b3ca15b70 100644
--- a/frontend/src/scenes/dashboard/newDashboardLogic.ts
+++ b/frontend/src/scenes/dashboard/newDashboardLogic.ts
@@ -41,7 +41,7 @@ export function applyTemplate(obj: DashboardTile | JsonType, variables: Dashboar
             const variableId = obj.substring(1, obj.length - 1)
             const variable = variables.find((variable) => variable.id === variableId)
             if (variable && variable.default) {
-                return variable.default
+                return variable.default as JsonType
             }
             return obj
         }
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
index 476cef6de6275..0641d91353e02 100644
--- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
+++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
@@ -1,10 +1,10 @@
 import { IconArrowRight } from '@posthog/icons'
-import { LemonButton, LemonCard, LemonSkeleton, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonCard, LemonInput, LemonInputSelect, LemonSkeleton, Link, Spinner } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { IframedToolbarBrowser } from 'lib/components/IframedToolbarBrowser/IframedToolbarBrowser'
 import { iframedToolbarBrowserLogic } from 'lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 
@@ -14,6 +14,157 @@ import { sdksLogic } from '../sdks/sdksLogic'
 import { DashboardTemplateVariables } from './DashboardTemplateVariables'
 import { onboardingTemplateConfigLogic } from './onboardingTemplateConfigLogic'
 
+const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement> }): JSX.Element => {
+    const { setBrowserUrl, setInitialPath } = useActions(
+        iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
+    )
+    const { browserUrl, currentPath, currentFullUrl } = useValues(
+        iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
+    )
+    const { snippetHosts } = useValues(sdksLogic)
+    const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
+    const [inputValue, setInputValue] = useState(currentPath)
+    const { activeDashboardTemplate } = useValues(newDashboardLogic)
+    const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
+        variables: activeDashboardTemplate?.variables || [],
+    })
+    const { setVariableForPageview } = useActions(theDashboardTemplateVariablesLogic)
+    const { activeVariable } = useValues(theDashboardTemplateVariablesLogic)
+
+    useEffect(() => {
+        setInputValue(currentPath)
+    }, [currentPath])
+
+    return (
+        <div className="w-full flex gap-x-2 border-b border-1 border-border-bold p-2">
+            <LemonInput
+                size="small"
+                className="grow font-mono text-sm"
+                defaultValue={currentPath}
+                value={inputValue}
+                onChange={(v) => setInputValue(v)}
+                onPressEnter={() => {
+                    setInitialPath(inputValue || '')
+                }}
+                prefix={
+                    <span className="-mr-2 flex items-center">
+                        <div className="bg-bg-3000 rounded">
+                            <LemonInputSelect
+                                mode="single"
+                                value={[browserUrl || 'my-website.com']}
+                                options={snippetHosts.map((host) => ({ key: host, label: host }))}
+                                allowCustomValues={false}
+                                onChange={(v) => {
+                                    addUrl(v[0])
+                                    setBrowserUrl(v[0])
+                                    setInitialPath('')
+                                }}
+                                size="xsmall"
+                                transparentBackground
+                                borderless
+                            />
+                        </div>
+                        /
+                    </span>
+                }
+            />
+            <LemonButton
+                size="small"
+                type="primary"
+                icon={<IconArrowRight />}
+                onClick={() => {
+                    setInitialPath(inputValue || '')
+                }}
+            />
+            <LemonButton
+                size="small"
+                type="primary"
+                status="alt"
+                onClick={() => setVariableForPageview(activeVariable.name, currentFullUrl)}
+            >
+                Select pageview
+            </LemonButton>
+        </div>
+    )
+}
+
+export const SiteChooser = (): JSX.Element => {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const { snippetHosts, hasSnippetEventsLoading } = useValues(sdksLogic)
+    const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
+    const { setBrowserUrl } = useActions(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true }))
+    const { setStepKey } = useActions(onboardingLogic)
+
+    return (
+        <>
+            <div className="absolute inset-0 bg-primary-alt-highlight z-10 rounded opacity-80 backdrop-filter backdrop-blur-md flex items-center justify-center" />
+            <div className="absolute inset-0 z-20 rounded flex items-center justify-center">
+                <LemonCard className="max-w-lg" hoverEffect={false}>
+                    <h2>Select where you want to track events from.</h2>
+                    {hasSnippetEventsLoading ? (
+                        <Spinner />
+                    ) : snippetHosts.length > 0 ? (
+                        <>
+                            <p>
+                                Not seeing the site you want? Install posthog-js or the HTML snippet wherever you want
+                                to track events, then come back here.
+                            </p>
+                            <div className="space-y-2">
+                                {snippetHosts.map((host) => (
+                                    <LemonButton
+                                        key={`snippet-host-button-${host}`}
+                                        type="tertiary"
+                                        status="default"
+                                        onClick={() => {
+                                            addUrl(host)
+                                            setBrowserUrl(host)
+                                        }}
+                                        sideIcon={<IconArrowRight />}
+                                    >
+                                        {host}
+                                    </LemonButton>
+                                ))}
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <p className="text-muted">
+                                Hm, it looks like you haven't ingested any events from a website yet. To select actions
+                                from your site, head back to the{' '}
+                                <Link onClick={() => setStepKey(OnboardingStepKey.INSTALL)}>install step</Link> to
+                                install posthog-js in your frontend.
+                            </p>
+                            <p className="text-muted">
+                                You can still create a dashboard using custom event names, though it's not quite as fun.
+                            </p>
+                            <LemonButton onClick={() => setStepKey(OnboardingStepKey.INSTALL)} type="primary">
+                                Install posthog-js
+                            </LemonButton>
+                        </>
+                    )}
+                </LemonCard>
+            </div>
+            <div className="space-y-6 relative m-6">
+                <LemonSkeleton className="h-10 rounded-lg w-1/3" />
+                <div className="space-y-2">
+                    <LemonSkeleton repeat={5} />
+                </div>
+                <div className="space-y-2">
+                    <LemonSkeleton repeat={3} />
+                </div>
+                <LemonSkeleton className="h-6 rounded-lg w-2/3" />
+                <div className="space-y-2">
+                    <LemonSkeleton repeat={3} />
+                </div>
+                <LemonSkeleton className="h-10 rounded-lg w-2/3" />
+                <div className="space-y-2">
+                    <LemonSkeleton repeat={5} />
+                </div>
+            </div>
+        </>
+    )
+}
+
 export const OnboardingDashboardTemplateConfigureStep = ({
     stepKey = OnboardingStepKey.DASHBOARD_TEMPLATE,
 }: {
@@ -23,15 +174,12 @@ export const OnboardingDashboardTemplateConfigureStep = ({
     const { activeDashboardTemplate } = useValues(onboardingTemplateConfigLogic)
     const { createDashboardFromTemplate } = useActions(newDashboardLogic)
     const { isLoading } = useValues(newDashboardLogic)
-    const { snippetHosts } = useValues(sdksLogic)
-    const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
-    const { setBrowserUrl } = useActions(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true }))
     const { browserUrl } = useValues(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true }))
     const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
         variables: activeDashboardTemplate?.variables || [],
     })
     const { variables, allVariablesAreTouched, hasTouchedAnyVariable } = useValues(theDashboardTemplateVariablesLogic)
-    const { goToNextStep, setStepKey } = useActions(onboardingLogic)
+    const { goToNextStep } = useActions(onboardingLogic)
 
     const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -50,80 +198,14 @@ export const OnboardingDashboardTemplateConfigureStep = ({
                     <div className="grid grid-cols-6 space-x-6 min-h-[80vh]">
                         <div className="col-span-4 relative">
                             {browserUrl ? (
-                                <div className="border border-1 border-border-bold p-2 rounded h-full w-full">
-                                    <IframedToolbarBrowser iframeRef={iframeRef} userIntent="add-action" />
+                                <div className="border border-1 border-border-bold rounded h-full w-full flex flex-col">
+                                    <UrlInput iframeRef={iframeRef} />
+                                    <div className="m-2 grow rounded">
+                                        <IframedToolbarBrowser iframeRef={iframeRef} userIntent="add-action" />
+                                    </div>
                                 </div>
                             ) : (
-                                <>
-                                    <div className="absolute inset-0 bg-primary-alt-highlight z-10 rounded opacity-80 backdrop-filter backdrop-blur-md flex items-center justify-center" />
-                                    <div className="absolute inset-0 z-20 rounded flex items-center justify-center">
-                                        <LemonCard className="max-w-lg" hoverEffect={false}>
-                                            <h2>Select where you want to track events from.</h2>
-                                            {snippetHosts.length > 0 ? (
-                                                <>
-                                                    <p>
-                                                        Not seeing the site you want? Install posthog-js or the HTML
-                                                        snippet wherever you want to track events, then come back here.
-                                                    </p>
-                                                    <div className="space-y-2">
-                                                        {snippetHosts.map((host) => (
-                                                            <LemonButton
-                                                                key={`snippet-host-button-${host}`}
-                                                                type="tertiary"
-                                                                status="default"
-                                                                onClick={() => {
-                                                                    addUrl(host)
-                                                                    setBrowserUrl(host)
-                                                                }}
-                                                                sideIcon={<IconArrowRight />}
-                                                            >
-                                                                {host}
-                                                            </LemonButton>
-                                                        ))}
-                                                    </div>
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <p className="text-muted">
-                                                        Hm, it looks like you haven't ingested any events from a website
-                                                        yet. To select actions from your site, head back to the{' '}
-                                                        <Link onClick={() => setStepKey(OnboardingStepKey.INSTALL)}>
-                                                            install step
-                                                        </Link>{' '}
-                                                        to install posthog-js in your frontend.
-                                                    </p>
-                                                    <p className="text-muted">
-                                                        You can still create a dashboard using custom event names,
-                                                        though it's not quite as fun.
-                                                    </p>
-                                                    <LemonButton
-                                                        onClick={() => setStepKey(OnboardingStepKey.INSTALL)}
-                                                        type="primary"
-                                                    >
-                                                        Install posthog-js
-                                                    </LemonButton>
-                                                </>
-                                            )}
-                                        </LemonCard>
-                                    </div>
-                                    <div className="space-y-6 relative m-6">
-                                        <LemonSkeleton className="h-10 rounded-lg w-1/3" />
-                                        <div className="space-y-2">
-                                            <LemonSkeleton repeat={5} />
-                                        </div>
-                                        <div className="space-y-2">
-                                            <LemonSkeleton repeat={3} />
-                                        </div>
-                                        <LemonSkeleton className="h-6 rounded-lg w-2/3" />
-                                        <div className="space-y-2">
-                                            <LemonSkeleton repeat={3} />
-                                        </div>
-                                        <LemonSkeleton className="h-10 rounded-lg w-2/3" />
-                                        <div className="space-y-2">
-                                            <LemonSkeleton repeat={5} />
-                                        </div>
-                                    </div>
-                                </>
+                                <SiteChooser />
                             )}
                         </div>
                         <div className="col-span-2">
diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
index 9f87ff0aeb0f4..a6fe3e4cf6e9b 100644
--- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
+++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 
-import { DashboardTemplateVariableType } from '~/types'
+import { DashboardTemplateVariableType, EntityTypes } from '~/types'
 
 function VariableSelector({
     variableName,
@@ -64,16 +64,26 @@ function VariableSelector({
                             <span className="text-success font-bold">Selected</span>
                         </p>
                         <div className="ml-4">
-                            <p className="text-muted mb-0 text-xs">
-                                <span className="font-bold">CSS selector:</span>{' '}
-                                {variable.default.selector || 'not set'}
-                            </p>
-                            <p className="text-muted mb-0 text-xs">
-                                <span className="font-bold">Element href:</span> {variable.default.href || 'not set'}
-                            </p>
-                            <p className="text-muted mb-1 text-xs">
-                                <span className="font-bold">Page URL:</span> {variable.default.url || 'any url'}
-                            </p>
+                            {variable.default.type === EntityTypes.ACTIONS ? (
+                                <>
+                                    <p className="text-muted mb-0 text-xs">
+                                        <span className="font-bold">CSS selector:</span>{' '}
+                                        {variable.default.selector || 'not set'}
+                                    </p>
+                                    <p className="text-muted mb-0 text-xs">
+                                        <span className="font-bold">Element href:</span>{' '}
+                                        {variable.default.href || 'not set'}
+                                    </p>
+                                    <p className="text-muted mb-1 text-xs">
+                                        <span className="font-bold">Page URL:</span> {variable.default.url || 'any url'}
+                                    </p>
+                                </>
+                            ) : variable.default.type === EntityTypes.EVENTS ? (
+                                <p className="text-muted mb-1 text-xs">
+                                    <span className="font-bold">Pageview URL:</span>{' '}
+                                    {variable.default.properties?.[0].value || 'any url'}
+                                </p>
+                            ) : null}
                         </div>
                     </div>
                     <div>
diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
index 6d4a0d4641eb2..791208dc82260 100644
--- a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -129,19 +129,22 @@ export const sdksLogic = kea<sdksLogicType>([
                         query: hogql`SELECT
                                         max(timestamp) AS latest_timestamp,
                                         concat(
-                                            if(startsWith(properties.current_url, 'https://'), 'https://', 'http://'),
+                                            concat({protocol}, '//'),
                                             properties.$host
-                                        ) AS full_host
+                                        ) AS full_host,
                                     FROM events
-                                    WHERE timestamp >= now() - INTERVAL 5 DAY
+                                    WHERE timestamp >= now() - INTERVAL 3 DAY
                                     AND timestamp <= now()
                                     AND properties.$lib = 'web'
                                     AND properties.$host is not null
+                                    AND startsWith(properties.$current_url, {protocol})
                                     GROUP BY full_host
                                     ORDER BY latest_timestamp DESC
-                                    LIMIT 10`,
+                                    LIMIT 7`,
+                        values: {
+                            protocol: window.location.protocol,
+                        },
                     }
-
                     const res = await api.query(query)
                     const hasEvents = !!(res.results?.length ?? 0 > 0)
                     const snippetHosts = res.results?.map((result) => result[1]).filter((val) => !!val) ?? []
diff --git a/frontend/src/toolbar/bar/toolbarLogic.ts b/frontend/src/toolbar/bar/toolbarLogic.ts
index dd5a8dd6a2f2b..2805195e9fda5 100644
--- a/frontend/src/toolbar/bar/toolbarLogic.ts
+++ b/frontend/src/toolbar/bar/toolbarLogic.ts
@@ -72,6 +72,8 @@ export const toolbarLogic = kea<toolbarLogicType>([
         setIsBlurred: (isBlurred: boolean) => ({ isBlurred }),
         setIsEmbeddedInApp: (isEmbedded: boolean) => ({ isEmbedded }),
         setFixedPosition: (position: ToolbarPositionType) => ({ position }),
+        setCurrentPathname: (pathname: string) => ({ pathname }),
+        maybeSendNavigationMessage: true,
     })),
     windowValues(() => ({
         windowHeight: (window: Window) => window.innerHeight,
@@ -164,6 +166,12 @@ export const toolbarLogic = kea<toolbarLogicType>([
                 setIsEmbeddedInApp: (_, { isEmbedded }) => isEmbedded,
             },
         ],
+        currentPathname: [
+            '',
+            {
+                setCurrentPathname: (_, { pathname }) => pathname,
+            },
+        ],
     })),
     selectors({
         position: [
@@ -403,6 +411,16 @@ export const toolbarLogic = kea<toolbarLogicType>([
             // if embedded, we need to tell the parent window that a new action was created
             window.parent.postMessage({ type: PostHogAppToolbarEvent.PH_NEW_ACTION_CREATED, payload: action }, '*')
         },
+        maybeSendNavigationMessage: () => {
+            const currentPath = window.location.pathname
+            if (currentPath !== values.currentPathname) {
+                actions.setCurrentPathname(currentPath)
+                window.parent.postMessage(
+                    { type: PostHogAppToolbarEvent.PH_TOOLBAR_NAVIGATED, payload: { path: currentPath } },
+                    '*'
+                )
+            }
+        },
     })),
     afterMount(({ actions, values, cache }) => {
         cache.clickListener = (e: MouseEvent): void => {
@@ -412,6 +430,16 @@ export const toolbarLogic = kea<toolbarLogicType>([
             }
         }
         window.addEventListener('mousedown', cache.clickListener)
+        window.addEventListener('popstate', () => {
+            actions.maybeSendNavigationMessage()
+        })
+
+        // Use a setInterval to periodically check for URL changes
+        // We do this because we don't want to write over the history.pushState function in case other scripts rely on it
+        // And mutation observers don't seem to work :shrug:
+        setInterval(() => {
+            actions.maybeSendNavigationMessage()
+        }, 500)
 
         // the toolbar can be run within the posthog parent app
         // if it is then it listens to parent messages
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index c604bd55e4de8..1cd96ee0225ee 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1809,7 +1809,7 @@ export interface DashboardTemplateVariableType {
     name: string
     description: string
     type: 'event'
-    default: Record<string, JsonType>
+    default: TemplateVariableStep
     required: boolean
     touched?: boolean
     selector?: string
@@ -2147,14 +2147,16 @@ export interface FilterType {
 }
 
 export interface TemplateVariableStep {
-    id: string
-    math: BaseMathType
-    name: string | null
-    order: number
-    type: EntityTypes
+    id?: string
+    math?: BaseMathType
+    name?: string | null
+    order?: number
+    type?: EntityTypes
+    event?: string
     selector?: string | null
     href?: string | null
     url?: string | null
+    properties?: Record<string, any>[]
 }
 
 export interface PropertiesTimelineFilterType {