Extend frontend to use new GA account provisioning

[aaemnnosttv]

Feature Description

The account creation components and related infra on the frontend should be extended to use the new provisioning endpoint being added in #6732.

Most of the elements will be the same as today, with a few differences as dictated by the new endpoint and its underlying requirements.

---

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

Acceptance criteria

• When the ga4Reporting feature flag is enabled, the GA account creation flow should be changed as follows
  • The input for a view (profile) name should be replaced by an input for a "Web Data Stream" name
• The account creation flow should use the new endpoint added in Create backend infrastructure for new GA account provisioning endpoint #6732
• The created account, property, and data stream should be created using the provided display names
  • The default display name for a web data stream should use the same as today (the domain of the site's reference URL)
• The logic related to the required scope to create an account should be based on the analytics.edit scope as the Admin API does not have a dedicated scope for provisioning

Implementation Brief

Within new file assets/js/modules/analytics-4/utils/account.js:

• Create the function getAccountDefaults(). This can be copied from the Analytics implementation, but with profileName removed and replaced with dataStreamName which should have the value of the site's reference URL (from the getReferenceURL() selector).

Within assets/js/modules/analytics-4/datastore/accounts.js:

• Create a fetch store named fetchCreateAccountStore, which can be copied from the Analytics implementation, with analytics changed to analytics-4.
• Create a *createAccount() action, which can be copied from the Analytics implementation, but within data:
  • Replace profileName with dataStreamName.
  • Replace the property name accountName with displayName, which should still map to the FORM_ACCOUNT_CREATE value accountName.
  • Add the property regionCode which should map to the FORM_ACCOUNT_CREATE value countryCode.

Within new file assets/js/modules/analytics/components/common/AccountCreate/WebDataStreamField.js:

• Create and export the WebDataStreamField functional component.
• This can be copied from assets/js/modules/analytics/components/common/AccountCreate/ProfileField.js, with the following changes:
  • Change profileName to dataStreamName.
  • Change profile to dataStream.
  • Change View to Web Data Stream.

Within assets/js/modules/analytics/components/common/AccountCreate/index.js:

• When the ga4Reporting feature flag is enabled:
  • Render the new WebDataStreamField component in place of the ProfileField component.
  • Change the call to createAccount() to use the new GA4 version.
  • Change the call to getAccountDefaults() to use the new GA4 version.
• Refactor the explicit checks that ultimately refer to PROVISIONING_SCOPE to be abstracted from the specific scope. Ensure that when the ga4Reporting feature flag is checked, the required scope is EDIT_SCOPE, otherwise it should remain PROVISIONING_SCOPE.

Storybook

• Add story variants to show the Analytics Setup flow with the new AccountCreate component visible.

Test Coverage

• Add test coverage for the new datastore and utility functions.
• Add VRT scenarios for the newly added stories.
• Ensure all existing tests still pass.

QA Brief

• With ga4Reporting feature flag disabled, the current Analytics new account creation should function as usual/with no change.
• With ga4Reporting feature flag enabled:
  • Site Kit should be set up using the site-kit-local service environment (refer to QAB of Create backend infrastructure for new GA account provisioning endpoint #6732 for setup instructions).
  • Go to the setup screen for the Analytics module.
  • If your Google account has pre-existing Analytics account(s), choose to create a new account.
  • Verify that the "new account" setup screen shows "Web Data Stream" name field replacing the "Profile" field.
  • Verify that the account creation is successful.
  • Verify that Analytics is connected with only GA4 property and web data stream (no UA entities).
  • Verify that the created account, property, and profile have the originally entered (during setup) display names.
  • Verify that creating an account with this new flow automatically switches the site to the GA4 dashboard view.

Changelog entry

• Use new GA account provisioning API when ga4Reporting is enabled.

[eugene-manuilov]

IB ✔️

[wpdarren]

Leaving a reference note here.

I have found a GA4 Reporting bug. When creating a new Analytics account, an error occurs only when GA4Reporting feature flag is enabled. Currently, you are unable to create an account because of an error message Error: Invalid datapoint. In the console an error also appears. Google Site Kit API Error method:POST datapoint:create-account-ticket type:modules identifier:analytics error:"Invalid datapoint."

After conversation in Slack it appears that this ticket will fix this issue.

ga4bug.mp4

c.c @mohitwp @wpdarren (yes, I am tagging myself so I get a notification 😄 )

[aaemnnosttv]

Thanks @wpdarren – it's expected for now until this issue is completed. Thanks for flagging but just wanted to clarify that this is not a bug.

[mohitwp]

QA Update ⚠️

@nfmohit Please find my observations below-

• Tested on dev environment.
• Tested analytics set up when ga4Reporting is disabled without using site kit staging proxy plugin.
• Tested analytics set up when ga4Reporting is disabled using site kit staging proxy plugin.
• Tested analytics set up when ga4Reporting is enabled using site kit staging proxy plugin.

Please find my observations below -

ga4Reporting feature flag is disabled

1. Property drop down showing "Set up new property" 2 times. This is an issue, but let me know if we already have a ticket for this.

2. New web data stream is not getting create and it's generating error - "Requested entity already exists".

3 In QAB it is mentioned that Verify that the setup screen shows "Web Data Stream" name field replacing the "Profile" field. This is a little confusing. There are 2 cases -
a) If user creates new analytics a/c then on set up screen "Web Data Stream" field replacing "views".
b) If user choose existing analytics a/c then on set up screen "Web Data Stream" appearing along with "Property field" replacing "Google Analytics 4 property".
Are both the cases expected ?

Case 1 -

Case 2-

ga4Reporting feature flag is enabled and connected through staging proxy server

4. Property and View fields are not showing under settings view and edit mode. This is expected as we don't have UA property, but flagging here if we are going to remove these fields under this ticket or through follow-up ticket.

5. Set up screen shows Notice "An associated UA property will also be created" .

6. On disconnecting and connecting analytics, set up Property and view field appears with "profile_create" "property_create" data.

7 Main and entity dashboard widgets showing errors if we disconnect and connect analytics again.

[nfmohit]

Thank you for sharing your observataions, @mohitwp! I have responded to them below. Please feel free to let me know if you have any further questions.

Side note: Just to confirm, this ticket is only related to the new Analytics account creation flow with ga4Reporting enabled. Other parts of the Analytics setup (e.g. with existing Analytics account) and settings are being handled in other issues.

1. Property drop down showing "Set up new property" 2 times. This is an issue, but let me know if we already have a ticket for this.

This was reported here and is being fixed as a part of that issue.

2. New web data stream is not getting create and it's generating error - "Requested entity already exists".

It looks like this happens when we try to create a new web data stream from Analytics settings, as there isn't a way currently to define a custom name for the new web data stream.

It appears that this was reported here, and reportedly should be fixed as a part of #6727.

3 In QAB it is mentioned that Verify that the setup screen shows "Web Data Stream" name field replacing the "Profile" field. This is a little confusing. There are 2 cases -
a) If user creates new analytics a/c then on set up screen "Web Data Stream" field replacing "views".
b) If user choose existing analytics a/c then on set up screen "Web Data Stream" appearing along with "Property field" replacing "Google Analytics 4 property".
Are both the cases expected ?

Apologies for the confusion regarding the QAB. By "setup screen", I meant the new account creation flow, i.e. case 1. This ticket only updates the new Analytics account creation flow. I have updated this part of the QAB, but as long as case 1 meets our requirements, this should be fine.

4. Property and View fields are not showing under settings view and edit mode. This is expected as we don't have UA property, but flagging here if we are going to remove these fields under this ticket or through follow-up ticket.

Settings view and edit screens are being updated as a part of #6744.

5. Set up screen shows Notice "An associated UA property will also be created" .

This was updated as a part of #6738. You should no longer see it now.

6. On disconnecting and connecting analytics, set up Property and view field appears with "profile_create" "property_create" data.

This should also be fixed as soon as #6740 and #6744 are merged.

7 Main and entity dashboard widgets showing errors if we disconnect and connect analytics again.

This should also be fixed with #6738, but please report there if it isn't.

[mohitwp]

QA Update ✅

Thank you @nfmohit for your reply

Verified -

• Tested on dev environment.
• Tested analytics set up when ga4Reporting is disabled without using site kit staging proxy plugin.
• Tested analytics set up when ga4Reporting is disabled using site kit staging proxy plugin.
• Tested analytics set up when ga4Reporting is enabled using site kit staging proxy plugin.
• Verified the account creation is successful in all cases.
• Verified that the "new account" setup screen shows "Web Data Stream" name field replacing the "Profile" field.
• Verified that Analytics is connected with only GA4 property and web data stream (no UA entities).
• Verified that the created account, property, and profile have the originally entered (during setup) display names.
• Verified that creating an account with this new flow automatically switches the site to the GA4 dashboard view.

[aaemnnosttv]

ℹ️ I opened #6831 as a follow up here, otherwise this works great 👍