Implement default Snippet Toggle behavior when there is an existing GTM property

Feature Description

We should implement logic (either in useExistingTagEffect or somewhere else) that turns on/off Snippet Toggle when there’s an existing GTM property. It should behave similarly to #4913.

---

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

Acceptance criteria

Some background information: The ACs here mostly update the Tag Manager enforcement behavior to be GA property-specific, rather than apply regardless of which GA property is used in Tag Manager. For the time being, we will keep using this approach, i.e. we will not incorporate the Tag Manager tag into a useExistingTagEffect-like handler. The useSnippet setting of GA should for now remain untouched in favor of sticking with the canUseSnippet filter control. This ensures that, if the Tag Manager module is deactivated again later, the Analytics snippet is placed again.

• The googlesitekit_analytics_can_use_snippet filter should be enhanced to receive the current UA property ID as second parameter.
  • In the case of the option default being used, it should simply pass an empty string since in that case no property ID is set.
• The Tag Manager usage of that filter should be adjusted to only set the value to false if the GA property in Tag Manager is set and is the same one as the GA property in the Analytics module (i.e. the one passed to the filter, see above).
• Since this is now a bit more dynamic based on taking the current UA property ID into account, that needs to be reflected on the client-side as well. Therefore, the analytics store’s getCanUseSnippet selector should be re-implemented as an actual selector, rather than just using the generated selector that directly returns the value of the canUseSnippet setting.
  • It should first call getSettings to get the Analytics settings.
  • It should then check if the tagmanager module is active and whether the modules/tagmanager store is loaded.
  • If it both conditions are true, it should call that store’s getGAPropertyID selector to get a potential GA property ID within Tag Manager, and if there is one, compare it to the current UA propertyID in Analytics. If they match, it should return false, otherwise it should return true.
  • If one of the conditions is false, it should just return the value from the canUseSnippet.
• The Analytics SetupUseSnippetSwitch component should include the same check present in the module’s SettingsUseSnippetSwitch component: If canUseSnippet is false, the same text should be displayed (The code is controlled by the Tag Manager module.).
• Both the SetupUseSnippetSwitch and the SettingsUseSnippetSwitch should be updated to also display the toggle as off when canUseSnippet is false, without modifying the useSnippet setting though. In other words, canUseSnippet overrides useSnippet, while the latter setting should remain unmodified.
• The result from the changes above should be that the snippet toggle is always displayed as visually disabled, with the value as off, and accompanied by a corresponding text when there is a Tag Manager GA property that is the same as the selected UA property.

Implementation Brief

in Google\Site_Kit\Modules\Tag_Manager class:

• in the can_analytics_use_snippet method:
  • Take ua_property as the second param which is empty string by default.
  • Return false if the gaPropertyID === $ua_property_id
  • Return original_value otherwise.
• in the register method:
  • Update the add_action hook call of googlesitekit_analytics_can_use_snippet to receive 2 arguments.
    • change add_action to add_filter as it’s a actually a filter.
    • add_filter( 'googlesitekit_analytics_can_use_snippet', $this->get_method_proxy( 'can_analytics_use_snippet' ), 10, 2 );

In Google\Site_Kit\Modules\Analytics\Settings class:

• In the register method:
  • Inside the callback of default_option_* filter, pass empty string as the third parameter of googlesitekit_analytics_can_use_snippetfilter. ie.apply_filters( ‘googlesitekit_analytics_can_use_snippet’, true, ‘’ );`
  • Inside the callback of option_* filter, pass property_id as the third parameter of googlesitekit_analytics_can_use_snippetfilter. ie.apply_filters( ‘googlesitekit_analytics_can_use_snippet’, true, $property_id );`

In assets/js/modules/analytics/datastore/base.js:

• Re implement getCanUseSnippet as a REAL selector.
  • See assets/js/modules/tagmanager/datastore/base.js for an example on how to override generated store selector.
  • Using createRegistrySelector function, redefine the getCanUseSnippet selector.
  • Check if tagmanager store is available by checking the value of isModuleConnected selector of CORE_MODULES store.
  • Check if the Tag Manager Snippet is enabled using the useSnippet selector.
  • If Tag Manager is connected and it’s snippet is enabled, get the potential UA property within GTM using getGAPropertyID selector.
    • If it’s available and isValidPropertyID, compare it with the propertyID of analytics module.
      • return false if both property IDs match.
      • return true otherwise.
  • Return the value of canUseSnippet otherwise.

In assets/js/modules/analytics/components/common/SetupUseSnippetSwitch.js:

• Get canUseSnippet using the newly reimplimented selector.
• Return null from the component when there’s no existingTag or the value of canUseSnippet is undefined or true
• Render the UseSnippetSwitch with the same copy as used in SettingsUseSnippet of the same module when canUseSnippet === false.
• Update all usage of the component to be rendered unconditionally.

In assets/js/modules/analytics/components/common/UseSnippetSwitch.js:

• Update the checked prop of the switch component to be false when canUseSnippet === false. ie. checked={ canUseSnippet === false ? false : useSnippet }
• Update the disabled prop to be disabled={ canUseSnippet === false }

Test Coverage

• Update all the failing PHP and JS tests.

QA Brief

• Add an UA tag inside the Tag Manager Container.
• Make sure both Analytics and Tag Manager are Completely disconnected. (Incomplete setup will pose problems, ie. neither module should be in Connected Modules. Reset site kit if needed.)
• Attempt to setup Tag Manager with same container.
• See that There’s a Continue to Analytics Setup Blue button and the following copy on top of the page.
  • Copy: Looks like you’re already using Google Analytics within your Google Tag Manager configuration. Activate the Google Analytics module in Site Kit to see relevant insights in your dashboard.
• Click on the Blue CTA to continue to Analytics Setup.
• See that the AC is met there.

Changelog entry

• Update Analytics snippet toggle behavior to be disabled when the same property is set in the Tag Manager container.

[aaemnnosttv]

• The value of the toggle itself (i.e. whether it’s toggled on or off) should not change though, it should just be shown as disabled.

@felixarntz I think if canUseSnippet is false, the toggle should be disabled and the value should be off (indicating that the Analytics snippet will not be output). The important thing I think you’re getting at is that the useSnippet setting value in the store does not change as a result.

That is, if canUseSnippet is false, if useSnippet is true, the toggle would still show as both disabled and toggled off, but useSnippet in the store would be unchanged. Does that make sense?

E.g.

<Switch
    value={ canUseSnippet === false ? false : useSnippet }
    disabled={ canUseSnippet === false }
/>

[felixarntz]

@aaemnnosttv

• The Tag Manager usage of that filter should be adjusted to only set the value to false if the GA property in Tag Manager is set and is the same one as the GA property in the Analytics module (i.e. the one passed to the filter, see above).

@felixarntz it should preserve the condition that this only applies when the GTM snippet is enabled, correct?

Correct, that should still apply, good point. The GTM useSnippet setting has to be true for Tag Manager to override the Analytics snippet. If it’s false, Analytics getCanUseSnippet should return the regular true no matter what.