Simplify Analytics UX for existing tags and GTM properties

[aaemnnosttv]

Feature Description

Building on the work started in #4702, this issue is about simplifying the remaining experience for existing tags and GTM properties.

---

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

Acceptance criteria

• Analytics setup and settings forms should no longer force-select values based on an existing tag
  • Any conditions based on this behavior should be updated
    E.g. “Please select the account information below…” is only shown when there is no existing tag because inputs are disabled in this case. Now these inputs will always be user-editable regardless if there is an existing tag or not.
• Notice components for existing tags and existing GTM properties should be combined into one

The PR for this issue should target the feature/existing-tag-simplification branch

Implementation Brief

For the Analytics module only

• Remove all use of hasExistingTag and getSingleAnalyticsPropertyID from AccountSelect and PropertySelect, so that these never show as disabled
  • Also ensure that the paragraph with “Please select the account information below…” is no longer rendered based on whether there is an existing tag (i.e. going forward it should only depend on whether there are any accounts)
• Incorporate ExistingGTMPropertyNotice into ExistingTagNotice, combining the two
  • The content in case of an existing GTM property should follow what is already in ExistingTagNotice, i.e. state that there is an existing GTM property and, if applicable, that it is the same one as the one selected here which is why then Site Kit won’t place the tag
  • While this adds even more conditions, this makes more sense than to have them split in two components because they are very closely related
  • It also allows us to remove the odd conditionals around whether to render one or the other throughout the codebase
  • This bundles even more conditions in one component then, but at least they are all somewhat straightforward to read and follow, while the surrounding components can use this in a simple way
  • Remove ExistingGTMPropertyNotice and anywhere that it’s rendered

Storybook

• Update Analytics setup and settings stories related to existing tags to properly reflect the correct state + messaging

Test Coverage

• Update test coverage as needed
  • Update Analytics setup "with-tag" E2E tests
• Remove any which are no longer needed or relevant

QA Brief

Existing Analytics tag:

• Add Google Analytics to a site manually using a UA tag and/or GA4 tag, adding the tag snippet into the theme's header.php file.
• Connect the Analytics module and verify the existing tag is recognised but the Account and Property dropdowns are not disabled, in both the setup and settings flows.

Existing GTM property:

• Add Google Tag Manager to a site manually, adding the GTM snippet into the theme's header.php file.
• Connect the Analytics module and verify the GTM tag is recognised with the following notice variants:

Existing GTM property, matches selected ID:

Existing GTM property, does not match selected ID:

Existing GTM property & GA4 tag:

• Add Google Tag Manager to a site manually, adding the GTM snippet into the theme's header.php file.
• Add Google Analytics to a site manually using a GA4 tag, adding the tag snippet into the theme's header.php file.
• Connect the Analytics module and verify the GTM tag is recognised with the following notice variants:

Existing GTM property & GA4 tag, both match selected IDs:

Existing GTM property & GA4 tag, property matches selected ID, tag doesn't:

Existing GTM property & GA4 tag, tag matches selected ID, property doesn't:

Existing GTM property & GA4 tag, do not match selected IDs:

Changelog entry

• Ensure that Analytics properties are no longer force-selected based on existing tags.

[felixarntz]

@aaemnnosttv IB almost ✅ , but similar to #4702 let's add a note on Storybook adjustments.

[felixarntz]

@eclarke1 @FlicHollis @aaemnnosttv Just leaving a note here that whenever this goes into a sprint/release, we should make sure it eventually lands in the same release as #4702, to not cause some weird "intermediate" user experience.

[felixarntz]

IB ✅

[techanvil]

Hi @aaemnnosttv, I have a question about the requirement to merge ExistingGTMPropertyNotice into ExistingTagNotice.

At present, the messaging for a pre-existing UA Analytics tag vs a pre-existing GTM tag is mutually exclusive, with the UA tag taking precedence. For example:

site-kit-wp/assets/js/modules/analytics/components/settings/SettingsForm.js

Lines 70 to 71 in 5f32888

	<ExistingTagNotice />
	{ ! hasExistingTag && <ExistingGTMPropertyNotice /> }

Do we want to retain this logic when merging the two components? Or, do we want to add extra GTM-related conditions to all of the existing notices in ExistingTagNotice, including when there is an existing UA Analytics tag? Needless to say, the latter adds complexity to the messaging and results in a fairly substantial number more conditions to accommodate.

It would also raise questions about the structure of the text. For example -

If there is an existing Analytics tag and GTM tag, and both match the selected property ID, do we need to mention them both in the text or can we abbreviate it by only mentioning one of them?

We'd potentially end up with sentences like this, and all the various permutations it suggests...

An existing Universal Analytics tag with the ID %1$s, an existing Google Tag Manager property with the ID %2$s and an existing Google Analytics 4 tag with the ID %3$s were found on your site. Since they refer to the same properties selected here, Site Kit will not place its own tags and rely on the existing ones. If later on you decide to remove these tags, Site Kit can place new tags for you.',

cc @felixarntz

[aaemnnosttv]

Good question @techanvil – I'm not entirely sure as the IB here is actually from @felixarntz 's original proposal. My guess is that the logic and wording would be mostly the same but merged into the same component.

@felixarntz is there any more nuance to that part of the AC or IB that could be clarified?

[felixarntz]

@techanvil @aaemnnosttv We should merge the two notice components in a way that maintains the current logic, i.e. any GTM property notice should only show if no existing tag notice applies already. So the merging is mostly to centralize that logic, rather than having to have a conditional display of two components everywhere we need it.

[techanvil]

Cool, thanks for clarifying that @felixarntz 👍

[eugene-manuilov]

@aaemnnosttv @felixarntz in the SettingsEdit component we have a check that forces to display the ExistingGTMPropertyError component instead of the settings form if there is a GTM tag that we can't manage (have no permissions to it). Do we need to remove it as well in the scope of this ticket or it should remain the same? Looks like we can remove it, can't we?

site-kit-wp/assets/js/modules/analytics/components/settings/SettingsEdit.js

Lines 87 to 92 in 398eaa0

	} else if (
	! hasExistingTag &&
	hasGTMAnalyticsPropertyID &&
	! hasGTMAnalyticsPropertyIDPermission
	) {
	viewComponent = <ExistingGTMPropertyError />;

[techanvil]

@aaemnnosttv @felixarntz in the SettingsEdit component we have a check that forces to display the ExistingGTMPropertyError component instead of the settings form if there is a GTM tag that we can't manage (have no permissions to it). Do we need to remove it as well in the scope of this ticket or it should remain the same? Looks like we can remove it, can't we?

site-kit-wp/assets/js/modules/analytics/components/settings/SettingsEdit.js

Lines 87 to 92 in 398eaa0

	} else if (
	! hasExistingTag &&
	hasGTMAnalyticsPropertyID &&
	! hasGTMAnalyticsPropertyIDPermission
	) {
	viewComponent = <ExistingGTMPropertyError />;

Hi @eugene-manuilov, I did wonder that myself, but then I noticed that ExistingGTMPropertyError is due to be removed as a result of the related ticket #4702 so I figured it's out of scope here...

[wpdarren]

QA Update: ⚠️

@techanvil I've spent a while trying to recreate what is in the QAB for Existing GTM property tests.

Here are the steps I took:

• I'm using the .zip file that Arafat created for me
• Brand New site. Created Google Tag Manager account and container manually.
• Added the head and body snippets in header.php for GTM.
• Connected GTM and selected the account and container to set up the module.
• I created a UA and GA4 account manually and added the snippets for both in header.php.
• I then connected Analytics module but and on the connect service screen there is no reference to GTM.

I tried with just UA code and both UA and GA4 code.

Am I misunderstanding something here?

[techanvil]

QA Update:

@techanvil I've spent a while trying to recreate what is in the QAB for Existing GTM property tests.

Here are the steps I took:

• I'm using the .zip file that Arafat created for me
• Brand New site. Created Google Tag Manager account and container manually.
• Added the head and body snippets in header.php for GTM.
• Connected GTM and selected the account and container to set up the module.
• I created a UA and GA4 account manually and added the snippets for both in header.php.
• I then connected Analytics module but and on the connect service screen there is no reference to GTM.

I tried with just UA code and both UA and GA4 code.

Am I misunderstanding something here?

Hi @wpdarren, I think I see what's happening here.

When there is both an existing GTM tag and an existing UA tag that have been inserted manually, the messaging for the UA tag takes precedence over the GTM message, and so the GTM tag is not mentioned (see earlier comments on this issue).

Therefore to reproduce the Existing GTM property tests, please try the steps you mentioned but without adding the UA snippet.

Hopefully that will resolve this for you, but please let me know if not. Cheers

[wpdarren]

QA Update: ❌

@techanvil I'm sending this back to Execution because I am unable to recreate the Existing GTM property of the QAB.

Here are the steps I took:

• I'm using the .zip file
• Brand New site. Created Google Tag Manager account and container manually.
• Added the head and body snippets in header.php for GTM.
• Connected GTM and selected the account and container to set up the module.
• I created a GA4 account manually and added the snippet in header.php. (Didn't create a UA property)
• I then connected Analytics module but and on the connect service screen there is no reference to GTM.

As you can see only the GA4 property is coming up in the message. In the QAB it suggests that the tag manager.

Side note: I also created a UA property manually, but didn't add the code to the header.php and tag manager still wasn't referenced.

[techanvil]

Hi @wpdarren, this is a bit of a mystery, as I've just tried this out again myself, on a new site and using the zip you linked to, and was able to view the expected message. I've not done anything outside of the steps you've described.

Perhaps it's best if we jump on a call to try to figure this out?

[wpdarren]

QA Update: ✅

Verified:

Existing Analytics tag:

• The existing tag is recognised but the Account and Property dropdowns are not disabled, in both the setup and settings.

Existing GTM property:

• The GTM tag is recognised with the following notice variants:
  • GTM property, matches selected ID
  • Existing GTM property, does not match selected ID

Existing GTM property & GA4 tag:

• The GTM tag is recognised with the following notice variants:
  • Existing GTM property & GA4 tag, both match selected IDs:
  • Existing GTM property & GA4 tag, property matches selected ID, tag doesn't
  • Existing GTM property & GA4 tag, tag matches selected ID, property doesn't
  • Existing GTM property & GA4 tag, do not match selected IDs

Screenshots