Show Container ID in the Select Dropdown of Tag Manager Setup and Settings forms when there is an existing tag

[kuasha420]

Feature Description

Currently in the feature/existing-tag-simplification (after #5096 gets merged) branch, when there is a existing tag manager tag, a lovely helpful message will be shown about selecting the existingTag as the container to collect data using that container. However, the container names in the dropdown is the human readable container names and not the container ID. We can show the container ID (maybe in parenthesis) if there's an existing tag to help the user select the existing tag easily if that's what they are after.

---

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

Acceptance criteria

• The Tag Manager container dropdowns (for both web and AMP containers) should be adjusted to always show both the container name and the container ID visually for their options.
  • The container name and ID should be combined with a template string as follows: _x( '%1$s (%2$s)', 'Tag Manager container', 'google-site-kit' ) (first placeholder should be the name, second the ID)
  • The similar __( '%1$s (%2$s)', 'google-site-kit' ) that is currently present in the Analytics property dropdowns across the plugin should be adjusted accordingly to have a context so that it is clear to translators: _x( '%1$s (%2$s)', 'Analytics property', 'google-site-kit' )
• This change can be added to develop as it is not tied to the "Existing tag simplification" enhancement and is a nice improvement regardless. Once the PR is merged, it should be merged back into the feature/existing-tag-simplification branch to apply there as well.

Implementation Brief

• In the assets/js/modules/tagmanager/components/common/ContainerSelect.js file:
  • Update the container name property rendering to display container name with ID as it described in AC.

    site-kit-wp/assets/js/modules/tagmanager/components/common/ContainerSelect.js

    Line 94 in 9590f00

    { name }

  • Use Tag Manager container name and ID as the context for translation to provide more accurate clue to translators.
  • Render just the name property if the publicId equals CONTAINER_CREATE constant.
• Update the %1$s (%2$s) messages in the following files to use _x translation function with Analytics property name and ID context instead of just __ function.
  • assets/js/modules/analytics/components/common/PropertySelect.js
  • assets/js/modules/analytics/components/common/PropertySelectIncludingGA4.js - here we just need to update the context for the translation to be the same as for other components.
  • assets/js/modules/analytics/components/settings/GA4SettingsControls.js
  • assets/js/modules/analytics-4/components/common/PropertySelect.js

Test Coverage

• N/A

QA Brief

• The Web and AMP container Select Dropdown in Tag Manager Setup and Settings Page should have the Public ID (GTM-XXXXXX) displayed next to the container name in parenthesis.

Changelog entry

• Update Tag Manager container dropdowns to also include the container ID.

[felixarntz]

@kuasha420 This is a nice enhancement. It's not really tied to the "Existing tag simplification" epic, so I think we can definitely do this one in develop as even for today's user experience it's useful.

I still leave it under the "Existing tag simplification" epic, just so that we prioritize it.

[tofumatt]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• The Web and AMP container Select Dropdown in Tag Manager Setup and Settings Page has the Public ID (GTM-XXXXXX) displayed next to the container name in parenthesis.
• Checked on desktop and small screen sizes to ensure no UX/UI issues.

Screenshots

Set up form

Settings