feat(web-analytics): Display data relevant to currently selected conversion goal

frontend/src/lib/constants.tsx

@@ -240,6 +240,7 @@ export const FEATURE_FLAGS = {
     REPLAY_LIST_RECORDINGS_AS_QUERY: 'replay-list-recordings-as-query', // owner: @pauldambra #team-replay
     BILLING_SKIP_FORECASTING: 'billing-skip-forecasting', // owner: @zach
     WEB_ANALYTICS_PERIOD_COMPARISON: 'web-analytics-period-comparison', // owner: @rafaeelaudibert #team-web-analytics
+    WEB_ANALYTICS_CONVERSION_GOAL_FILTERS: 'web-analytics-conversion-goal-filters', // owner: @rafaeelaudibert #team-web-analytics
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/queries/schema.json

@@ -12666,6 +12666,17 @@
                     "$ref": "#/definitions/CompareFilter",
                     "description": "Compare to date range"
                 },
+                "conversionGoal": {
+                    "anyOf": [
+                        {
+                            "$ref": "#/definitions/WebAnalyticsConversionGoal"
+                        },
+                        {
+                            "type": "null"
+                        }
+                    ],
+                    "description": "Whether we should be comparing against a specific conversion goal"
+                },
                 "dateRange": {
                     "$ref": "#/definitions/InsightDateRange",
                     "description": "Date range for the query"

frontend/src/queries/schema.ts

@@ -910,6 +910,8 @@ export interface TrendsQuery extends InsightsQueryBase<TrendsQueryResponse> {
     breakdownFilter?: BreakdownFilter
     /** Compare to date range */
     compareFilter?: CompareFilter
+    /**  Whether we should be comparing against a specific conversion goal */
+    conversionGoal?: WebAnalyticsConversionGoal | null
 }
 
 export type AssistantArrayPropertyFilterOperator = PropertyOperator.Exact | PropertyOperator.IsNot

frontend/src/scenes/web-analytics/tiles/WebAnalyticsRecordings.tsx

@@ -16,6 +16,7 @@ export function WebAnalyticsRecordingsTile({ tile }: { tile: ReplayTile }): JSX.
     const { layout } = tile
     const { replayFilters, webAnalyticsFilters } = useValues(webAnalyticsLogic)
     const { currentTeam } = useValues(teamLogic)
+
     const sessionRecordingsListLogicInstance = sessionRecordingsPlaylistLogic({
         logicKey: 'webAnalytics',
         filters: replayFilters,

frontend/src/scenes/web-analytics/tiles/WebAnalyticsTile.tsx

@@ -321,6 +321,11 @@ export const webAnalyticsDataTableQueryContext: QueryContext = {
             render: VariationCell(),
             align: 'right',
         },
+        unique_conversions: {
+            title: <span className="pr-5">Unique Conversions</span>,
+            render: VariationCell(),
+            align: 'right',
+        },
         conversion_rate: {
             title: <span className="pr-5">Conversion Rate</span>,
             render: VariationCell({ isPercentage: true }),