Provide link in Analytics settings panel to update GA4 configuration and improve UI for related UA link

In the Analytics settings panel (in view-only state), there is currently a long message with a link that points to the Analytics frontend for the currently active Analytics property and its view.

Now that users can also have a GA4 property configured there, this message is confusing, as it appears below all of those settings while still only focusing on UA. We will now need two links instead of just the one. In addition, it’s a bit strange to have a long sentence as a complete link anyway. Let’s revisit this UI.

Screenshot:

A potential solution would be:

• Display a small “Edit (Universal Analytics configuration) in Analytics” external link for the UA property on the right of the three UA values.
• Display a similar small “Edit (Google Analytics 4 configuration) in Analytics” external link for the GA4 property on the right of the two UA values.

cc @Pratheep-lab

---

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

Acceptance criteria

In the Analytics settings view:

• Remove the link “You can make changes to this view…” and instead place a short link (with external indicator) to the same URL on the right side of the “View” value.
  • It should link to https://analytics.google.com/analytics/web/?authuser={googleEmailAddress}#/a{accountID}w{uaPropertyID}p{viewID}/admin/view/settings (same as the previous “You can make changes to this view…” link)
  • It should say “Edit in Analytics”
  • For screen readers, it should be more specific: “Edit Universal Analytics configuration in Analytics”
• If a GA4 property is also connected, display a similar link on the right side of the “Measurement ID” value:
  • It should link to https://analytics.google.com/analytics/web/?authuser={googleEmailAddress}#/a{accountID}p{ga4PropertyID}/admin/streams/table/{webDataStreamID}
  • It should say “Edit in Analytics”
  • For screen readers, it should be more specific: “Edit Google Analytics 4 configuration in Analytics”
• The links should both appear in the same vertical position and with the same font-size as the individual setting values (i.e. the IDs that display right under all the labels).
• The changes should be available/previewable in Storybook.

Implementation Brief

• Continue and merge PR here https://github.com/google/site-kit-wp/pull/3766

Using assets/js/modules/analytics/components/settings/SettingsView.js

In order to build the GA4 Url

• Get the webDataStreamID from select( MODULES_ANALYTICS_4 ).getWebDataStreamID()

• Build the Url like editViewSettingsURL but with the same Url structure as the AC (passing this into getServiceURL)

• Update the text for the existing UA link as per the AC

These links should be encoded with escapeURI (requires updating existing UA link)

• Move this link up into the same div .googlesitekit-settings-module__meta-items as containing the UA info
• Create a new link similar to this and add it to the end of the same div as the .googlesitekit-settings-module__meta-items of the GA4 info
• Use the new GA4 link here
• Set the text for this GA4 link as per the AC

In order to line up the text for both these links

• add empty <h5>s at the top of each Link’s googlesitekit-settings-module__meta-item (just containing a  ).
• these <h5>s should be hidden on mobile

To style the Links to be the same size as the rest of the text

• add a new class .googlesitekit-settings-module__inline-link to the Links (through the prop className)
• Add a new rule to assets/sass/components/settings/_googlesitekit-settings-module.scss

.googlesitekit-settings-module__inline-link {
    font-size: 1rem;
}

Test Coverage

• There should be no changes to existing tests

Visual Regression Changes

• There should be no changes to existing VRTs

QA Brief

• Connect Site Kit to an Analytics account that has a GA4 and a UA property
• Go to Analytics Settings page
• Observe new changes with new links as per AC

Changelog entry

• Add and update deep links on Analytics settings view to edit the UA property view and GA4 measurement ID.

[eugene-manuilov]

@felixarntz do you mind reviewing #3874?

[felixarntz]

@wpdarren @danielgent @eugene-manuilov @aaemnnosttv Let’s try to fix it before the release on Monday, but without any hacks please 😃

We may need to ensure the line height is the same despite the smaller font size? Alternatively, let’s change the font size back to what it originally was (i.e. remove the --tiny class) - although I like the current version where the link is not that huge.