Scroll to the Audience Segmentation Settings section when navigating there from links on the dashboard

[techanvil]

Feature Description

When following the Settings links on the Selection Panel and the "no audiences" banner, upon landing on the Settings page, the page should scroll down if necessary to ensure the Audience Segmentation Settings section is visible.

---

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

Acceptance criteria

• When following the Settings links on the Selection Panel and the "no audiences" banner, upon landing on the Settings page, the page should scroll down if necessary to ensure the Audience Segmentation Settings section (AKA Visitor groups) is visible.

Implementation Brief

• [ ] Update assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups.js:

  • [ ] Give this element the id visitor-groups. https://github.com/google/site-kit-wp/blob/e12d144418423b637879d8dd0f0d181acaa89b1b/assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups.js#L61
  • [ ] Get the hash value from the URL using, global.location.hash?.substring( 17 );. The substring 17 value, removes the #/admin-settings prefix in the hash in the URL.
  • [ ] Create a new useEffect that runs with the hash value as a dependency:
    • [ ] If the hash value is visitor-groups, use global.scrollTo with the following values:
      • [ ] top should use getContextScrollTop to get the y offset of the component with the id #visitor-groups
      • [ ] behaviour, should be set to smooth

• [ ] Update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Header.js, onSettingsClick function to navigate to ${ settingsURL }#/admin-settings#visitor-groups.

• [ ] Update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js (added in #8155, this file), to navigate to ${ settingsURL }#/admin-settings#visitor-groups.

Test Coverage

• No additional tests required.

QA Brief

Changelog entry

[techanvil]

Moved to Backlog until we get all the P1 issues done and/or the initial release out.