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.

[ankitrox]

@ivonac4 @techanvil Can we pull in this issue in the upcoming sprint as this issue still persists?

[techanvil]

Hey @benbowler, thanks for drafting this IB. It's mostly looking good, but rather than appending a pseudo-hash to the existing hash, and then having the somewhat brittle parsing of it with substring( 17 ), let's specify a query parameter instead.

For example, we could provide the query parameter scrollTo=visitor-groups, like so:

diff --git a/assets/js/googlesitekit/datastore/site/settings.js b/assets/js/googlesitekit/datastore/site/settings.js
index 02f2598f56..b7ca9b1732 100644
--- a/assets/js/googlesitekit/datastore/site/settings.js
+++ b/assets/js/googlesitekit/datastore/site/settings.js
@@ -205,14 +205,19 @@ const baseSelectors = {
 	 * @since 1.157.0
 	 *
 	 * @param {Object} state Data store's state.
+	 * @param {Object} args  Optional additional query arguments to add to admin URL.
 	 * @return {string} The URL for the admin settings page.
 	 */
-	getSiteKitAdminSettingsURL: createRegistrySelector( ( select ) => () => {
-		const baseURL = select( CORE_SITE ).getAdminURL(
-			'googlesitekit-settings'
-		);
-		return `${ baseURL }#/admin-settings`;
-	} ),
+	getSiteKitAdminSettingsURL: createRegistrySelector(
+		( select ) =>
+			( state, args = {} ) => {
+				const baseURL = select( CORE_SITE ).getAdminURL(
+					'googlesitekit-settings',
+					args
+				);
+				return `${ baseURL }#/admin-settings`;
+			}
+	),
 };
 
 const store = combineStores(
diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Header.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Header.js
index 09a3b11721..9e65e035b3 100644
--- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Header.js
+++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/Header.js
@@ -42,7 +42,9 @@ export default function Header( { closePanel } ) {
 	const isViewOnly = useViewOnly();
 
 	const adminSettingsURL = useSelect( ( select ) =>
-		select( CORE_SITE ).getSiteKitAdminSettingsURL()
+		select( CORE_SITE ).getSiteKitAdminSettingsURL( {
+			scrollTo: 'visitor-groups',
+		} )
 	);
 	const isSavingSettings = useSelect( ( select ) =>
 		select( CORE_USER ).isSavingUserAudienceSettings()

[techanvil]

Thanks for the update @benbowler, this IB LGTM!

IB ✅

[kelvinballoo]

QA Update ⚠️

Tested this and while it does scroll to the visitor groups section, it scrolls right to the toggle 'Display Visitor groups in Dashboard', as the video below:

https://github.com/user-attachments/assets/b8d8078e-768d-46d7-9f19-c9f286d229e4

It would be a better experience if it's scrolled a bit higher so that we can see the 'Visitor Groups' title, as per image below. Else, as it is currently, it might also give the impression that we have been scrolled to the 'Plugin Status' section.

[abdelmalekkkkk]

Great observation @kelvinballoo. While that does the job and follows the IB, I think moving the ID "visitor-groups" from the toggle container to the section container will make the title visible and thus offer a better experience. I'll address that shortly.

[techanvil]

Thanks @kelvinballoo and @abdelmalekkkkk!

The PR is merged, back to you for another pass, Kelvin.

[kelvinballoo]

QA Update ✅

Tested and it's looking good across browsers and also mobile. Videos attached for reference on Chrome Desktop.

https://github.com/user-attachments/assets/adf1b861-1d36-4bd3-b4ea-559e733ee6c1

https://github.com/user-attachments/assets/0707a1d2-8dec-40f7-b1f2-532226f9b4ba