Finalize Analytics & Tag Manager informing about existing tags

Follow-up to #4913, #4934, #5046.

---

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

Acceptance criteria

Relying on the feature/existing-tag-simplification branch:

• The UseSnippetSwitch components for all three modules analytics, analytics-4, and tagmanager should have their isSetup prop removed again. Instead, they should going forward always use the styling that is currently only present in case the isSetup prop is active (i.e. the description is in a smaller font size and closer to the toggle label).
• The SettingsUseSnippetSwitch components for all three modules analytics, analytics-4, and tagmanager should be updated as follows:
  • If there is an existing tag, they should display the same copy like their respective SetupUseSnippetSwitch counterpart.
  • If there is no existing tag, they should display the same copy that they display today.
  • The only exception / additional requirement here is for analytics: In there, the canUseSnippet === false condition should still take precedence. In other words, if Tag Manager has prevented tag placement by Analytics, that message should still be displayed even if there is an existing tag.
• The ExistingTagNotice used in Analytics should be entirely removed, as it is now covered by the above information in the toggle, even in the settings UI.
• The FormInstructions in Tag Manager should have all information related to existing tags removed and the showExistingTagMessage prop should be removed as well, as it is now covered by the above information in the toggle, even in the settings UI.

Implementation Brief

Any PR for this must be based on and target the feature/existing-tag-simplification branch.

• In UseSnippetSwitch components of analytics, analytics-4 and tagmanager modules:
  • Remove isSetup prop and the class that it adds conditionally.
  • Remove unused imports.
• In assets/sass/components/global/_googlesitekit-use-snippet-switch.scss
  • Remove the &--setup and put all the styles inside .googlesitekit-analytics-usesnippet, .googlesitekit-tagmanager-usesnippet .
• Update the SettingsUseSnippetSwitch of analytics module:
  • Get existingTag and propertyID using their respective selectors.
  • If canUseSnippet === false, return The code is controlled by the Tag Manager module. as the description.
  • If there’s an existingTag, return the descriptionfrom the SetupUseSnippetSwitch component of the same module, based on the value of propertyID === existingTag.
  • if there’s no existingTag, continue returning the current description based on the value of useSnippet and canUseSnippet.
• Update the SettingsUseSnippetSwitch of analytics-4 module:
  • Get existingTag and measurementID using their respective selectors.
  • If there’s an existingTag, return the descriptionfrom the SetupUseSnippetSwitch component of the same module, based on the value of measurementID === existingTag.
  • if there’s no existingTag, continue returning the current description based on the value of useSnippet.
• Update the SettingsUseSnippetSwitch of tagmanager module:
  • Get containerID using getPrimaryContainerID and existingTag using getExistingTag selectors.
  • If there’s no existingTag, continue returning the current description based on the value of useSnippet.
  • If there’s an existingTag, return the description from the SetupUseSnippetSwitch component of the same module, based on the value of primaryContainerID === existingTag.
• Update SetupUseSnippetSwitch of analytics, analytics-4 and tagmanager modules:
  • Remove isSetup prop from the UseSnippetSwitch element as it is no longer used.
• Remove assets/js/modules/analytics/components/common/ExistingTagNotice.js and all its usage.
• In assets/js/modules/tagmanager/components/common/FormInstructions.js:
  • Remove showExistingTagMessage prop.
  • Remove hasExistingTag constant.
  • Remove the message that is shown based on the above prop and constant.
  • Remove unused proptype and import.
• in assets/js/modules/tagmanager/components/settings/SettingsForm.js:
  • Remove showExistingTagMessage prop from FormInstructions element as it’s no longer used.

Test Coverage

• Update any failing (E2E) tests.

QA Brief

• For Analytivs, Analytics 4 and Tag Manager module, all the existing tag related messages are collocated with their respectibe Snippet Toggle Switch for both Setup and Settings Pages.
• GTM related messages are still placed on top of Setup/Settings Forms.
• Make sure copy matches AC.

Changelog entry

• Ensure that snippet toggle in Analytics and Tag Manager correctly inform about existing tags.

[kuasha420]

There’s a few E2E that selects element/waits for elements based on texts that is being changed here. Shouldn’t be a huge deal, just use new/different texts for those and it should be GTG. Cheers.

[felixarntz]

cc @kuasha420 This is the follow up issue for #5046.