Feature Description

This issue will add the "Goal drivers" section within the new Site Goals widgets and also implement 3 of the 7 metric tiles for these drivers. (Design doc section).

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new "Goal drivers" section should be added to both Site Goals widgets as per the Figma mock.
• As part of this issue, we should implement the following three Goal driver metric tiles (Figma mocks for individual tiles):
  • Top traffic channels
  • Top pages
  • Visitor type
• This issue should add one row of three tiles into this section (the Side settings panel will be implemented in a separate issue).
• Clicking on the "Show more" link should extend the tiles to show 6 rows of data instead of 3 within each tile.

Implementation Brief

New goal drivers section

• Add assets/js/modules/analytics-4/components/site-goals/goal-drivers/GoalDriversSection.js as the section wrapper for the 3 driver tiles matching the Figma design.
• Render exactly one row of three tiles (Top traffic channels, Top pages, Visitor type) and implement section-level expansion.
• Default: show 3 rows per tile.
• On Show more: expand to 6 rows per tile.
• Use one section-level toggle (isExpanded) and pass limit={ isExpanded ? 6 : 3 } to each GoalDriver tile.
• Show the Show more link only if at least one tile has more than 3 rows.
• The two Site Goals widgets (OnlineStorePerformanceWidget, LeadGenerationPerformanceWidget) will be orchestration containers only that pass normalized data into Goal Drivers components.
• Keep data fetching/computation out of GoalDriversSection and the 3 GoalDriver tile components to keep clear separation.

Goal drivers registry

• Add assets/js/modules/analytics-4/components/site-goals/goal-drivers/registry.js exporting GOAL_DRIVER_CATALOG map keyed by stable IDs: topTrafficChannels, topPages, visitorType.
• Each catalog entry must include only render metadata: id, title, order, defaultEnabled, Component.
• Example:

{
topTrafficChannels: {
    id: 'topTrafficChannels',
    title: 'Top traffic channels',
    order: 10,
    defaultEnabled: true,
    Component: TopTrafficChannelsGoalDriver,
  },
...
}

• Add assets/js/modules/analytics-4/components/site-goals/goal-drivers/getActiveGoalDriverIDs.js (getActiveGoalDriverIDs( selectedDriverIDs )) to resolve active IDs from selectedDriverIDs (and extract it from GOAL_DRIVER_CATALOG[id]), with fallback to defaultEnabled sorted by order.
• Filter unknown IDs so unsupported future values are ignored safely.

Goal drivers hooks

• Add per-driver hooks in assets/js/modules/analytics-4/components/site-goals/goal-drivers/hooks/: useTopTrafficChannelsGoalDriverData.js, useTopPagesGoalDriverData.js, useVisitorTypeGoalDriverData.js.
  • Standardize hook return shape to eq { id, rows, totalRows, loading, error }.
• Rows should be normalized table rows (display-ready), and totalRows should represent pre-limit row count for section expand logic.
• In useTopTrafficChannelsGoalDriverData:
  • Query GA4 by sessionDefaultChannelGroup + eventCount, sorted desc, up to 6 rows.
• In useTopPagesGoalDriverData:
  • Query GA4 by pagePath + eventCount, sorted desc, up to 6 rows.
  • Resolve titles with getPageTitles; fallback to page path when title unavailable.
• In useVisitorTypeGoalDriverData:
  • Query GA4 by newVsReturning + eventCount.
  • Map values to display labels and render counts in tile table format.
• Ecommerce mode: all three hooks filter by selected primary event from getPrimaryEcommerceEvent().
• Lead mode: all three hooks include events from getDetectedLeadEvents() and aggregate across those events before ranking.
• Each hook should for example accept goalType and primaryEvent (single string or array of strings)

Aggregator hook

• Add assets/js/modules/analytics-4/components/site-goals/goal-drivers/hooks/useGoalDriversData.js to compose per-driver outputs and merge with catalog metadata.
  • It should accept goalType, primaryEvent and selectedDriverIDs
• Call driver hooks (useTopTrafficChannelsGoalDriverData, etc) explicitly in fixed order Eq const topTrafficChannels = useTopTrafficChannelsGoalDriverData( { goalType, primaryEvent } ), const topPages = ....
  • And then map resolved active IDs (getActiveGoalDriverIDs) to merged driver objects.
• Return: { drivers, loading, error, hasExpandableRows }, where loading is some(driver.loading), error is first/merged driver error, and hasExpandableRows is some(driver.totalRows > 3).

Goal driver widgets

• In assets/js/modules/analytics-4/components/site-goals/goal-drivers/, add the three driver components using {name}GoalDriver naming:
  • TopTrafficChannelsGoalDriver
  • TopPagesGoalDriver
  • VisitorTypeGoalDriver
  • Each component should follow the MetricTileTable style/pattern and receive normalized rows + loading/error + row limit via props (presentational-focused).
  • Design should match referenced Figma (in AC)
• Ensure loading/error behavior follows Site Goals conventions from:
  • Keep Goal Drivers in loading state until required reports resolve.
  • Surface report errors in the section/tiles using existing widget patterns.
  • If widget-level eligibility fails, continue returning WidgetNull.

Widgets integration

• OnlineStorePerformanceWidget should pass goalType: 'ecommerce', primaryEvent, and hardcoded selectedDriverIDs (like ['topTrafficChannels', 'TopPages'], 'VisitorType') to useGoalDriversData, then render GoalDriversSection.
• LeadGenerationPerformanceWidget should pass goalType: 'lead', leadEvents, and same selectedDriverIDs to useGoalDriversData, then render GoalDriversSection.

Test Coverage

• Add tests for GoalDriversSection: one-row 3-tile render, default 3 rows, expand to 6 on Show more, and visibility rule for Show more.
• Add tests for getActiveGoalDriverIDs: default fallback, selected IDs ordering, and unknown ID filtering.
• Add tests for useGoalDriversData: explicit hook composition, merged loading/error, active driver filtering, and hasExpandableRows.
• Add tests for driver hooks: ecommerce primary-event filtering, lead multi-event aggregation, etc.

QA Brief

• Check the storybook for Site Goal section and individual goal drivers
• Set up Site Kit with siteGoals feature flag enabled
• Connect a site with ecommerce or leads conversion events, and verify that goal drivers section is showing in site goals widget(s)
  • You can reach out to Darren (@wpdarren) for a website with some conversion data, he started collecting it previously

Changelog entry

• Add "Goal drivers" to the Site Goals section of the dashboard