Feature Description

When a user clicks the primary "Enable" CTA on the "New" notice in a Site Goals widget (implemented in #12800), the existing Site Kit infrastructure for creating custom dimensions should be triggered. This will conditionally initiate an OAuth flow (if property edit permissions have not previously been granted) and then use the existing create-custom-dimension and sync-custom-dimensions routes to create all custom dimensions required by Site Kit — not just the two new ones introduced for Site Goals.

Depending on the outcome of the creation attempt, either a success or error notice should be rendered in place of the "New" notice within the widget. The same flow and result notices should also apply when triggered from the Site Goals Side Panel. See Figma mocks and the Design Doc for full context.

Acceptance criteria

• When the user clicks the primary CTA on the "New" notice (in either a Site Goals widget or the Site Goals Side Panel):
  • If the Analytics property edit scope has not been granted, the OAuth flow should be initiated first.
  • Once permissions are confirmed, all Site Kit custom dimensions should be created using existing infrastructure - not only the Site Goals-specific ones.
• On success:
  • A success notice replaces the "New" notice only where the CTA was triggered (widget or side panel). The other location should render neither the "New" nor the success notice. (Figma – Lead, Figma – Ecommerce). Also for in side panel notice
• On error:
  • An error notice replaces the "New" notice in both locations (widget and side panel) with a retry option.
  • Two error variants: a generic creation failure error and a permissions-specific error with adapted wording.
  • Figma for error notice
• Notices are not persisted — they are in-session only:
  • On page reload after an error, the "New" notice reappears so the user can retry (creating only any still-missing dimensions).
  • On page reload after success, no notice renders — the widget displays normally.
• All notices should use the existing Notice component (assets/js/components/Notice/index.js)
• Existing "New" notice for store performance widget should have two variants:
  • If only one (Woo or EDD) ecommerce plugin is detected it should show copy per this Figma design
  • And if both ecommerce plugins are detected - then this copy variation

Implementation Brief

• Add assets/js/modules/analytics-4/hooks/useBreakdownEnableHandler.js

  • Shared hook used by both the widget notice and the side panel notice
  • Accepts an origin parameter ('widget' or 'panel') and returns the handler function plus loading/disabled state
  • On invocation, set FORM_CUSTOM_DIMENSIONS_CREATE with customDimensions containing all keys and breakdownOrigin set to the origin value
  • If the Analytics edit scope is not granted: also set autoSubmit: true, call snapshotAllStores, then trigger setPermissionScopeError with EDIT_SCOPE and a redirectURL containing notification=site_goals_breakdown. Follow the same pattern as CustomDimensionsNotice.tsx onSetupClick
  • If the scope is already granted: call createCustomDimensions directly with all dimensions. On completion, set breakdownCreationComplete: true in FORM_CUSTOM_DIMENSIONS_CREATE

• Add assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownSuccessNotice.tsx

  • Use the existing Notice component with NOTICE_TYPES.SUCCESS
  • Accept props for widget-specific copy (lead generation vs ecommerce), matching the Figma
  • No dismiss button needed — notice disappears naturally on page reload since it is in-session only

• Add assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownErrorNotice.tsx

  • Use the existing Notice component with NOTICE_TYPES.ERROR
  • Accept an onRetry prop for the retry CTA button and an error prop
  • Handle two variants, distinguished via isInsufficientPermissionsError on the error object:
    • Generic error: title along the lines of "Analytics update failed" (consistent with AnalyticsUpdateError), description along the lines of "There was a problem updating your Analytics property", with a "Retry" CTA and a troubleshooting link via getErrorTroubleshootingLinkURL
    • Permissions error: apply the content from Figma

• Add assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownNoticeArea.tsx

  • Orchestrator component that accepts an origin prop ('widget' or 'panel') and decides which single notice to render, or none
  • Reads hasCustomDimensions for all keys in CUSTOM_DIMENSION_DEFINITIONS from MODULES_ANALYTICS_4
  • Reads in-session creation state from MODULES_ANALYTICS_4: isCreatingCustomDimension for each dimension, isSyncingAvailableCustomDimensions, and getCreateCustomDimensionError for each dimension
  • Reads breakdownOrigin and breakdownCreationComplete from FORM_CUSTOM_DIMENSIONS_CREATE
  • Calls useBreakdownEnableHandler with the origin and passes the handler/loading state to the relevant notice
  • Rendering logic (first matching rule wins):
    • Error notice: when any getCreateCustomDimensionError returns an error - render BreakdownErrorNotice in both widget and panel regardless of origin
    • Loading state: when creation is in progress - render the "New" notice (from Show 'New' notice CTA in Site Goals widgets to enable custom dimension breakdown #12800) with the CTA in a loading/disabled state
    • Success notice: when breakdownCreationComplete is true, no creation errors exist, and breakdownOrigin matches this component's origin prop - render BreakdownSuccessNotice
    • "New" notice with CTA: when not all dimensions exist, no creation is in progress, and no in-session error exists - render the BreakdownNotice from Show 'New' notice CTA in Site Goals widgets to enable custom dimension breakdown #12800 with its primary CTA wired to the enable handler
    • Nothing: when all dimensions already exist and no in-session creation just completed, or when success occurred but origin does not match

• Update assets/js/modules/analytics-4/hooks/useCreateCustomDimensionsEffect.js

  • After the existing createDimensionsAndUpdateForm completes, check if breakdownOrigin is set in FORM_CUSTOM_DIMENSIONS_CREATE. If so, set breakdownCreationComplete: true in the same form. This ensures the orchestrator can detect success after the OAuth return path

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

  • Render BreakdownNoticeArea with origin="widget" following the placement from Figma
  • Ensure it replaces (not stacks with) the "New" notice from Show 'New' notice CTA in Site Goals widgets to enable custom dimension breakdown #12800

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

  • Same placement and integration as LeadGenerationPerformanceWidget

• Integrate BreakdownNoticeArea with origin="panel" in the Site Goals selection panel

  • Render alongside the existing CustomDimensionsNotice in the panel

Test Coverage

• Add tests for assets/js/modules/analytics-4/hooks/useBreakdownEnableHandler.test.js:

  • Sets correct form values and triggers OAuth flow when edit scope is missing
  • Calls createCustomDimensions directly with all dimension keys when scope is present
  • Sets breakdownCreationComplete in form after direct creation completes
  • Sets correct breakdownOrigin value based on origin parameter

• Add tests for assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownSuccessNotice.test.tsx:

  • Renders with correct copy for lead generation variant
  • Renders with correct copy for ecommerce variant

• Add tests for assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownErrorNotice.test.tsx:

  • Renders generic error variant with retry CTA and troubleshooting link
  • Renders permissions error variant with permissions-specific copy
  • Retry CTA invokes the onRetry callback

• Add tests for assets/js/modules/analytics-4/components/site-goals/notifications/BreakdownNoticeArea.test.tsx:

  • Renders "New" notice when not all dimensions exist and no creation in progress
  • Renders loading state during dimension creation
  • Renders BreakdownSuccessNotice at origin location only after creation completes
  • Renders nothing at non-origin location on success
  • Renders BreakdownErrorNotice (generic) in both locations on creation failure
  • Renders BreakdownErrorNotice (permissions) in both locations on insufficient permissions error
  • On simulated page reload (form state cleared), renders "New" notice when dimensions missing, renders nothing when all dimensions exist
  • Partial creation: some dimensions fail, error notice shows; retry re-triggers handler

• Update assets/js/modules/analytics-4/hooks/useCreateCustomDimensionsEffect.test.js:

  • After creation completes with breakdownOrigin in form, breakdownCreationComplete is set to true

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

  • BreakdownNoticeArea renders in the correct position within the widget

• Add/update Storybook stories for BreakdownSuccessNotice, BreakdownErrorNotice, and BreakdownNoticeArea showing each state (new, loading, success, generic error, permissions error)

QA Brief

Key Setup Helpers

• Remove Analytics edit scope (to force OAuth path) without resetting the plugin — run in browser console:

  ( () => { const { select, dispatch } = googlesitekit.data; const S='https://www.googleapis.com/auth/analytics.edit'; const a=select('core/user').getAuthentication(); dispatch('core/user').receiveGetAuthentication({ ...a, grantedScopes:(a.grantedScopes||[]).filter(x=>x!==S) }); } )();

• Force a creation error: use a response-override extension (e.g. Tweak, Requestly) to intercept POST on */wp-json/google-site-kit/v1/modules/analytics-4/data/create-custom-dimension?.* and return:
  • Generic error: HTTP 500, body {"code":"internal_server_error","message":"x","data":{"status":500}}
  • Permissions error: HTTP 403, body {"code":"insufficient_permissions","message":"x","data":{"status":403,"reason":"insufficientPermissions"}}

"New" Copy Variants

• Online Store with both WooCommerce and Easy Digital Downloads active displays: "Using both WooCommerce and Easy Digital Downloads…"
• Only one of the two plugins active displays: "See exactly which plugins are driving your results…"

CTA — Direct Create (Edit Scope Granted)

• Click "Get breakdown" > CTA shows a spinner and is disabled (can't be re-clicked).
• On success > a single success notice appears only at the clicked location (origin + that goal type). E.g. clicking the Online Store widget shows success only there - not in the Lead widget, not in the panel.
• All missing Site Kit custom dimensions get created (not only the breakdown ones). You can verify them under analytics property > admin > custom definitions

CTA — OAuth Path (Edit Scope Removed via Snippet Above or on a fresh installataion or after SK reset)

• Click "Get breakdown" > notice stays visible in loading state (spinner, not disappearing) through the redirect.
• After granting access, the dashboard scrolls back to the Site Goals widget section.
• After return, creation runs and the success notice shows at the originating location.

Success Notice

• Title/body match the goal type (ecommerce vs lead) per Figma; "Got it" dismisses it.
• After "Got it", nothing reappears that session; on reload with dimensions present > nothing shows.

Error Notices (Use Response Override Above)

• Generic error displays: "Analytics update failed" + "Learn more" link + Retry + Got it.
• Permissions error displays: "Goal/Individual… setup failed" + insufficient-permissions copy + Retry + Got it.
• Error appears at every eligible section (whose dimension is still missing) in both widget and Side Panel.
• Retry re-runs creation (loading > success if the override is removed).
• "Got it" dismisses the error for the session; on reload the "New" notice reappears (creation truly failed > dimensions still missing).

Reload Semantics (State is In-Session Only)

• After an error + reload > "New" notice reappears.
• After success + reload > nothing (dimensions exist).

Out-of-Band Detection

• With a breakdown dimension created, delete it directly in GA4, then log out/in and go back to SK dashboard/Site Goals section or come back within ~a day the "New" notice reappears.
  • Note: Sync is not instant — runs at most once per day, so it will be cached and deleting custom dimensions does not reflect instantly to avoid too many API calls.

Widget - Side Panel Parity

• All of the above behaves consistently whether triggered from a widget or from the corresponding Side Panel section.
• Users with pre-existing custom dimensions (e.g. created via Key Metrics) but without the breakdown dimensions still see "New" notice.

Changelog entry

• Allow creation of custom Site Goals dimensions from notices.