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

[felixarntz]

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 Provide link in Analytics settings panel to update GA4 configuration and improve UI for related UA link  #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.

[eclarke1]

@Pratheep-lab I've created a task in Asana for this https://app.asana.com/0/1185360131189553/1200629922083182 where we can handle the UX recommendations.

[felixarntz]

@marrrmarrr I defined ACs based on what we had discussed 1-2 weeks ago, let's for now display two short "Edit in Analytics" links right next to the Analytics IDs.

cc @Pratheep-lab @eclarke1 This should get a UX review during the implementation, e.g. using Storybook.

[danielgent]

The current storybook story is enough. I could add another one for when there is no GA4 property but that seems out-of-scope for this ticket

[eugene-manuilov]

@danielgent, please, avoid using "PR as IB" approach. I know it's a big temptation to start coding instead of writing IB but we need to write IB first because sometimes things that seem obvious may change during IB reviews.

We can use "PR as IB" approach only for edge cases when we found something small that needs to be squeezed into the current release. But for regular tickets, we should go with our main procedure and create comprehensive IBs.

Please, update this ticket to have standard IB. You can leave a link to your PR at the end of IB.

[danielgent]

The AC is already a detailed list of what steps to do

I'm just going to paste the code into the IB then 🤷

I think I understand the concept of an IB for complex tickets (although I can't find other people doing this online) but this diff is tiny

[danielgent]

I've just added an IB. Either I've done it totally wrong, or I'm missing something, because it's way easier to read my annotated PR and look at the code, than read those bullet points 😄

It reminds me of podcasts trying to explain code and them lamenting that they could show it on a video much easier

[eugene-manuilov]

• Build the Url for this as per the AC
• Move this link up into the same div ...
• Create a new link similar to this and add it to the end of the same div ...

@danielgent could you, please, be more specific? What do you mean by "Build the URL for this"? Which link do you mean when you say "Move this link up into the same div..."? IB needs to be clear, so everyone can understand what we need to do there.

Build the Url for this as per the AC

When we compose URLs using string templates, we need to prepend the template with the escapeURI tag function to correctly encode parts of the URL. I know that there are some URL templates that don't use it, we will need to be fixed at some point. For now, please, update IB to mention that we need to use the escapeURI tag function for the compound path for the GA4 URL and to add it to the compound path for the existing UA URL.

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

We need to wrap the link with <p className="googlesitekit-settings-module__meta-item-data"> to make it have the same size.

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  )

We need to hide these <h5> tags on small screens to avoid displaying big gaps between the setting and the link.

[eugene-manuilov]

For screen readers, it should be more specific: "Edit Google Analytics 4 web data stream in Analytics"

@felixarntz, as far as I remember, we didn't want users to face the "web data stream" terminology in our UI. Did we change our minds?

[eugene-manuilov]

The AC is already a detailed list of what steps to do

Yes, sometimes AC contains too many technical details. But it doesn't mean that there is nothing to add to it in IB. We can refer to specific sections of AC when we write IB, but AC shouldn't be a replacement for our IB.

[eugene-manuilov]

@felixarntz here is a follow-up PR: #3864. Do you mind reviewing it?

https://google.github.io/site-kit-wp/storybook/pull/3864/?path=/story/analytics-module-settings--view-open-with-all-settings-ga4

[felixarntz]

Looks a lot better now!

[danielgent]

It's not aligned though @felixarntz @eugene-manuilov @aaemnnosttv 😄

On my original approach in the IB I used empty headers as a hack so that it all lined up

[wpdarren]

@felixarntz I was going to mention the spacing between the sentence and link but thought I was being too picky! 😃 It does look a lot better but I agree with @danielgent though it doesn't look aligned. Shall we open up a new ticket for that, unless we want to change this before the release?

[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.

[eugene-manuilov]

@felixarntz do you mind reviewing #3874?

[felixarntz]

@eugene-manuilov This now looks good to go on both mobile and desktop after #3874.