Show Measurement ID instead of Property ID in Analytics 4 Property Select Dropdown when there is an existing GA4 Tag

Feature Description

When there’s an existing GA Tag, it is added as and shown to the UI as the Measurement ID. However, In the property select dropdown, there is only the Property ID present. This is confusing UX, as even though the toggle behaves correctly (Turning on/off) based on the selected properties underlying measurement ID, to the user it seems to be happening randomly as there’s no indication that the selected property has/doesn’t have the same existing tag measurement ID.

Showing the measurement ID in place or in addition to the property ID would make things clearer and also help user to select the correct property.

---

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

Acceptance criteria

• Google Analytics 4 properties in the GA4 property dropdown/select should show their name and measurement ID, rather than their name and property ID (as they currently do).
• The REST API endpoints for GA properties and property should be updated to include the measurement ID, which is not currently included in the response. (See this comment: https://github.com/google/site-kit-wp/issues/5145#issuecomment-1166382009)

Implementation Brief

In assets/js/modules/analytics-4/components/common/PropertySelect.js:

• Get the measurementIDs of all the properties using the getWebDataStreamsBatch selector.
  • if properties is not loaded, return null.
  • Get the propertyIDs array by mapping over the properties.
  • Get webDataStreams for the above propertyIDs using the getWebDataStreamsBatch selector.
  • if webDataStreams is not loaded, return null.
  • Return a propertyID:measurementID object by mapping over all the webstreams and picking up webDataStream[ 0 ].webStreamData.measurementId.
• Update isLoading to be true when measurementID is null.
• In the JSX, Update the Option element to use the measurementID like this-

<Option key={ index } value={ _id }>
      { _id === PROPERTY_CREATE
        ? displayName
        : sprintf(
        /* translators: 1: Property name. 2: Measurement ID. */
        _x(
          '%1$s (%2$s)',
        'Analytics property name and ID',
        'google-site-kit'
    ),
      displayName,
      measurementIDs[ _id ]
  ) }
</Option>

Test Coverage

• Not needed.

QA Brief

• Navigate to the analytics edit screen in settings on an installation with GA4 properties
• Ensure that the GA4 property dropdown shows the measurement ID (G-1234ABCD format) instead of the property ID.

Update

• Connect UA but not GA4.
• Go to the settings page and expand Analytics.
• Click the Edit link.
• Ensure this issue observed in the QA is fixed.
• Note: The issue occurs only when we click the Edit link; however, it works with the Connect Google Analytics 4 CTA.

Update

• Delete all the GA4 properties from the Analytics console.
• Create a new one from the Analytics console.
• Click the Connect Google Analytics 4 CTA from the settings page
• Ensure there is no infinite loading state; instead, the GA4 property select dropdown should be displayed.

Update

• Click the Connect Google Analytics 4 CTA.
• Reload the page when the URL is in the /edit path.
• Ensure if the property select is disabled, it should show the measurement id instead of the property id, which was reported in the QA observation:

Placeholder showing property name with property id instead of measurement id when we reload the settings page.

Changelog entry

• Show Measurement ID instead of Property ID in Analytics 4 Property Select Dropdown when there is an existing GA4 Tag.

[mohitwp]

QA update ✅

• Verified on main branch.
• Google Analytics 4 properties in the GA4 property dropdown/select and in GA4 activation banner now showing name and measurement ID, rather than their name and property ID
• Below issue is now resolved.

3) Placeholder showing property name with property id instead of measurement id when we reload the settings page.

https://user-images.githubusercontent.com/94359491/202647005-9ebe3dc9-406a-43d8-9cca-6dd67ba7faaa.mp4

For Issue no 1 and 2 reported here. I Created separate tickets https://github.com/google/site-kit-wp/issues/6159 and https://github.com/google/site-kit-wp/issues/6158 after discussion with @hussain-t.

cc @aaemnnosttv @wpdarren

[techanvil]

@mohitwp the fix is in for your third observation, please take another look.

1. Placeholder showing property name with property id instead of measurement id when we reload the settings page.