Feature Description

Once the custom dimensions required for Site Goals breakdown have been successfully created (via the flow implemented in #12801), both the e-commerce and lead generation Site Goals widgets should transition to a "Gathering data" state. In this state, a "Gathering data" badge is rendered within each widget to indicate that Analytics is now tracking the new custom dimensions (googlesitekit_event_provider and googlesitekit_form_id), but insufficient event data tagged with these dimensions has been collected yet to display the breakdown view.

This state applies to both the widget and the Site Goals Side Panel. It persists until enough data has accumulated to transition to either the Partial data or full tabbed breakdown state. See Figma mocks and Design Doc for the exact badge treatment and transition thresholds.

Acceptance criteria

• If the googlesitekit_event_provider and googlesitekit_form_id have been created, but there is no value for any of these custom dimensions within the report data for the widgets, then the widgets (e-commerce and / or lead generation) should render a "Gathering data" badge.
• The "Gathering data" state is also reflected in the Site Goals Side Panel.

Implementation Brief

• Create a GatheringBreakdownDataBadge component under assets/js/modules/analytics-4/components/site-goals/components/

  • Use the existing BadgeWithTooltip component (or Badge with a tooltip) with a label prop using a "Gathering data" as default label if label is not passed, and an info icon, matching the Figma styling
    • Note that text differ between widget area badge and side panel badge, we are using shorter label as default which will go in side panel, and will be overriding it with longer label for widget
  • Visibility conditions:
    • hasCustomDimensions( [ 'googlesitekit_event_provider', 'googlesitekit_form_id' ] ) from MODULES_ANALYTICS_4 must be true - the dimensions have been created
    • areCustomDimensionsGatheringData( [ 'googlesitekit_event_provider', 'googlesitekit_form_id' ] ) from MODULES_ANALYTICS_4 must be true - no event data tagged with these dimensions has been collected yet
    • If either selector returns undefined (still resolving), return null
  • When dimensions exist and are no longer gathering data, render nothing — the widget transitions to the breakdown view naturally

• Integrate GatheringBreakdownDataBadge into assets/js/modules/analytics-4/components/site-goals/widgets/LeadGenerationPerformanceWidget.tsx

  • Render the badge inline next to the widget header title ("Lead generation performance"), as shown in the Figma. Pass it via the headerContents prop and use "Gathering breakdown data" as label prop for the badge. You can wrap the current header title text string with span (using Typography component) and adjust the styling for the header to flex

• Integrate GatheringBreakdownDataBadge into assets/js/modules/analytics-4/components/site-goals/widgets/OnlineStorePerformanceWidget.tsx

  • Same header placement/adjustments as LeadGenerationPerformanceWidget

• Reflect the gathering data state in the Site Goals Side Panel

  • Render GatheringBreakdownDataBadge in assets/js/modules/analytics-4/components/site-goals/selection-panel/GoalTypeSection.tsx as a sibling next to the title, matching the Figma
    • Keep the default badge label, no need to override the prop

Test Coverage

• Add tests for GatheringBreakdownDataBadge:

  • Renders when both breakdown dimensions exist and are gathering data
  • Does not render when dimensions do not exist
  • Does not render when dimensions exist but are no longer gathering data
  • Returns null while gathering data state is still resolving

• Update LeadGenerationPerformanceWidget.test.tsx and OnlineStorePerformanceWidget.test.tsx:

  • Badge renders in the widget header when dimensions are gathering data
  • Badge does not render when dimensions have data available
  • Badge can coexist with the success notice from Trigger custom dimension creation from Site Goals breakdown notice with success and error states #12801

• Add/update tests for assets/js/modules/analytics-4/components/site-goals/selection-panel/index.test.tsx:

  • Badge renders in the panel when dimensions are gathering data

• Update Stories to include scenario with gathering data

QA Brief

• Following on the implementation from Trigger custom dimension creation from Site Goals breakdown notice with success and error states #12801, trigger the "Get breakdown" CTA - verify that gathering data badge is showing in both widgets, and side panel after custom dimensions are successfully created (and present in GA4 property - showing every time dashboard is visited/reloaded)
• Verify that after deleting one or both site goals custom dimensions from GA4 property, and logging out/in (to clear the cache) - gathering data badge stops showing

Changelog entry

• Add "Gathering data" badges to Site Goals widgets.