Implement Tag Manager snippet toggle in setup flow if there is an existing tag

This issue is the Tag Manager counterpart to the #4913.

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 main instructions in the Tag Manager setup flow should no longer include a note on an existing tag (i.e. the FormInstructions component should no longer consider whether hasExistingTag).
• The Tag Manager FormInstructions should furthermore have their copy adjusted as follows:
  • Please select your Tag Manager account and container below, the snippet will be inserted automatically on your site. --> Please select your Tag Manager account and container below. You can change these later in your settings.
  • Looks like your site is using paired AMP. Please select your Tag Manager account and relevant containers below, the snippets will be inserted automatically on your site. --> Looks like your site is using paired AMP. Please select your Tag Manager account and relevant containers below. You can change these later in your settings.
• In case of an existing tag, a toggle for the module’s useSnippet setting should show right below the dropdowns, accompanied by a small description text (effectively replacing the text that was removed from FormInstructions above):
  • The overall appearance of the toggle and text should match the one in the Analytics setup flow (see Figma and related #4913).
  • If the selected (primary) container ID (regardless of web or AMP, use getPrimaryContainerID() from #5044) is the same that the existing tag is for, the text should say: A tag {existingTagID} for the selected container already exists on the site. 
Make sure you remove it if you want to place the same tag via Site Kit, otherwise they will be duplicated. (where {existingTagID} is the existing tag GTM-..., which should match the selected container ID)
    • In this case, the toggle should be off by default which should already be the case based on the existing GTM useExistingTagEffect().
  • Otherwise, i.e. if the selected (primary) container ID (regardless of web or AMP, use getPrimaryContainerID() from #5044) is different from what the existing tag is for, the text should say: An existing tag {existingTagID} was found on the page. If you prefer to collect data using that existing tag, please select the corresponding account and property above. (where {existingTagID} is the existing tag GTM-..., which should differ from the selected container ID)
    • In this case, the toggle should be on by default which should already be the case based on the existing GTM useExistingTagEffect().

Implementation Brief

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

In assets/js/modules/tagmanager/components/common/FormInstructions.js:

• Remove the logic of hasExistingTag for existing tag case.
• Add a call to useExistingTagEffect hook.
• Replace the following copies:
  • Please select your Tag Manager account and container below, the snippet will be inserted automatically on your site. --> Please select your Tag Manager account and container below. You can change these later in your settings.
  • Looks like your site is using paired AMP. Please select your Tag Manager account and relevant containers below, the snippets will be inserted automatically on your site. --> Looks like your site is using paired AMP. Please select your Tag Manager account and relevant containers below. You can change these later in your settings.

Create and render UseSnippetSwitch component variants

As the text for UseSnippetSwitch needs to be changed for the usage in the Setup flow, but remain the same for the current usage in the Settings flow, we are going to create two variants, SetupUseSnippetSwitch and SettingsUseSnippetSwitch in assets/js/modules/tagmanager/components/common/ directory for use in each case.

• Refactor UseSnippetSwitch component with the following:

  • Remove the logic to display the toggle text.
  • Add a description prop so that renders the text in the appropriate place (where the text used to be).

• Create SettingsUseSnippetSwitch component with the following logic:

  • Add the text logic extracted from UseSnippetSwitch (previously). Render UseSnippetSwitch and pass the text in as the description prop.
  • In assets/js/modules/tagmanager/components/settings/SettingsForm.js replace the existing use of UseSnippetSwitch with SettingsUseSnippetSwitch.

• Create SetupUseSnippetSwitch component with the following logic:

  • Get the primary container ID using the getPrimaryContainerID() selector - which is being implemented in #5044.
  • Get the container ID using the getExistingTag() selector.
  • Render the UseSnippetSwitch component with the following cases:
    • If the primary container ID is the same as the (existing) container ID, the description text should say: A tag {existingTagID} for the selected container already exists on the site. 
Make sure you remove it if you want to place the same tag via Site Kit, otherwise they will be duplicated. (where {existingTagID} is the existing tag GTM-..., which should match the selected container ID).
    • Otherwise, i.e. if the primary container ID is different from the (existing) container ID, the description text should say: An existing tag {existingTagID} was found on the page. If you prefer to collect data using that existing tag, please select the corresponding account and property above. (where {existingTagID} is the existing tag GTM-..., which should differ from the selected container ID).

• Render SetupUseSnippetSwitch component in assets/js/modules/tagmanager/components/setup/SetupForm.js right before <ContainerNames />, here: https://github.com/google/site-kit-wp/blob/1ce59bef0fce0e3b0d331428bad0eae824224679/assets/js/modules/tagmanager/components/setup/SetupForm.js#L183-L184

Test Coverage

• No new tests are to be added.

QA Brief

• Manually add Tag Manager tag snippets to the site’s header.php.
• Start the Tag Manager Setup flow.
• Verify that the snippet switch appears below the dropdowns as per the AC.
• Ensure the snippet switch toggles OFF when selecting an account and a container that does match the existing tag.
• Ensure the snippet switch toggles ON when selecting an account and a container that does not match the existing tag.
• Ensure the toggle switch text is appropriate for both cases above as per the AC.
• Ensure the snippet switch can still be toggled manually.
• Verify the snippet text conforms to the AC.
• Ensure the settings flow remains the same as today i.e. the existing tag message should be displayed at the top and the toggle message should be the same as today.

Setup Flow

Settings Flow

Changelog entry

• Include snippet toggle in Tag Manager setup flow whenever there is an existing tag.

[tofumatt]

IB ✅

Thanks for the updates to this IB @hussain-t 👍🏻

[felixarntz]

@marrrmarrr and I finalized this today. We decided that for now we will place a toggle in this flow, similarly to Analytics. We discussed the possibility of discouraging use of the module when not placing the tag (since it does nothing else), but decided we’re not going to go in that direction at this point, as it shouldn’t be a major concern to the user.

Having the module can be potentially useful even if they use the existing tag, e.g. it helps clarify that Tag Manager is being used, or the settings could be accessed at any time for example to re-check about the existing tag, or to adjust the current configuration. cc @aaemnnosttv @kuasha420

Note that I’ve opened #5044 as a new prerequisite to parts of this issue.