feat(web-analytics): Add page-level conversion goals, part 1 (#24910)

frontend/src/queries/nodes/WebOverview/WebOverview.tsx

@@ -40,14 +40,16 @@ export function WebOverview(props: {
 
     const samplingRate = webOverviewQueryResponse?.samplingRate
 
+    const numSkeletons = props.query.conversionGoal ? 4 : 5
+
     return (
         <>
             <EvenlyDistributedRows
                 className="flex justify-center items-center flex-wrap w-full gap-2"
                 minWidthRems={OVERVIEW_ITEM_CELL_MIN_WIDTH_REMS + 2}
             >
                 {responseLoading
-                    ? range(5).map((i) => <WebOverviewItemCellSkeleton key={i} />)
+                    ? range(numSkeletons).map((i) => <WebOverviewItemCellSkeleton key={i} />)
                     : webOverviewQueryResponse?.results?.map((item) => (
                           <WebOverviewItemCell key={item.key} item={item} />
                       )) || []}
@@ -170,6 +172,12 @@ const labelFromKey = (key: string): string => {
             return 'Session duration'
         case 'bounce rate':
             return 'Bounce rate'
+        case 'conversion rate':
+            return 'Conversion rate'
+        case 'total conversions':
+            return 'Total conversions'
+        case 'unique conversions':
+            return 'Unique conversions'
         default:
             return key
                 .split(' ')

frontend/src/queries/schema.json

@@ -10670,6 +10670,16 @@
             },
             "type": "object"
         },
+        "WebAnalyticsConversionGoal": {
+            "additionalProperties": false,
+            "properties": {
+                "actionId": {
+                    "type": "integer"
+                }
+            },
+            "required": ["actionId"],
+            "type": "object"
+        },
         "WebAnalyticsPropertyFilter": {
             "anyOf": [
                 {
@@ -10692,6 +10702,16 @@
         "WebExternalClicksTableQuery": {
             "additionalProperties": false,
             "properties": {
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
                 "dateRange": {
                     "$ref": "#/definitions/DateRange"
                 },
@@ -10795,6 +10815,16 @@
         "WebGoalsQuery": {
             "additionalProperties": false,
             "properties": {
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
                 "dateRange": {
                     "$ref": "#/definitions/DateRange"
                 },
@@ -10924,6 +10954,16 @@
                 "compare": {
                     "type": "boolean"
                 },
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
                 "dateRange": {
                     "$ref": "#/definitions/DateRange"
                 },
@@ -11038,6 +11078,16 @@
                 "breakdownBy": {
                     "$ref": "#/definitions/WebStatsBreakdown"
                 },
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
                 "dateRange": {
                     "$ref": "#/definitions/DateRange"
                 },
@@ -11147,6 +11197,16 @@
         "WebTopClicksQuery": {
             "additionalProperties": false,
             "properties": {
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ]
+                },
                 "dateRange": {
                     "$ref": "#/definitions/DateRange"
                 },

frontend/src/queries/schema.ts

@@ -1336,10 +1336,13 @@ export interface SessionsTimelineQuery extends DataNode<SessionsTimelineQueryRes
 }
 export type WebAnalyticsPropertyFilter = EventPropertyFilter | PersonPropertyFilter | SessionPropertyFilter
 export type WebAnalyticsPropertyFilters = WebAnalyticsPropertyFilter[]
-
+export type WebAnalyticsConversionGoal = {
+    actionId: integer
+}
 interface WebAnalyticsQueryBase<R extends Record<string, any>> extends DataNode<R> {
     dateRange?: DateRange
     properties: WebAnalyticsPropertyFilters
+    conversionGoal?: WebAnalyticsConversionGoal | null
     sampling?: {
         enabled?: boolean
         forceSamplingRate?: SamplingRate

frontend/src/scenes/web-analytics/WebConversionGoal.tsx

@@ -0,0 +1,38 @@
+import { useActions, useValues } from 'kea'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
+import { webAnalyticsLogic } from 'scenes/web-analytics/webAnalyticsLogic'
+
+import { actionsModel } from '~/models/actionsModel'
+
+export const WebConversionGoal = (): JSX.Element | null => {
+    const { conversionGoal } = useValues(webAnalyticsLogic)
+    const { setConversionGoal } = useActions(webAnalyticsLogic)
+    const { actions } = useValues(actionsModel)
+
+    return (
+        <TaxonomicPopover<number>
+            data-attr="web-analytics-conversion-filter"
+            groupType={TaxonomicFilterGroupType.Actions}
+            value={conversionGoal?.actionId}
+            onChange={(changedValue: number | '') => {
+                if (typeof changedValue === 'number') {
+                    setConversionGoal({ actionId: changedValue })
+                } else {
+                    setConversionGoal(null)
+                }
+            }}
+            renderValue={(value) => {
+                const conversionGoalAction = actions.find((a) => a.id === value)
+                return (
+                    <span className="text-overflow max-w-full">{conversionGoalAction?.name ?? 'Conversion goal'}</span>
+                )
+            }}
+            groupTypes={[TaxonomicFilterGroupType.Actions]}
+            placeholder="Add conversion goal"
+            placeholderClass=""
+            allowClear={true}
+            size="small"
+        />
+    )
+}

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -3,12 +3,14 @@ import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { VersionCheckerBanner } from 'lib/components/VersionChecker/VersionCheckerBanner'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonSegmentedButton } from 'lib/lemon-ui/LemonSegmentedButton'
 import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
 import { PostHogComDocsURL } from 'lib/lemon-ui/Link/Link'
 import { Popover } from 'lib/lemon-ui/Popover'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isNotNil } from 'lib/utils'
 import React, { useState } from 'react'
 import { WebAnalyticsErrorTrackingTile } from 'scenes/web-analytics/tiles/WebAnalyticsErrorTracking'
@@ -23,6 +25,7 @@ import {
     webAnalyticsLogic,
 } from 'scenes/web-analytics/webAnalyticsLogic'
 import { WebAnalyticsModal } from 'scenes/web-analytics/WebAnalyticsModal'
+import { WebConversionGoal } from 'scenes/web-analytics/WebConversionGoal'
 import { WebPropertyFilters } from 'scenes/web-analytics/WebPropertyFilters'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
@@ -39,6 +42,8 @@ const Filters = (): JSX.Element => {
     } = useValues(webAnalyticsLogic)
     const { setWebAnalyticsFilters, setDates } = useActions(webAnalyticsLogic)
     const { mobileLayout } = useValues(navigationLogic)
+    const { conversionGoal } = useValues(webAnalyticsLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     return (
         <div
@@ -53,6 +58,9 @@ const Filters = (): JSX.Element => {
                     setWebAnalyticsFilters={setWebAnalyticsFilters}
                     webAnalyticsFilters={webAnalyticsFilters}
                 />
+                {featureFlags[FEATURE_FLAGS.WEB_ANALYTICS_CONVERSION_GOALS] || conversionGoal ? (
+                    <WebConversionGoal />
+                ) : null}
                 <ReloadAll />
             </div>
             <div className="bg-border h-px w-full mt-2" />