Update design and layout of Analytics settings edit view

[mxbclang]

Feature Description

This a tiny nitpicky thing, but I'm working on some documentation related to the Exclude from Analytics setting at Settings > Site Kit > Connected Services > Analytics and I find the UX kind of confusing:

The other toggle-based settings on this screen follow a format of toggle + description. This one has a "title" (Exclude from Analytics), then a toggle + description. It makes it kind of hard to parse, especially since the title is not bolded or set off in any way.

My thinking would be remove the title and change the toggle text to "Exclude logged-in users from Analytics".

---

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

Acceptance criteria

• The layout and styling of the Analytics settings edit view should be updated based on this design
  • The primary points of focus here are on the separation of the sub/secondary field groups and their styling, as well as visual hierarchy with regards to typography
  • Note: some styles are inconsistent with the current design and can be disregarded (e.g. switch toggle colors, and text link colors)
  • Font sizes and colors should remain consistent with the settings edit views other modules where equivalents exist while preserving the relative differences in the design

Implementation Brief

• Using
  • assets/js/modules/analytics/components/settings/GA4SettingsControls.js
  • assets/js/modules/analytics/components/common/TrackingExclusionSwitches.js
  • assets/js/modules/analytics/components/common/AdsConversionIDTextField.js
  • assets/js/modules/analytics/components/common/AnonymizeIPSwitch.js
    • Wrap the markup rendered by above components within a div having the googlesitekit-settings-module__fields-group if not already so.
    • Add a heading h4 having the googlesitekit-settings-module__fields-group-title class name with the strings set as per the designs in Figma.
• Using assets/sass/components/settings/_googlesitekit-settings-module.scss,
  • Add styles for the googlesitekit-settings-module__fields-group-title class name as per the designs.

Test Coverage

• VRT might need to be updated

QA Brief

• Go to Sitekit > Settings > Connected Services > Analytics > Edit
• Verify the Analytics Settings Screen looks like the Figma Design.
• Verify the updated VRT images look like the Figma Design.

Changelog entry

• Improve Analytics settings screen with new headers and better help text.

[aaemnnosttv]

This one has a "title" (Exclude from Analytics), then a toggle + description. It makes it kind of hard to parse, especially since the title is not bolded or set off in any way.

I agree, but I think UX is working on redesigning the layout there anyways. I think styling the heading/labels differently would be a big improvement, not just for this one instance.

My thinking would be remove the title and change the toggle text to "Exclude logged-in users from Analytics".

The tricky thing here is that an additional control is revealed if this is toggled off so it makes more sense to have them as they are now. We probably just need better separation between groups of settings.

[sebastianmantel]

Here is a quick mock that I just made for this issue. I'll need to get the final titles tho...
Take a look and let mw know what do you think!

[sebastianmantel]

here is the figma file https://www.figma.com/file/f1I9Mc0ITE6Uk0qiTRbggK/GM2%2B?node-id=1011%3A261

[marrrmarrr]

Thanks @sebastianmantel ! This seems like a simple enough change (add some more separation lines and clear headings. @aaemnnosttv what are your thoughts on this approach to addressing this, should be pretty low effort, right?

[aaemnnosttv]

@marrrmarrr yes this should be relatively low effort I think (assuming I didn't just jinx it). Like @sebastianmantel said, I think we just need to solidify the names of the headings that we didn't have before.

I just took a quick look at the other modules as well and none of them seem to have the same problem so we shouldn't need to make changes to any of the others 👍

[aaemnnosttv]

IB ✅

[wpdarren]

QA Update: ⚠️

@derweili I have two observations, which could be that the Figma design is not accurate.

1. In the AC it didn't mention font style, but I noticed that on figma the headings, i.e. Google Analytics 4 is set to Google Sans Text but on my test site on develop branch, it is Google Sans Display. Just checking that this isn't an issue.

2. On the figma designs underneath the GA4 toggle, the text reads Activate Google Analytics 4 and place code on your site. along with a learn more link. On my test site, it says Site Kit will not add the GA4 code to your site. I suspect that the figma design linked in the AC, is for a new UI/UX, but wanted to check.

[derweili]

@wpdarren the purpose of this issue was to create a better visual structure on the settings screen. Primarily by introducing new headlines between the individual settings, but no larger styling changes.

The AC mentioned:

Note: some styles are inconsistent with the current design and can be disregarded (e.g. switch toggle colors, and text link colors)
Font sizes and colors should remain consistent with the settings edit views other modules where equivalents exist while preserving the relative differences in the design

Because of the AC is mentioning, some of the styles are inconsistent, I suspect that's exactly what you are experiencing.

Regarding your second question, I actually don't know why the text is different, as renaming settings ui wasn't part of this issue. Maybe thats also one of the inconsistencies mentioned in the AC?

[wpdarren]

QA Update: ✅

Verified

• The Analytics Settings Screen looks like the Figma Design.