Enhancement/12801 trigger custom dimension

assets/js/googlesitekit/datastore/site/info.js

@@ -196,6 +196,7 @@ export const reducer = createReducer( ( state, { payload, type } ) => {
 				isMultisite,
 				hasActiveLeadEventProviders,
 				hasActiveEcommerceEventProviders,
+				hasMultipleActiveEcommerceEventProviders,
 			} = payload.siteInfo;
 
 			state.siteInfo = {
@@ -234,6 +235,7 @@ export const reducer = createReducer( ( state, { payload, type } ) => {
 				isMultisite,
 				hasActiveLeadEventProviders,
 				hasActiveEcommerceEventProviders,
+				hasMultipleActiveEcommerceEventProviders,
 			};
 			break;
 
@@ -325,6 +327,7 @@ export const resolvers = {
 			isMultisite,
 			hasActiveLeadEventProviders,
 			hasActiveEcommerceEventProviders,
+			hasMultipleActiveEcommerceEventProviders,
 		} = global._googlesitekitBaseData;
 
 		const {
@@ -370,6 +373,7 @@ export const resolvers = {
 			isMultisite,
 			hasActiveLeadEventProviders,
 			hasActiveEcommerceEventProviders,
+			hasMultipleActiveEcommerceEventProviders,
 		} );
 	},
 };
@@ -1018,6 +1022,18 @@ export const selectors = {
 	hasActiveEcommerceEventProviders: getSiteInfoProperty(
 		'hasActiveEcommerceEventProviders'
 	),
+
+	/**
+	 * Checks if more than one ecommerce event provider plugin is active.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @return {boolean|undefined} `true` if multiple ecommerce event providers are active; `false` if not. Returns `undefined` if not yet loaded.
+	 */
+	hasMultipleActiveEcommerceEventProviders: getSiteInfoProperty(
+		'hasMultipleActiveEcommerceEventProviders'
+	),
 };
 
 export default {

assets/js/googlesitekit/datastore/site/info.test.js

@@ -53,6 +53,7 @@ describe( 'core/site site info', () => {
 		isMultisite: false,
 		hasActiveLeadEventProviders: false,
 		hasActiveEcommerceEventProviders: false,
+		hasMultipleActiveEcommerceEventProviders: false,
 	};
 	const entityInfoVar = '_googlesitekitEntityData';
 	const entityInfo = {
@@ -490,6 +491,10 @@ describe( 'core/site site info', () => {
 				'hasActiveEcommerceEventProviders',
 				'hasActiveEcommerceEventProviders',
 			],
+			[
+				'hasMultipleActiveEcommerceEventProviders',
+				'hasMultipleActiveEcommerceEventProviders',
+			],
 		] )( '%s', ( selector, infoKey ) => {
 			it( 'uses a resolver to load site info then returns the info when this specific selector is used', async () => {
 				global[ baseInfoVar ] = baseInfo;

assets/js/modules/analytics-4/components/site-goals/constants.ts

@@ -35,10 +35,28 @@ export const SITE_GOALS_MAX_SELECTED_DRIVERS = 6;
 
 export const SITE_GOALS_BREAKDOWN_NOTICE = 'site_goals_breakdown_notice';
 
-export const SITE_GOALS_BREAKDOWN_CUSTOM_DIMENSIONS = [
-	'googlesitekit_event_provider',
-	'googlesitekit_form_id',
-];
+export const SITE_GOALS_BREAKDOWN_CUSTOM_DIMENSION_BY_GOAL_TYPE: Record<
+	string,
+	string
+> = {
+	[ GOAL_TYPES.ECOMMERCE ]: 'googlesitekit_event_provider',
+	[ GOAL_TYPES.LEAD ]: 'googlesitekit_form_id',
+};
+
+export const SITE_GOALS_BREAKDOWN_CUSTOM_DIMENSIONS = Object.values(
+	SITE_GOALS_BREAKDOWN_CUSTOM_DIMENSION_BY_GOAL_TYPE
+);
+
+export const SITE_GOALS_BREAKDOWN_NOTIFICATION = 'site_goals_breakdown';
+
+export const BREAKDOWN_ORIGIN_WIDGET = 'widget';
+export const BREAKDOWN_ORIGIN_PANEL = 'panel';
+
+export const BREAKDOWN_ORIGIN_FORM_KEY = 'breakdownOrigin';
+export const BREAKDOWN_SCOPE_FORM_KEY = 'breakdownScope';
+export const BREAKDOWN_DISMISSED_FORM_KEY = 'breakdownDismissed';
+
+export const BREAKDOWN_SCOPE_BOTH = 'both';
 
 export const SITE_GOALS_DEFAULT_SELECTED_DRIVERS = {
 	[ GOAL_TYPES.ECOMMERCE ]: [

assets/js/modules/analytics-4/components/site-goals/goal-drivers/types.ts

@@ -29,6 +29,8 @@ import { GOAL_DRIVER_IDS, GOAL_TYPES } from './constants';
 export type GoalDriverID =
 	typeof GOAL_DRIVER_IDS[ keyof typeof GOAL_DRIVER_IDS ];
 export type GoalType = typeof GOAL_TYPES[ keyof typeof GOAL_TYPES ];
+
+export type BreakdownScope = GoalType | 'both';
 export type GoalDriverSelectionState = Record< GoalType, GoalDriverID[] >;
 
 export interface GoalDriverRow {

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

@@ -0,0 +1,88 @@
+/**
+ * Site Goals BreakdownErrorNotice stories.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { WPDataRegistry } from '@wordpress/data/build-types/registry';
+
+/**
+ * Internal dependencies
+ */
+import { Story } from '@/js/types/Story';
+import { provideSiteInfo } from '@tests/js/utils';
+import WithRegistrySetup from '@tests/js/WithRegistrySetup';
+import BreakdownErrorNotice from './BreakdownErrorNotice';
+
+const GENERIC_ERROR = {
+	code: 'internal_server_error',
+	message: 'Internal server error',
+	data: { status: 500 },
+};
+
+const PERMISSIONS_ERROR = {
+	code: 'insufficient_permissions',
+	message: 'Insufficient permissions',
+	data: { status: 403, reason: 'insufficientPermissions' },
+};
+
+interface BreakdownErrorNoticeStoryProps {
+	error: typeof GENERIC_ERROR;
+	permissionsTitle: string;
+}
+
+function Template( {
+	error,
+	permissionsTitle,
+}: BreakdownErrorNoticeStoryProps ) {
+	return (
+		<WithRegistrySetup
+			func={ ( registry: WPDataRegistry ) => provideSiteInfo( registry ) }
+		>
+			<BreakdownErrorNotice
+				error={ error }
+				permissionsTitle={ permissionsTitle }
+				onRetry={ () => {} }
+				onDismiss={ () => {} }
+			/>
+		</WithRegistrySetup>
+	);
+}
+
+export const Generic = Template.bind(
+	{}
+) as Story< BreakdownErrorNoticeStoryProps >;
+Generic.storyName = 'Generic';
+Generic.args = {
+	error: GENERIC_ERROR,
+	permissionsTitle: 'Individual form tracking setup failed',
+};
+
+export const Permissions = Template.bind(
+	{}
+) as Story< BreakdownErrorNoticeStoryProps >;
+Permissions.storyName = 'Insufficient permissions';
+Permissions.args = {
+	error: PERMISSIONS_ERROR,
+	permissionsTitle: 'Individual form tracking setup failed',
+};
+
+export default {
+	title: 'Modules/Analytics4/Components/Site Goals/Notifications/BreakdownErrorNotice',
+	component: BreakdownErrorNotice,
+};

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

@@ -0,0 +1,106 @@
+/**
+ * Site Goals BreakdownErrorNotice tests.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { WPDataRegistry } from '@wordpress/data/build-types/registry';
+
+/**
+ * Internal dependencies
+ */
+import { fireEvent, render } from '@tests/js/test-utils';
+import { createTestRegistry, provideSiteInfo } from '@tests/js/utils';
+import BreakdownErrorNotice from './BreakdownErrorNotice';
+
+describe( 'BreakdownErrorNotice', () => {
+	let registry: WPDataRegistry;
+
+	const genericError = {
+		code: 'internal_server_error',
+		message: 'Internal server error',
+		data: { status: 500 },
+	};
+	const permissionsError = {
+		code: 'insufficient_permissions',
+		message: 'Insufficient permissions',
+		data: { status: 403, reason: 'insufficientPermissions' },
+	};
+
+	beforeEach( () => {
+		registry = createTestRegistry();
+		provideSiteInfo( registry );
+	} );
+
+	it( 'renders the generic error variant with a retry CTA and troubleshooting link', () => {
+		const { getByRole, getByText } = render(
+			<BreakdownErrorNotice
+				error={ genericError }
+				permissionsTitle="Individual form tracking setup failed"
+				onRetry={ () => {} }
+				onDismiss={ () => {} }
+			/>,
+			{ registry }
+		);
+
+		expect( getByText( /Analytics update failed/ ) ).toBeInTheDocument();
+		expect( getByRole( 'button', { name: 'Retry' } ) ).toBeInTheDocument();
+		expect( getByText( 'Got it' ) ).toBeInTheDocument();
+		expect(
+			getByRole( 'link', { name: /Learn more/ } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'renders the permissions error variant with the parent-supplied title', () => {
+		const { getByText } = render(
+			<BreakdownErrorNotice
+				error={ permissionsError }
+				permissionsTitle="Individual form tracking setup failed"
+				onRetry={ () => {} }
+				onDismiss={ () => {} }
+			/>,
+			{ registry }
+		);
+
+		expect(
+			getByText( /Individual form tracking setup failed/ )
+		).toBeInTheDocument();
+		expect( getByText( /insufficient permissions/ ) ).toBeInTheDocument();
+	} );
+
+	it( 'invokes onRetry and onDismiss from their respective buttons', () => {
+		const onRetry = jest.fn();
+		const onDismiss = jest.fn();
+
+		const { getByRole, getByText } = render(
+			<BreakdownErrorNotice
+				error={ genericError }
+				permissionsTitle="Setup failed"
+				onRetry={ onRetry }
+				onDismiss={ onDismiss }
+			/>,
+			{ registry }
+		);
+
+		fireEvent.click( getByRole( 'button', { name: 'Retry' } ) );
+		fireEvent.click( getByText( 'Got it' ) );
+
+		expect( onRetry ).toHaveBeenCalledTimes( 1 );
+		expect( onDismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );