Skip to content

Commit

Permalink
add pageview event variable
Browse files Browse the repository at this point in the history
  • Loading branch information
@raquelmsmith
raquelmsmith committed Sep 11, 2024
1 parent 4fc9141 commit 206551a
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 30 deletions.
6 changes: 6 additions & 0 deletions frontend/src/lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,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 }) => ({
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/scenes/dashboard/Dashboards.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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',
Expand All @@ -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:
Expand All @@ -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',
Expand Down
27 changes: 25 additions & 2 deletions frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>([
Expand All @@ -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,
Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/scenes/dashboard/newDashboardLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
15 changes: 13 additions & 2 deletions frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,18 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
const { setBrowserUrl, setCurrentPath } = useActions(
iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
)
const { browserUrl, currentPath } = useValues(
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)
Expand Down Expand Up @@ -70,7 +76,12 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
setCurrentPath(inputValue || '', true)
}}
/>
<LemonButton size="small" type="primary">
<LemonButton
size="small"
type="primary"
status="alt"
onClick={() => setVariableForPageview(activeVariable.name, currentFullUrl)}
>
Select pageview
</LemonButton>
</div>
Expand Down
32 changes: 21 additions & 11 deletions frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/toolbar/bar/toolbarLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,9 @@ export const toolbarLogic = kea<toolbarLogicType>([
actions.setAutomaticActionCreationEnabled(true, e.data.payload.name)
return
case PostHogAppToolbarEvent.PH_NAVIGATE:
window.location.href = e.data.payload.url
if (window.location.href !== e.data.payload.url) {
window.location.href = e.data.payload.url

Check warning

Code scanning / CodeQL

Client-side URL redirect Medium

Untrusted URL redirection depends on a
user-provided value
Loading
.

Check failure

Code scanning / CodeQL

Client-side cross-site scripting High

Cross-site scripting vulnerability due to
user-provided value
Loading
.
}
return
default:
console.warn(`[PostHog Toolbar] Received unknown parent window message: ${type}`)
Expand Down
14 changes: 8 additions & 6 deletions frontend/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 206551a

Please sign in to comment.