Update the “create account” Analytics setup screen to match the Figma design.

[techanvil]

Feature Description

Update the “create account” Analytics setup screen to match the Figma design.

For reference, see the Analytics setup section in the Design Doc.

---

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

Acceptance criteria

• The “create account” Analytics setup screen is updated as follows:
  • The info tooltips implemented in Update the main Analytics setup screen to match the Figma design. #11382 are displayed below the Property and Web Data Stream fields.
  • If the user has granted the Analytics edit scope, the copy above the Create Account CTA button is: You will be redirected to Google Analytics to accept the terms of service.
  • If the user has not granted the Analytics edit scope, the copy above the button remains as it is: You will need to give Site Kit permission to create an Analytics account on your behalf and also accept the Google Analytics terms of service.
• When the “create account” Analytics setup screen is displayed as part of the initial setup flow, but not when it's initiated from the Connect More Services screen, or a setup CTA:
  • The title is "Create your Analytics account" and matches the Figma design.
  • The "Connect Service" intro title and the Analytics logo with the service name next to it are not shown.
• The changes are gated behind the setupFlowRefresh feature flag.

Please note, the Figma design is not finalised. The following points should be taken into account:

• The enhanced measurement switch should be above the plugin conversion tracking notice to be consistent with main Analytics setup screen.
• The main content of the screen should be wrapped in grey gutters, following Site Kit's standard Material Design grid layout.

Implementation Brief

• To determine if the Analytics setup is initiated from the initial setup flow, use the getQueryArg function to determine if the current URL includes the showProgress query argument.

• Use the useFeature hook to determine if the setupFlowRefresh feature flag is enabled.

• Create two components PropertyHint and WebDataStreamHint in assets/js/modules/analytics-4/components/common

  • These components would essentially contain the StepHint component with the copies as mentioned in description below.
  • These components can be used inside SetupFormFields as part of Update the main Analytics setup screen to match the Figma design. #11382 as well.

• In assets/js/modules/analytics-4/components/common/AccountCreate/index.js

  • If the setupFlowRefresh feature flag is enabled and the module setup is initiated from the initial setup flow, add the class googlesitekit-feature--setupFlowRefresh
  • Create a new boolean variable, say isInitialSetupFlow, which should be true if the setupFlowRefresh feature flag is enabled and the module setup is initiated from the initial setup flow.
  • Output the PropertyHint and WebDataStreamHint components alongside PropertyField and WebDataStreamField components respectively.
    • Copy for the PropertyField info tooltip will be:
      • Icon label: What is an Analytics property?
      • Tooltip: An Analytics property is a container for data collected from a website. It represents a specific website, and within a property, you can view reports, manage data collection, attribution, privacy settings, and product links. Learn more
    • Copy for the WebDataStreamField info tooltip will be:
      • Icon label: What is a web data stream?
      • Tooltip: A data stream is a flow of data from your visitors to Analytics. When a data stream is created, Analytics generates a snippet of code that is added to your site to collect that data. Learn more
  • If the setupFlowRefresh feature flag is enabled and the module setup is initiated from the initial setup flow, the Back button should not be displayed.
  • The text above the Create Account CTA is already taken care of in the component, so no need to change anything there.

• In assets/js/modules/analytics-4/components/setup/SetupMain.js

  • Render the googlesitekit-setup-module__step div (which contains the Analytics logo and service name) only when isInitialSetupFlow is falsy.

• In assets/sass/components/analytics-4/_googlesitekit-analytics-settings-module.scss

  • Target the googlesitekit-feature--setupFlowRefresh class to add additional styles as per the Figma design.
    • For the heading, font-size should be $fs-headline-md and font-family should be Google Sans Display.
    • The description below the Enhanced measurement switch should match the Figma design. The color should be $c-surfaces-on-surface-variant and an appropriate left margin added.
    • Tracking instructions should have the color set to $c-surfaces-on-surface and font-size to $fs-label-sm

Test Coverage

• Add a story for AccountCreate for the setupFlowRefresh feature-enabled scenario.
• Add tests for PropertyHint and WebDataStreamHint components.

QA Brief

• Set up Site Kit.
• Turn on the setupFlowRefresh feature flag.
• Go to /wp-admin/admin.php?page=googlesitekit-dashboard&slug=analytics-4&reAuth=true&showProgress=true.
• If you have existing Analytics accounts, choose to create a new one.
• Verify that the create account screen matches the ACs and Figma designs.
• Verify that the create account flow functions as expected.

Changelog entry

• Update the Analytics account creation screen for the new setup flow.

[nfmohit]

Thank you for drafting the IB, @ankitrox!

• If the setupFlowRefresh feature flag is enabled and the module setup is initiated from the initial setup flow, add the class googlesitekit-setup-module__initial-setup
• ...
• Target the googlesitekit-setup-module__initial-setup class to add additional styles as per the Figma design.

This is slightly contradictory to the ACs. According to the ACs, the stylistic changes should be implemented behind the setupFlowRefresh feature flag, but regardless of whether the module setup is initiated from the initial setup flow or not. In that case, let's add a class, say googlesitekit-feature--setupFlowRefresh and scope the style changes behind it. The class name should include the feature flag so that it can be easily found and removed when removing the feature flag.

If the setupFlowRefresh feature flag is enabled, output the StepHint component below the PropertyField and WebDataStreamField components.

• Copy for the PropertyField info tooltip will be:

  • Icon label: What is an Analytics property?* Tooltip: An Analytics property is a container for data collected from a website. It represents a specific website, and within a property, you can view reports, manage data collection, attribution, privacy settings, and product links. Learn more

• Copy for the WebDataStreamField info tooltip will be:

  • Icon label: What is a web data stream?* Tooltip: A data stream is a flow of data from your visitors to Analytics. When a data stream is created, Analytics generates a snippet of code that is added to your site to collect that data. Learn more

It might be worth mentioning that these are also being implemented in #11382. It might be beneficial to wrap these into it's own components to avoid duplication. The IB, of course, doesn't need to go too deep into the implementation specifics, but a general direction and accounting for it in the estimate should be sufficient.

Please let me know if you have any questions/concerns, thank you!

[ankitrox]

Thanks for reviewing the IB @nfmohit

I've updated the IB and also added a point to create an abstracted HelperTip component.

Over to you for another pass.