Existing GA4 tag detected but useSnippet not disabled

Feature Description

This is probably because the setting shown is for UA analytics. If the setting for GA4 is toggled here behind the scenes, it’s confusing for the user.

Related Asana task

---

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

Acceptance criteria

• If the ga4Setup feature flag is enabled and if the user has already set a GA4 property during the Analytics setup flow, the SettingsEdit panel of the Analytics module should modify the way that it displays the toggle for useSnippet.
  • It should in that case display two toggles, which appear next to each other, similar to how we have multiple toggles in a single row for the control to exclude certain user groups from tracking.
  • The first toggle should control the UA useSnippet setting, the second toggle should control the GA4 useSnippet setting.
  • The section label (i.e. label for the group of two toggles) should be: Let Site Kit place the Analytics code on your site
  • The first toggle should use label: Place Universal Analytics code
  • The second toggle should use label: Place Google Analytics 4 code
  • There should be a common description below which is conditional, one of (depending on the situation):
    • Site Kit will add the Universal Analytics and Google Analytics 4 codes automatically
    • Site Kit will add the Universal Analytics code automatically
    • Site Kit will add the Google Analytics 4 code automatically
    • Site Kit will not add the code to your site
• Just to clarify, in case GA4 is not set up yet, the existing UI should be kept as is - so it might make sense to create two high-level components to differentiate between.
• As part of this issue, no changes need to be made to SettingsView. That is worth doing, but can happen separately (slightly lower priority).

Update

• If there is an existing GA4 tag in the frontend with the same measurement ID as the selected GA4 property’s web data stream, the GA4 useSnippet setting should be disabled.
• If this happens during Analytics setup, the setting should be automatically disabled and saved upon form submission. If it happens during Analytics settings, the setting’s toggle should be toggled off, but the user should be required to save in order for the changes to take effect.

Implementation Brief

To start with, rename UseSnippetSwitch to UseUASnippetSwitch. Mentioning this here at the start to prevent confusion about which component is which 🙂 . All references to UseUASnippetSwitch can be thought of as references to UseSnippetSwitch, which should be renamed and imports updated.

Add new component to render both switches

Create a new functional component, assets/js/modules/analytics/components/common/UseUAandGA4SnippetSwitches.js Most of the code in assets/js/modules/analytics/components/common/UseUASnippetSwitch.js can be re-used, with the following additions / changes:

Add additional selector logic for GA4

• We also need to query the GA4 store’s getCanUseSnippet selector and getUseSnippet selectors, so 4 total constants need to be defined, e.g. useGA4Snippet, canUseGA4Snippet, useUASnippet and canUseUASnippet.
• Return null if either useGA4Snippet or useUASnippet are undefined.

Implement two Switches instead of one

We will need to render two Switch components instead of just one - one for GA4 and one for UA:

• The UA switch’s checked prop will reflect useUASnippet and its disabled prop will be !canUseUASnippet. The label will be 'Place Universal Analytics code'.
• The GA4 switch’s checked and disabled props will reflect the corresponding GA4 equivalents, and its label should be 'Place Google Analytics 4 code'
• Each Switch should have its own onClick handler (for example onUAChange and onGA4change). Using the onChange handler from the existing UseUASnippetSwitch as a template:
  • call setUseSnippet from the relevant store (you will likely want to alias them to make it easier to read, e.g.

  const { setUseSnippet: setUseUASnippet } = useDispatch( STORE_NAME );
  const { setUseSnippet: setUseGA4Snippet } = useDispatch( MODULES_ANALYTICS_4 );
  
  const onUAChange = useCallback( () => {
  	setUseUASnippet( ! useUASnippet );
  	// ...
  }, [ ... ] );
  
  const onGA4Change = useCallback( () => {
  	setUseGA4Snippet( ! useGA4Snippet );
  	// ...
  }, [ ... ] );
  

  • The UA handler will need to fire a trackEvent call as it does in UseUASnippetSwitch.js
• The switches should be rendered side by side (i.e. in a single row), with the UA switch on the right. See assets/js/modules/analytics/components/common/TrackingExclusionSwitches.js for an example.

Add description copy

Depending on which switch has been enabled, or whether both are enabled / disabled, render a description below the switches. It should read: - Both switches enabled: Site Kit will add the Universal Analytics and Google Analytics 4 codes automatically - UA enabled only Site Kit will add the Universal Analytics code automatically - GA4 enabled only: Site Kit will add the Google Analytics 4 code automatically - Both disabled: Site Kit will not add the code to your site

Refactor and rename existing snippet switch component

Inside assets/js/modules/analytics/components/common/UseUASnippetSwitch.js

• Change the label prop of the Switch component to read ‘Place Universal Analytics code’

Put it all together

Inside assets/js/modules/analytics/components/settings/SettingsForm.js:

• Add an import for the new UseSnippetSwitches component
• Determine if the ga4Setup feature flag is enabled by calling the useFeature hook
• Determine if the user has set a GA4 property by using the getPropertyID selector of the Analytics 4 module
• If the ga4Setup feature flag is enabled AND there is an existing GA4 property ID:
  • render the UseUAandGA4SnippetSwitches component
  • otherwise, render the (renamed) UseUASnippetSwitch component
• The legend above the switch components should read Let Site Kit place the Analytics code on your site (see how the Exclude from Analytics legend has been done)

Peripheries

• Add storybook coverage for the new permutations of the Analytics settings form which have been introduced here.
• Existing stories (e.g. https://google.github.io/site-kit-wp/storybook/develop/?path=/story/analytics-module-settings--edit-open-with-all-settings) may need updating.
• Update VRT images as necessary.

Test Coverage

• No new tests; existing ones should pass.

Visual Regression Changes

• As mentioned above, some images may need updating.

QA Brief

• Enable the ga4Setup feature flag
• Set up Analytics with a GA4 property
• Navigate to the Analytics settings panel and click ‘edit’
• You should see the two snippet switches (one for UA and one for GA4)
• If the ga4Setup feature flag is disabled and / or a GA4 property has not been chosen during set up, the settings form should revert to the previous structure, with a single snippet switch for UA. However, the copy should be updated (Place Universal Analytics code etc.) as per the ACs.
• There should be a corresponding story in storybook under Modules > Analytics > Settings > SettingsEdit > UA and GA4 tag snippet switches
• The existing stories under Analytics Module > Settings do not handle the GA4 edge cases and should just be showing the UA snippet switch with the updated copy (Place Universal Analytics code etc.) as per the ACs.
• Test the extra ACs under the “Update” section above. The tester plugin can be used to inject an existing tag with the same “G-xyzxyz” measurement ID that is present in the GA4 property you (intend to) connect.

Changelog entry

• Show separate UA and GA4 snippet toggles in Analytics Settings.

[felixarntz]

Thanks @eugene-manuilov @tofumatt @wpdarren for getting this through so promptly!

[eugene-manuilov]

@felixarntz I have created a follow-up PR that adds the missing functionality. Also, it turns out that the GA4 API now returns measurementID prefixed with G- even though the documentation still says that it returns without it. So, I have made the required changes to account for it.

Could you please review #3662?