Integrate First-Party Mode Toggle into Analytics Settings Form

[hussain-t]

Feature Description

Add the <FirstPartyModeToggle /> component to the Analytics settings forms, enabling existing users to opt into First-party mode. The toggle will default to "off" and can be enabled if desired.

If either the FPFE health check or script access check fails, the toggle will be disabled and grayed out, displaying an error message instructing users that additional server configuration is needed to enable First-Party Mode.

For details, refer to the Design Doc.

---

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

Acceptance criteria

• The First-Party Mode Toggle component should be integrated into the Analytics module’s settings form.
• The toggle should allow users to enable or disable First-party mode.
• The toggle should default to “off” for existing users.
• If either the FPFE health check or script access check fails, the toggle should be disabled (implemented in Implement First-Party Mode Toggle Component with Error Handling and Synchronization Across Modules #9649).
• Changes made to the toggle state (on/off) should save the First-party mode settings in the datastore and persist them on the server.
• If the toggle is enabled via the settings form, the First-party mode setup banner should be dismissed (implemented in Dismiss the First-Party Mode Setup Banner Notification When Toggle Is Enabled from Settings Screen #9698).
• The component’s styling and placement should align with the specifications in the Figma design.
• UI/UX for grouping the measurement toggles will be implemented in Group Measurement Toggles Together on Settings Screen #9651.

Implementation Brief

• Update assets/js/modules/analytics-4/components/settings/SettingsForm.js, import and render the new FirstPartyModeToggle if the firstPartyMode feature flag is enabled.
• Update assets/js/modules/analytics-4/datastore/settings.js:
  • Within the saveSettings function, check if the first party mode settings has changed using the haveFirstPartyModeSettingsChanged selector, if so dispatch saveFirstPartyModeSettings, returning an error if there is one, similar to how the conversion tracking setting is saved:
    

    site-kit-wp/assets/js/modules/analytics-4/datastore/settings.js

    Lines 182 to 192 in 44e0928

    	const haveConversionTrackingSettingsChanged =
    	select( CORE_SITE ).haveConversionTrackingSettingsChanged();
    	if ( haveConversionTrackingSettingsChanged ) {
    	const { error } = await dispatch(
    	CORE_SITE
    	).saveConversionTrackingSettings();
    	if ( error ) {
    	return { error };
    	}
    	}

  • Within the rollbackChanges function, within the haveSettingsChanged check block, dispatch the action resetFirstPartyModeSettings.
    

    site-kit-wp/assets/js/modules/analytics-4/datastore/settings.js

    Line 242 in 44e0928

    dispatch( CORE_SITE ).resetConversionTrackingSettings();

Test Coverage

• Add new tests in assets/js/modules/analytics-4/datastore/settings.test.js to confirm the first-party mode setting is saved and rolled back.

QA Brief

1. Activate Site Kit with the firstPartyMode feature flag enabled and ensure that the Analytics module is active and connected.
2. Navigate to Site Kit > Settings > Analytics and click the Edit link. Verify that the First-party mode toggle is displayed.
3. Change the toggle state:
   • Confirm that the submit button text changes from Save to Confirm changes.
4. Save the changes:
   • Verify that the new toggle state is persisted after saving.
   • Refresh the settings page to ensure the toggle retains its updated state.
5. Cancel changes:
   • Change the toggle state and click Cancel.
   • Verify that the toggle reverts to its previous state when reopening the settings edit screen by clicking the Edit link.

Note: If your test site fails either of the health checks, you can force local settings to test the toggle functionality using the following action in the console:

googlesitekit.data.dispatch( 'core/site' )
    .receiveGetFirstPartyModeSettings( {
        isEnabled: true,
        isFPMHealthy: true,
        isScriptAccessEnabled: true,
    } );

Changelog entry

• Integrate the First-party mode toggle into the Analytics module’s settings form, allowing users to enable or disable First-party mode.

[techanvil]

Hey @hussain-t, this comment applies to these AC too: #9655 (comment).

Update: see also #9655 (comment).

[hussain-t]

Thanks, @techanvil. I've removed specifying the component name, back to you.

[techanvil]

Thanks @hussain-t!

AC ✅

[benbowler]

@hussain-t I've picked this up for IB as I'm back in squad M next week. Working through this however, I found an issue with rolling back the settings if the user cancels changes in the settings form. Because FPM uses a fetch store instead of a settings store, it doesn't implement rollback and we don't know if the user changed the setting or not.

What do you think about switching the FPM store for the isEnabled setting to be a settings store rather than a fetch store? Do you see issues with this?

site-kit-wp/assets/js/googlesitekit/datastore/site/first-party-mode.js

Lines 46 to 53 in 63ca619

	const fetchGetFirstPartyModeSettingsStore = createFetchStore( {
	baseName: 'getFirstPartyModeSettings',
	controlCallback: () =>
	API.get( 'core', 'site', 'fpm-settings', undefined, {
	useCache: false,
	} ),
	reducerCallback: settingsReducerCallback,
	} );

[hussain-t]

Hi @benbowler, the reset and rollback changes are being implemented in #9688. Let me know if that helps. Thanks!

Update: It should work similarly to the conversion tracking settings.

[hussain-t]

Update assets/js/components/settings/SettingsActiveModule/Footer.js, after the following line, check if slug is either analytics-4 or ads, if so dispatch the saveFirstPartyModeSettings action to save the FPM setting.

@benbowler, we should call the saveFirstPartyModeSettings action within the Analytics saveSettings similar to the conversion tracking saveConversionTrackingSettings.

[techanvil]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• The First-Party Mode Toggle component is integrated into the Analytics module’s settings form.
  • The toggle allows users to enable or disable First-party mode.
  • The toggle is default to off for existing users.
  • If either the FPFE health check or script access check fails, the toggle is disabled and a notification appears.
  • Changes made to the toggle state (on/off) are saved on the First-party mode settings in the datastore and persist them on the server.
  • If the toggle is enabled via the settings form, the First-party mode setup banner is dismissed.
• The component’s styling and placement align with the specifications in the Figma design.

Screenshots