Feature Description

When the Site Goals widgets are first rendered in their "Aggregated" state (i.e. the googlesitekit_event_provider and googlesitekit_form_id custom dimensions have not yet been created for the Analytics property), and after the Introductory Modal CTA has been dismissed, a "New" notice CTA should be displayed within each applicable widget to encourage the user to enable the custom dimension breakdown.

Enabling the breakdown allows Site Kit to track event data by plugin source (googlesitekit_event_provider) and by form ID (googlesitekit_form_id), unlocking the tabbed/grouped views in both Site Goals widgets. The notice should use the existing Notice component infrastructure (assets/js/components/Notice/index.js). See Figma mocks and the Design Doc for full context.

Acceptance criteria

• Once the Introductory Modal CTA has been dismissed and a Site Goals widget is in the Aggregated state (custom dimensions not yet created), a "New" notice CTA should be rendered within each applicable widget (and selection panel), independently:
  • The notice in the Online store performance widget should be relevant to e-commerce event breakdown (by plugin source) - Figma mock
  • The notice in the Lead generation performance widget should be relevant to lead form breakdown (by form ID). - Figma mock
• The notice should not appear if the custom dimensions googlesitekit_event_provider and googlesitekit_form_id have already been created for the Analytics property.
• The notice should not appear before the Introductory Modal CTA has been dismissed.
• The primary CTA on the notice ("Enable" or equivalent) should trigger the breakdown setup flow (OAuth + custom dimension creation), which will be handled in a subsequent issue.
• Clicking "No thanks" should dismiss the notice. Upon dismissal, an admin menu tooltip should be displayed pointing the user to Analytics Settings, where custom dimensions can be enabled later.
• Dismissing the notice in a widget should also dismiss it in the Site Goals Side Panel (if rendered), and vice versa — dismissal state should be shared.
  • Once dismissed a tooltip should be shown pointing it to the user that breakdown can be set from settings at any time. When dismissed from selection panel, dismiss tooltip should be shown after panel has been closed.
  • FIgma for the toltip
• The notice component should reuse the existing Notice component (assets/js/components/Notice/index.js).

Implementation Brief

• Define a shared dismissed item slug constant (e.g. SITE_GOALS_BREAKDOWN_NOTICE) in assets/js/modules/analytics-4/components/site-goals/constants.ts

  • This single slug is used by both widgets and the Side Panel, ensuring shared dismissal state per the ACs

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

  • Accept title, description, and CTA label props from the parent
  • Accept an optional onDismissComplete callback prop for controlling post-dismiss behavior (tooltip timing)
  • Use the Notice component with type set to NOTICE_TYPES.NEW
  • Visibility conditions (all must be met to render the notice):
    • isItemDismissed( SITE_GOALS_INTRO_MODAL_BANNER ) from CORE_USER must be true - the intro modal has been dismissed
    • hasCustomDimensions( [ 'googlesitekit_event_provider', 'googlesitekit_form_id' ] ) from MODULES_ANALYTICS_4 must be false — the breakdown dimensions have not yet been created
    • isItemDismissed( SITE_GOALS_BREAKDOWN_NOTICE ) from CORE_USER must be false - the notice itself has not been dismissed
    • If any of these selectors returns undefined (still loading), return null to avoid flash
  • Primary CTA ("Get breakdown" per the Figma): currently leave as a TODO with a note that it will be implemented in Trigger custom dimension creation from Site Goals breakdown notice with success and error states #12801
  • Dismiss CTA ("No thanks"):
    • Use the dismissButton prop of Notice
    • On click: call CORE_USER.dismissItem( SITE_GOALS_BREAKDOWN_NOTICE ) to persist dismissal, then invoke the onDismissComplete callback if provided

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

  • Render the notice after the "Key action" TilesGroup and before the "How are your visitors engaging?" section. Pass ecommerce-specific title and description per the Figma
  • On dismiss, immediately show the admin menu tooltip via useShowTooltip with content per the Figma ("You can always enable breakdown from settings later") and a dismiss label ("Got it"). Follow the same tooltip settings pattern as ConsentModeSetupCTABanner

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

  • Same placement and tooltip behavior as OnlineStorePerformanceWidget, with lead-specific content

• Integrate BreakdownNotice into assets/js/modules/analytics-4/components/site-goals/selection-panel/PanelContent.tsx

  • Render a BreakdownNotice above each GoalTypeSection - one above the ecommerce section with ecommerce-specific copy, one above the lead section with lead-specific copy. Each renders independently based on whether that goal type is active
  • Pass panel-specific styling classes (same approach as CustomDimensionsNotice using SelectionPanelNotice classes) via the className prop
  • On dismiss, do not show the tooltip immediately - instead set a pending tooltip flag (e.g. via a new action/selector pair in GA4 datastore value) that the panel parent reads on close. Since both notices share the SITE_GOALS_BREAKDOWN_NOTICE slug, dismissing either one dismisses both

• Update assets/js/modules/analytics-4/components/site-goals/selection-panel/index.tsx to handle the deferred tooltip on panel close

  • Track the pending tooltip flag set by the notice's dismiss handler
  • In the closePanel callback or via an effect watching isOpen transitioning to false, check the flag. If set, call useShowTooltip with the same tooltip settings (content, dismiss label) and clear the flag
  • This ensures the tooltip only appears once the side panel overlay is closed and the admin menu is visible

• Update the site-goals feature tour step in assets/js/modules/analytics-4/components/site-goals/feature-tours/site-goals.ts that currently targets .googlesitekit-site-goals-primary-action as a placeholder

  • Replace the target with the actual BreakdownNotice CSS class selector (e.g. the class applied to the notice container)
  • Remove the TODO comment referencing Show 'New' notice CTA in Site Goals widgets to enable custom dimension breakdown #12800

Test Coverage

• Add component tests for BreakdownNotice:

  • Renders when intro modal is dismissed and custom dimensions do not exist and notice is not dismissed
  • Does not render when custom dimensions already exist
  • Does not render when intro modal has not been dismissed
  • Does not render when notice itself has been dismissed
  • Dismiss click calls dismissItem with the correct slug and invokes onDismissComplete
  • Renders correct copy for ecommerce variant
  • Renders correct copy for lead variant

• Update assets/js/modules/analytics-4/components/site-goals/widgets/OnlineStorePerformanceWidget.test.tsx and LeadGenerationPerformanceWidget.test.tsx:

  • Notice renders in the correct position under the right conditions
  • Dismiss shows the admin menu tooltip immediately

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

  • BreakdownNotice renders above each goal type section when conditions are met
  • Only ecommerce notice renders when only ecommerce goal type is active, only lead when only lead is active
  • Dismissing either notice dismisses both (shared slug)

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

  • Dismiss from panel does not show tooltip while panel is open
  • After panel closes, tooltip is shown
  • Dismissal from panel also hides the notice in the widgets (shared slug)

• Add/update Storybook stories for both widgets and the selection panel showing the notice in the aggregated state

QA Brief

• Setup SK with siteGoals feature flag.
• Verify that there is a new notice matching FIgma in the site goals widgets and side panel
• When notice is dismissed in one place, it should be dismissed from all places, and tooltip should show
  • When notice is dismissed from side panel, tooltip should show after the panel is closed
• View only users should not see notice
• Intro moda Implement Site Goals new feature modal CTA #12424 should highlight new notice when present - when dismissed/not present modal should not have that step

Changelog entry

• Add custom dimension breakdown notice message to Site Goals widgets/side panel settings.