Create new SetupFormGA4 component

[nfmohit]

Feature Description

The current Analytics SetupForm components prioritise UA inputs over GA4 inputs. To change this, the existing SetupFormGA4 component should be renamed, say SetupFormGA4Legacy. A new SetupForm component should be created, named SetupFormGA4. This component will be similar to the SetupFormGA4/SetupFormGA4Transitional components where the user will be required to choose an Analytics account and connect/create a GA4 property.

Using a UA property/view should be optional; showing the <Select> components for a UA property/view should only appear if they user already has existing UA properties/views available and enable them via a toggle:

Otherwise the UA selects should not appear.

If the chosen Analytics account has pre-existing UA properties, they will be displayed in a secondary pane in a deprioritised manner, where the user will be able to connect one optionally. Here is a exemplary screenshot for visual aid:

The existing analytics getSetupFlowMode() selector and the SetupForm component should be updated so that the Analytics module setup flow renders the new SetupFormGA4 component when the ga4Reporting feature flag is enabled.

Here is the relevant section in the one-pager. Here is the relevant change in our PoC.

---

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

Acceptance criteria

• The existing Analytics SetupFormGA4 component should be renamed to SetupFormGA4Legacy.
• A new SetupFormGA4 component should be created.
• In the first row, it should render the AccountSelect, GA4 PropertySelect, and GA4 WebDataStreamSelect.
• If the chosen account has pre-existing UA properties, it should render a new toggle that says Enable Universal Analytics (the old version of Analytics, which stops recording data after July 1, 2023) in the second row.
  • The toggle should be disabled by default.
  • If the toggle is enabled, UA PropertySelect, ProfileSelect, and SetupUseSnippetSwitch components should be rendered underneath, requiring users to select a UA property and profile.
  • If the toggle is disabled, selecting a UA property and profile should no longer be required, and any formerly selected UA property and profile should be cleared from the settings.
  • This entire section including the Enable Universal Analytics toggle and the associated UA PropertySelect, ProfileSelect, and SetupUseSnippetSwitch components should be contained in a new wrapping component, so that it can be reused inside Analytics SettingsEdit (in Update Analytics SettingsEdit and SettingsView to work without UA #6744).
• The analytics getSetupFlowMode() selector should be updated to indicate the usage of the new SetupFormGA4 component if the ga4Reporting feature flag is enabled.
• Sites going through this setup flow should be automatically switched to the GA4 dashboard view.

Implementation Brief

• In assets/js/modules/analytics/datastore/constants.js, add a new constant SETUP_FLOW_MODE_GA4_LEGACY with the value ga4-legacy.
• In assets/js/modules/analytics/datastore/setup-flow.js, modify the getSetupFlowMode selector with the following:
  • Return SETUP_FLOW_MODE_GA4 if the ga4Reporting feature flag is enabled using the isFeatureEnabled function.
  • The existing condition uaProperties.length === 0, that returns SETUP_FLOW_MODE_GA4 should be replaced to return SETUP_FLOW_MODE_GA4_LEGACY.
• Rename assets/js/modules/analytics/components/setup/SetupFormGA4.js to SetupFormGA4Legacy.js.
• Create a new EnableUniversalAnalytics component in the assets/js/modules/analytics/components/common directory with the following:
  • Check if the chosen account has pre-existing UA properties using the getProperties selector of the analytics datastore and pass the UA accountID to it.
  • If there are pre-existing UA properties, render the UseSnippetSwitch component with the description prop set to Enable Universal Analytics (the old version of Analytics, which stops recording data after July 1, 2023).
  • If the UseSnippetSwitch is enabled, render the UA PropertySelect, ProfileSelect, and SetupUseSnippetSwitch components underneath as children within the GA4PropertyNotice component.
  • The notice prop of the GA4PropertyNotice component should be You may also connect a Universal Analytics property that’s associated with this Google Analytics 4 property..
• Create a new SetupFormGA4 component in the same directory that mirrors the SetupFormGA4Legacy component, but with the following changes:
  • Render the AccountSelect, GA4 PropertySelect, and GA4 WebDataStreamSelect components in the first row.
  • Render the new EnableUniversalAnalytics component in the second row.
• In assets/js/modules/analytics/components/setup/SetupForm.js, update the following:
  • If the setupFlowMode is SETUP_FLOW_MODE_GA4, render the SetupFormGA4 component as before.
  • If the setupFlowMode is SETUP_FLOW_MODE_GA4_LEGACY, render the SetupFormGA4Legacy component.
• In assets/js/modules/analytics/datastore/settings.js, update the submitChanges action with the following:
  • If the ga4Reporting feature flag is enabled, and the dashboard view is universal-analytics, dispatch the setDashboardView action with the google-analytics-4 value.
• Add stories for the new SetupFormGA4 component.

Test Coverage

• Add basic test coverage for the new SetupFormGA4 component.

QA Brief

• Go to the Analytics module setup flow.
• Ensure the ga4Reporting feature flag is enabled, the new SetupFormGA4 component is rendered in the Analytics module setup flow.
• Ensure the Account Select, GA4 Property Select, and GA4 Web Data Stream Select are rendered in the first row.
• Ensure the Enable Universal Analytics toggle is rendered in the second row. It should be disabled by default.
• When the toggle is enabled, ensure the UA Property Select, Profile Select, and Setup Snippet Switch are rendered underneath.
• Ensure if the toggle is disabled, selecting a UA property and profile is no longer required, i.e., the validations are no longer triggered. The API requests for the UA property and profile are not made.
• Note that clearing the UA property and profile from the settings is done when submitting the changes. So, it's not visible in the UI when the toggle is disabled.
• Verify the new stories for the SetupFormGA4 component here.

Changelog entry

• Add Google Analytics setup flow that prioritises Google Analytics 4 when GA4 Reporting is enabled.

[tofumatt]

ACs are good here, moving to IB 👍🏻

[nfmohit]

Hi @marrrmarrr!

I, @aaemnnosttv, and @tofumatt had a follow-up discussion (here and internally) regarding the UA property and profile fields being optional going forward, we believe having a "toggle" that says something like Connect Universal Analytics (optional) would be ideal, enabling which would display the UA property and profile fields. Here is a quick mockup of how it'd look like:

This would be similar to the current property creation flow in analytics.google.com:

We would re-use this flow in both setup and settings (in #6744), providing users with a simpler way to connect and if previously connected, disconnect UA from the Analytics module.

Based on the above discussions, we've come up with the following section for the ACs:

If the chosen account has pre-existing UA properties, it should render a new toggle that says Connect Universal Analytics (optional) in the second row.

• If the toggle is enabled, UA PropertySelect and ProfileSelect components should be rendered underneath, requiring users to select a UA property and profile.
• If the toggle is disabled, selecting a UA property and profile should no longer be required, and any formerly selected UA property and profile should be cleared from the settings.
• This entire section including the Connect Universal Analytics (optional) and the associated UA PropertySelect and ProfileSelect components should be contained in a new wrapping component, so that it can be reused inside Analytics SettingsEdit (in Update Analytics SettingsEdit and SettingsView to work without UA #6744).

Please let us know if this is a graceful approach to take from a product/UX perspective. Also, please also advise if the copy of the toggle is fine to go with, and feel free to update it in the ACs as you see fit.

[marrrmarrr]

@nfmohit this sounds good, hiding these fields will make it less distracting for users. Let's just make sure to mention in the ACs that the toggle will be off by default.
Separately, I am assuming this toggle will only be shown in the interim period of 3 months where UA could potentially still show some data? Do we need to add in the ACs when this should be removed, or create a separate GH issue for removing this?

As far as the copy is concerned, I think we should clarify what Universal Analytics is, so people are not confused about this "alternative" type of Analytics. So how about:
"Enable Universal Analytics (the old version of Analytics, which stops recording data after July 1, 2023)"

[nfmohit]

Thank you so much for the confirmation, @marrrmarrr!

Let's just make sure to mention in the ACs that the toggle will be off by default.

As far as the copy is concerned, I think we should clarify what Universal Analytics is, so people are not confused about this "alternative" type of Analytics. So how about:
"Enable Universal Analytics (the old version of Analytics, which stops recording data after July 1, 2023)"

I have updated the ACs to reflect the above.

Separately, I am assuming this toggle will only be shown in the interim period of 3 months where UA could potentially still show some data? Do we need to add in the ACs when this should be removed, or create a separate GH issue for removing this?

I have added the removal of this toggle including the UA fields in the ACs for #6549.

Thank you!

[tofumatt]

@nfmohit Looks great overall, I like the mockup too (I included it in the issue description as well, it was really helpful for context). 👍🏻

ACs here are good. Assigning this IB back to @hussain-t as he was working on it before the AC change 🙂

[tofumatt]

IB ✅

[hussain-t]

@nfmohit, the AC mentions:

In the first row, it should render the AccountSelect, GA4 PropertySelect, and GA4 ProfileSelect.

There is no ProfileSelect in the GA4 version; rather, it should be WebDataStreamSelect. And the SettingsUseSnippetSwitch should be SetupUseSnippetSwitch. Thanks!

[nfmohit]

Brilliant spot, updated, thank you @hussain-t!

[nfmohit]

Hi @hussain-t! One small concern regarding the IB here:

Create a new EnableUniversalAnalytics component in the assets/js/modules/analytics/components/common directory with the following:

• Check if the chosen account has pre-existing UA properties using the getProperties selector of the analytics datastore and pass the UA accountID to it.
• If there are pre-existing UA properties, render the UseSnippetSwitch component with the description prop set to Enable Universal Analytics (the old version of Analytics, which stops recording data after July 1, 2023).
• If the UseSnippetSwitch is enabled, render the UA PropertySelect, ProfileSelect, and SetupUseSnippetSwitch components underneath as children within the GA4PropertyNotice component.
• The notice prop of the GA4PropertyNotice component should be You may also connect a Universal Analytics property that’s associated with this Google Analytics 4 property..

Instead of rendering the UseSnippetSwitch component, I think you meant to render the Switch component that is the toggle, right?

CC: @tofumatt

[hussain-t]

Correct @nfmohit, that's what I'm implementing 👍

[wpdarren]

QA Update: ✅

When on the Analytics module setup flow and ga4Reporting feature flag is enabled

• the new SetupFormGA4 component is rendered in the Analytics module setup flow.

• the Account Select, GA4 Property Select, and GA4 Web Data Stream Select are rendered in the first row.

• the Enable Universal Analytics toggle is rendered in the second row. It is disabled by default.

• when the toggle is enabled, the UA Property Select, Profile Select, and Setup Snippet Switch are rendered underneath.

• if the toggle is disabled, selecting a UA property and profile is no longer required.

• the new stories for the SetupFormGA4 component.

• I also tested the behaviour of setting up GA with and without UA property. No errors in the console and settings appear as expected in both scenarios.

• I completed some additional testing with an existing tag to make sure that this behaved as expected.

Screenshots