Add support for enabling GA4 for UA-only Analytics users

Feature Description

In https://github.com/google/site-kit-wp/issues/3586 we changed the settings edit view to not show GA4 fields for sites which already had Analytics connected using classic UA Analytics which has been available in Site Kit since the very beginning. The GA4 fields were removed to not force users to set up GA4 just to make a change to the module settings.

In doing so, the experience for these users was diminished as there is no clear path to enable GA4 support if they want it without disconnecting and reconnecting the module.

Users who only have classic UA Analytics configured in Site Kit should have the option to enable support for GA4 from the settings edit view.

---

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

Acceptance criteria

• For sites which already have GA4 set up, the Analytics settings edit UI should be reorganized as in this Figma design, with the GA4 property dropdown and snippet toggle more clearly separated from the UA ones.
• For sites which don’t have GA4 set up yet, and if GA4 “works” (see isAdminAPIWorking), the Analytics settings edit UI should look like in this Figma design, with a disabled GA4 property dropdown. The toggle below should allow to “enable” the GA4 part of the UI, at which point the UI changes to the one in the above bullet point (e.g. the toggle turns into the snippet toggle).
  • In other words, it shouldn’t be possible to “disable” that UI again in the same screen. If you decide you don’t want to set up GA4, you can still cancel out or just leave the page.
  • Preferably, the GA4 dropdown should not have a value as long as it is disabled and only run its typical prepopulate logic once it is enabled.
  • The “Learn more” link should point to https://sitekit.withgoogle.com/documentation/ga4-analytics-property/.
  • Once the GA4 UI is enabled here, saving the settings should also require completing the GA4 configuration, i.e. it should run the typical validation logic for checking GA4 property ID and web data stream ID, including creation of a new web data stream if it doesn’t exist yet.

Implementation Brief

Analytics SettingsForm

• The fields should be reorganized in all cases to group UA fields and GA4 fields separately, divided by a horizontal rule
  • UA fields (account, property, view), with the snippet control moved onto the row below
  • line
  • GA4 fields (GA4 property), with the activation/snippet control(*) on the row below, just as with UA
  • line
  • remaining fields as today
• For the case where GA4 is not connected yet only:
  • The GA4 property select should be disabled and not populate its choices until enabled (see below)
    • To do this, create a placeholder version of the PropertySelect component which selects nothing and has no options (maybe one empty selected <Option> to keep the floating label in place on top)
  • Render an alternate Switch (toggled OFF) in place of the snippet control with the following label
    Activate Google Analytics 4 and place code on your site. Learn more (ext-arrow) with the learn more linking to the URL in the ACs
    • The switch should be disabled while isAdminAPIWorking !== true
    • The value should be controlled by a value in core/forms: enableGA4 (important to use this store so that the value is preserved via snapshotting if extra permissions are needed before changes can be submitted)
      • If Analytics settings are rolled-back (e.g. by cancelling settings edits, enableGA4 should be cleared/deleted)
    • Once toggled on (if enableGA4)
      • The above placeholder PropertySelect should be replaced with the real GA4 PropertySelect
      • The full GA4 settings behavior (as if setting up GA4 for the first time) should be enabled and the control to enable GA4 will be replaced by the normal GA4 useSnippet switch
• If GA4 is connected, everything should continue to work as today although the layout will remain different as above

Images

• Current settings form with GA4
• As designed [pre-GA4 enabled]
• As designed [post-GA4 enabled]

Analytics datastore

• The logic for the Analytics module’s canSubmitChanges should be updated to account for this to ensure that settings update validation
  • In the event GA4 was “activated” as above (even if subsequently the snippet was toggled “off” again), all normal GA4 validation and submitChanges functionality should run

Storybook

• Add a new story to assets/js/modules/analytics/components/settings/SettingsForm.stories.js to cover the above pre-GA4 activation state

Test Coverage

• Add/update coverage for Analytics submitChanges action and canSubmitChanges selector

QA Brief

• If you already have GA4 connected, then you need to remove GA4 settings from the database by running the following command:

  wp option delete googlesitekit_analytics-4_settings
  

• Once you delete the existing GA4 settings from the database, go to the Analytics module settings and edit it
• Verify that you see the disabled dropdown for the GA4 property when the settings form is loaded. The disabled dropdown should display a matching GA4 property pre-selected if the currently selected account has it. Otherwise, the dropdown should stay empty (nothing is selected).
• Activate the GA4 controls by clicking on the appropriate toggle beneath the disabled dropdown. It should activate the dropdown and automatically select the following values:
  • If the currently selected account has a matching GA4 property, it should be automatically selected.
  • If the account has GA4 properties, but no matching property - nothing should be selected and the user will have to manually select a property.
  • If the account has no GA4 properties, then an option to create a new GA4 property should be pre-selected.
• Also verify that if setting changes are canceled, the GA4 property dropdown should be re-disabled if the user clicks to edit settings again.

Changelog entry

• Add support for enabling GA4 for existing UA-only Analytics users.

[eugene-manuilov]

When you have GA4 properties but no matched property, the text is running into the dropdown arrow in the GA4 field.

@wpdarren this is expected behavior. We discussed it with @felixarntz and @aaemnnosttv in the original PR and decided to leave it as it is.

[aaemnnosttv]

@wpdarren ready for another pass 👍