Implement Analytics setup form UI for accounts that have both UA properties and GA4 properties

[felixarntz]

The UI for the scenario that an Analytics account has properties of both UA and GA4 type available should be implemented.

For details on this UI, see:

• design doc section
• Figma design

---

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

Acceptance criteria

• The UI from the Figma design should be implemented in the SetupFormGA4Transitional component that was scaffolded in Prepare Analytics setup form UI for split into four sub-variants (depending GA4 support and available properties) #3247.
  • One exception: For the blue notification, rely on our existing SettingsNotice component for the look for now, to keep this simple. The notification design will be updated to the one specified in the Figma file in a follow-up issue.
    • Specifically, don't bother aligning the "learn more" link to the bottom right of the notice, just put it with the main text for now. The "learn more" link will eventually be a separate prop, at which point SettingsNotice itself will take care of the positioning.
  • Finding an associated property of the other type based on the primary property selected is not technically implemented yet. Therefore per this issue only the user flow path where "SK can't find a match" should be implemented (i.e. the user needs to choose the associated property themselves).
• Technically, the UI implementation should largely follow what is in SetupFormLegacy:
  • A StoreErrorNotices for the modules/analytics store should be on top. ExistingTagNotice and ExistingGTMPropertyNotice should not be included in this scenario for now.
  • The main dropdowns should be rendered in a .googlesitekit-setup-module__inputs container. For the property dropdown, the PropertySelectIncludingGA4 component needs to be used instead of the PropertySelect one. The ProfileSelect and ProfileNameTextField here need to be rendered only under the additional condition that getPrimaryPropertyType returns "ua" (i.e. the property selected in the main property dropdown is a UA property and therefore also needs a view selected).
• For the dropdown to render in the blue notice:
  • If the primary property selected is a UA property, this should list all GA4 properties, i.e. use the PropertySelect component from the modules/analytics-4 module.
  • If the primary property selected is a GA4 property, this should list all UA properties, i.e. use the PropertySelect component from the modules/analytics module. In that case it also needs to include the ProfileSelect dropdown to select the profile/view for the property that is selected here (UA properties support profiles/views while GA4 properties don't).
• Basic Storybook coverage for rendering SetupForm with this UI state (i.e. so that SetupFormGA4Transitional is shown) should be implemented.

Implementation Brief

• Using SetupFormGA4Transitional, copy the code over from SetupFormLegacy with the folllowing changes:
  • Move StoreErrorNotices to be above the GA4Notice component.
  • Remove the ExistingTagNotice and ExistingGTMPropertyNotice components.
  • Replace the PropertySelect component by PropertySelectIncludingGA4.
  • Use the getPrimaryPropertyType selector of the Analytics data store to get the primary property type.
  • Conditionally render the ProfileSelect and ProfileNameTextField component if the result from getPrimaryPropertyType is ua.
  • As per the AC, only the user flow path where "SK can't find a match" should be implemented from the Figma designs.
  • For the blue notice, use the SettingsNotice component (following updates from Update SettingsNotice component to account for new GA4 notice design #3251) with the following props:
    • Icon: The SVG from the designs in Figma
    • LearnMore: Link component to be used for the "Learn More" link. URL: TBD.
  • The title and the dropdowns in the blue notice should be the children of the SettingsNotice component.
  • The title should be different based on the result from the getPrimaryPropertyType selector.
    • If it's ua, the title should be: You'll need to connect the Google Analytics 4 property that's associated with this Universal Analytics property,
    • else it should be: You'll need to connect the Universal Analytics property that's associated with this Google Analytics 4 property.
  • The dropdowns in the blue are rendered conditionally based on the primary property (via the getPrimaryPropertyType selector):
    • If it's ua, use the PropertySelect component from the modules/analytics-4 module.
    • If it's ga4, use the PropertySelect component from the modules/analytics module. The ProfileSelect component should also be displayed next tot he PropertySelect component. Refer to the User selects GA4 property flow in Figma.
    • The .googlesitekit-setup-module__inputs container can be used again for aligning the dropdowns in the blue notice similar to what is done for the main dropdowns.
• Create SetupFormGA4Transitional.stories.js to render the stories for the component.
  • Stories should cover the flow where ua is the primary property type and ga4 as well.
  • Examples on how to populate the registry for the stories can be taken from the legacy module-analytics-settings.stories.js file.

Test Coverage

• No new tests needed.
• Existing tests should pass.

Visual Regression Changes

• N/A

QA Brief

• Create a new site on https://jurassic.ninja/
• Go to Google Analytics and create a new account with new UA and GA4 properties for the new site
• Go back to the new site, install and connect the SK plugin
• Go to the plugin settings and activate the Analytics module
• Select the newly created account on the Analytics setup page.
• Make sure the form looks exactly like on the Figma design.
• Make sure that your selections are saved correctly when you submit changes.

Changelog entry

• Added a UI to manage Analytics Accounts with both Universal Analytics and GA4 properties.

[eugene-manuilov]

@asvinb could you please provide more details in IB so engineers who are less familiar with the codebase can better understand what needs to be done?

[asvinb]

Hey @eugene-manuilov
I checked again and I do think that the AC is explicit enough and most of the IB will be just a copy and paste from the AC.

[eugene-manuilov]

@asvinb, yes, I agree with you - as an engineer who is very familiar with the codebase, I don't need more details. But we have guys who are less familiar with it and they will struggle to understand what needs to be done and how. If you could provide detailed information, it would help them very much. Please, update the IB taking into account that an engineer not familiar with it might work on this ticket.

[asvinb]

@eugene-manuilov I've updated the IB to provide more details.

[eugene-manuilov]

Thanks, @asvinb! IB ✔️

[danielgent]

The QA brief says Make sure the form looks exactly like on the Figma design. but the design has the SK guessing match state

IIRC this is only done on a later ticket

@felixarntz I believe that we are not implementing this functionality for now?

[eugene-manuilov]

@danielgent this screen isn't needed for now.

[wpdarren]

QA Update: Pass ✅

Verified:

The form looks like the Figma design and functions as per the designs.

The selections are saved correctly when changes are made.