Prevent errors due to unique data stream name constraint

[aaemnnosttv]

Feature Description

GA4 requires that all data stream names for a property are unique as can be seen in the admin interface:

This constraint can result in failing API requests when attempting to create a data stream that has a non-unique name

While data streams are not the GA4 equivalent of UA views, this is somewhat related to the work we did for enhancing the creation of a new view (see #716).

---

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

Acceptance criteria

• The experience for creating a new web data stream should be updated to provide an input for the stream name when the option is selected to create a new web data stream
• The stream name should default to the same value used today
• If a stream already exists by the same name for the selected property, an error should be displayed and the user should be blocked from submitting changes until it is addressed either by selecting another data stream choice or providing a different name for the stream
• It should not be possible to submit changes when the current web data stream name to create is known to already exist

Note: this is essentially the GA4 version of #716

Implementation Brief

• In assets/js/modules/analytics-4/datastore/constants.js
  • Define new constant FORM_SETUP
• Add assets/js/modules/analytics-4/components/common/WebDataStreamNameInput.js
  • Include a TexField component to render the input field. Default value should be Set up a new web data stream, and this value should be saved to FORM_SETUP, under, say webDataStreamName
  • Show error if user tries to submit the form with this field being empty, if Web Data Stream name already exists, or name is invalid
  • If web data stream is invalid, show error border around this field, instead of select field. And update the select field, to skip that check when WEBDATASTREAM_CREATE option is selected
  • To check if added name, exists, run the value agains all existing Web data streams
  • You can check ProfileNameTextField for inspiration, as it handles similar thing just for UA counterpart
• In assets/js/modules/analytics-4/datastore/settings.js:
  • Pass the webDataStreamName to the createWebDataStream action
  • Include another check if Web data stream name already exists in validateCanSubmitChanges
• In assets/js/modules/analytics-4/datastore/webdatastreams.js:
  • Update createWebDataStream action
    • Check for webDataStreamName value, it should be required and not empty
    • Pass it to the fetchCreateWebDataStream
    • Update fetchCreateWebDataStreamStore to accepts webDataStreamName parameter and forward it to the API request
• Update assets/js/modules/analytics-4/components/setup/SetupForm.js:
  • Render new WebDataStreamNameInput component bellow the other 3 select components, if WEBDATASTREAM_CREATE is selected
  • You can see the example how it is done for Profile name field
• In assets/js/modules/analytics-4/components/settings/SettingsControls.js:
  • Include WebDataStreamNameInput, you can see example here
• In includes/Modules/Analytics_4.php
  • Update POST:create-webdatastream
    • Modify displayName to pull data from webDataStreamName

Test Coverage

• Currently there are no tests for WebDataStreamSelect component, it would be handy to add it as part of this issue, and at least cover the new field behaviour with a test case, as a start.
• Update assets/js/modules/analytics-4/datastore/webdatastreams.test.js, for createWebDataStream to reflect the change of having new webDataStreamName parameter
• Update assets/js/modules/analytics-4/datastore/settings.test.js
  • In some instance where createWebDataStreamsEndpoint is used, include webDataStreamName where/if needed

QA Brief

• Set up SK.
• Go onto setup the Analytics module.
• Choose to create a new web data stream.
• Verify that you see a "Web Data Stream Name" field.
• Verify that it defaults to the site's URL hostname.
• Try making it blank. Verify that it shows an error state with an appropriate message. Also verify that it doesn't let you submit the form.
• Try setting it to a web data stream name that already exists. Verify that it shows an error state with an appropriate message. Also, verify that it doesn't let you submit the form.
• Enter a different web data stream name and set up Analytics.
• Now, go to Analytics settings and try creating a new web data stream from the Analytics settings edit view.
• Perform all the verifications described above.
  • Do note that if you add an invalid web data stream name in the settings edit screen, even though the field will show an error state, it will still let you submit the form. This is likely a pre-existing bug with the module settings edit form that doesn't disable the submission button in an event where it should, instead just changes "Apply changes" to "Save". Please file an issue if you agree this is the case, and if such an issue is not filed already.

Changelog entry

• Enhance Web Data Stream creation in Analytics setup and settings screens to allow using custom web data stream name.

[wpdarren]

I would like to include two bugs I have found while testing #6330 that I understand will be fixed in this ticket.

A console error and analytics is not successfully set up in a specific scenario: I have a site that has Site Kit and Analytics already set up with a web data steam. I reset and set up again. Rather than go with the defaulted web data stream, I select from the dropdown to create a new one. When clicking on the configure analytics CTA, I am redirected back to the dashboard and the success notification appears.

In the console though an error message appears on clicking the CTA.

Google Site Kit API Error method:POST datapoint:create-webdatastream type:modules identifier:analytics-4 error:"Requested entity already exists" POST https://ing-online-voka.instawp.xyz/wp-json/google-site-kit/v1/modules/analytics-4/data/create-webdatastream?_locale=user 409

When I go to the settings for Analytics, the module isn't connected and when editing the settings the GA4 property and web data stream fields are blank. You can see it in action on this screencast.

web-1.mp4

A similar issue occurs when I go to edit settings. I select a new web data stream, and click on the confirm changes and the settings are saved but no new web data stream is created and the same error above appears.

web-2.mp4

@aaemnnosttv since #6330 is going out in 1.98.0, do we have any plans to include this fix in the same release? Otherwise we will have a bug which I feel will cause support tickets.

[aaemnnosttv]

@wpdarren it's not really a bug on our end but not a great experience for the user, I agree.

Even though it's not too hard to reproduce, it should be a rare edge case. Even if we did get a request about it, there is an easy work around to simply rename the existing data stream and try again. Ideally we'd address it in the upcoming release, but it needs to wait until all the high priority issues for GA4 reporting are done.

[eugene-manuilov]

@zutigrm

• In assets/js/modules/analytics-4/datastore/settings.js:

  • Pass the webDataStreamName to the createWebDataStream action

We also need to update the validateCanSubmitChanges function to verify that the web data stream name is unique:

site-kit-wp/assets/js/modules/analytics-4/datastore/settings.js

Line 189 in 996e3ac

export function validateCanSubmitChanges( select ) {

• Update assets/js/modules/analytics-4/components/common/WebDataStreamSelect.js:

  • Render new WebDataStreamNameInput component bellow the select, if WEBDATASTREAM_CREATE is selected

It should be rendered in the same way how we render the profile name field:

site-kit-wp/assets/js/modules/analytics/components/setup/SetupFormUA.js

Lines 102 to 106 in 996e3ac

	{ profileID === PROFILE_CREATE && (
	<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
	<ProfileNameTextField />
	</div>
	) }

In other words, we need to render this component on the next line below all 3 components (account/property/webdatastream selects). It means that we need to update setup and settings forms to have the same behavior on all of them.

Add assets/js/modules/analytics-4/components/common/WebDataStreamNameInput.js

This component also should display the create web data stream error instead of doing it in the web data stream select if we create a new data stream.

[zutigrm]

@eugene-manuilov Thank you for the feedback. IB updated

[eugene-manuilov]

Nice. Thanks, @zutigrm. IB ✔️

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Verified web data stream creation and validation when creating new analytics a/c during Analytics set up.
• Verified new web data stream creation and validation when connecting with existing analytics a/c during Analytics set up.
• Verified new web data stream creation and validation under Analytics settings.
• Verified that validation messages are appearing and user is not able to complete analytics setup while creating new analytics a/c or when trying to connect with existing analytics a/c.

Note : User is able to save settings even if user enter already exist web data stream name or do not provide any web data stream name which is known issue as per QAB. I created separate issue for this - #8467

1) Verified web data stream creation and validation when creating new analytics a/c during Analytics set up.

Recording.847.mp4

2) Verified new web data stream creation and validation when connecting with existing analytics a/c during Analytics set up.

Recording.848.mp4

3) Verified new web data stream creation and validation under Analytics settings.

Recording.849.mp4

[mohitwp]

QA Update ⚠️

Moving this back to QA from approval because I have one question.

@nfmohit I noticed that when user save analytics settings after giving invalid web data stream name or without providing web data stream name then settings gets save and analytics setup status set to incomplete. Now when again user trying to complete setup then user is not able to complete setup even after providing unique web data stream name. In this case complete setup button remains inactive until user selects already exists web data stream. So, in this case user will not able to create new web data stream. Can you implement fix for this or this scenario will be address (most likely not occur) through #8467 which I created to address settings allow saving of invalid web data stream name.

Recording.850.mp4

[nfmohit]

Hi @mohitwp. I have actually noticed this problem once before. This problem has more to do with the submit settings button ("Confirm Changes"/"Save") rather than the web data stream name input.

Currently, if there are no changes in the settings, or there is an invalid setting value, the button simply says "Save", whereas, it should keep saying "Confirm Changes" but just be disabled, so that the user cannot submit.

For example, to understand this behaviour, try to edit settings of Tag Manager. When you're there, choose to create a new container, but keep the field blank. Notice how the submit button says "Save" and you can still submit, where you shouldn't be able to. Once you click "Save", it just gets stuck at the loading state and never completes.

As this issue doesn't seem specific to the web data stream input but the settings edit form for modules in general, do you think it might be wiser to create a new issue for further investigation?

Thanks!

[mohitwp]

QA Update ✅

As per slack discussion we will address above issue through #8467

• Tested on dev environment.
• Verified web data stream creation and validation when creating new analytics a/c during Analytics set up.
• Verified new web data stream creation and validation when connecting with existing analytics a/c during Analytics set up.
• Verified new web data stream creation and validation under Analytics settings.
• Verified that validation messages are appearing and user is not able to complete analytics setup while creating new analytics a/c or when trying to connect with existing analytics a/c.

Note : User is able to save settings even if user enter already exist web data stream name or do not provide any web data stream name which is known issue as per QAB. I created separate issue for this - #8467

1) Verified web data stream creation and validation when creating new analytics a/c during Analytics set up.

Recording.847.mp4

2) Verified new web data stream creation and validation when connecting with existing analytics a/c during Analytics set up.

Recording.848.mp4

3) Verified new web data stream creation and validation under Analytics settings.

Recording.849.mp4

[mohitwp]

QA Update ❌

Moving this back to execution due to regression issue found during release QA.

[mohitwp]

QA Update ✅

• Tested on main environment..
• Verified Analytics set up.
• Verified create a/c , Create new property and create new Web data stream functionality.
• Now user is able to create new property.

Recording.861.mp4

[aaemnnosttv]

⚠️ Approval

There is an odd experience when switching between properties as can be seen in @mohitwp 's screencast above where the field is visible while the dropdowns are loading. This should be fixed.

I went back and looked at how we did this in the legacy Analytics and it seems about the same, but we handle the process of selecting a property a bit differently. I'll see about putting together a quick PR for this.

[nfmohit]

The above issue has now been addressed through a follow-up PR. This is back in QA.

[wpdarren]

QA Update: ✅

Verified:

• Went through switching between different Analytics accounts, properties and web data streams.
• Went through creating new accounts, properties and web data streams.
• Didn't find any regressions, no issues with the odd UX/UI as observed by Evan here.