Implement “Set your site goals” CTA button in admin settings when metrics have been picked

[jimmymadon]

Feature Description

If the user has “manually” selected metrics by themselves on the dashboard using the "Select Key Metrics" panel from #6258, a new CTA "link" in the Key metrics settings panel which still encourages the user to answer the User Input questionnaire should be added, similar to the CTA displayed when the user has not set up the widget to begin with.

---

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

Acceptance criteria

• If an authenticated admin has already selected their own metrics and did not answer the user input questionnaire, then a CTA should be displayed in the Key metrics admin settings section as per this Figma design.
• The CTA should be a link (or a button with a link style) to the User Input questionnaire with the text "Set your site goals"
• Clicking on the CTA should begin the User Input questionnaire.

Implementation Brief

• Once Improve fetching key metrics based on user selected metrics #6257 & Implement settings toggle to show/hide the Key metrics widget #6261 have been merged:
• Create assets/js/components/settings/SetGoalsCTA.js which exports the SetGoalsCTA functional component.
  • Use assets/js/components/notifications/CTA.js to create a Link with text and style it as per Figma Design
  • Use getUserInputState to check if user has selected goals
  • Use getUserPickedMetrics to check if user has selected key metrics (getUserPickedMetrics is part of Improve fetching key metrics based on user selected metrics #6257)
  • Use select( CORE_SITE ).getAdminURL( 'googlesitekit-user-input' ) to get a link to user goals questionnaire
  • Render SetGoalsCTA inside SettingsKeyMetrics (SettingsKeyMetrics is part of Implement settings toggle to show/hide the Key metrics widget #6261)
  • Add stories for SetGoalsCTA in assets/js/components/settings/SetGoalsCTA.stories.js

Test Coverage

• Add tests for SetGoalsCTA

QA Brief

• Enable the userInput feature flag and set up Site Kit.
• Don't answer User Input Questions.
• Go to the Admin settings page and ensure the Key Metrics section has the current CTA text Personalize your metrics.
• Set user-defined key metrics using the following code snippet in the browser console:

  (async () => {
  await googlesitekit.data.dispatch('core/user').setKeyMetricsSetting( 'widgetSlugs', ['kmAnalyticsTopTrafficSource', 'kmAnalyticsLoyalVisitors'] );
  await googlesitekit.data.dispatch('core/user').saveKeyMetricsSettings();
  })();

• Refreshing the page may be required.
• Ensure the CTA has changed to Set your site goals along with the toggle switch, which was implemented in Implement settings toggle to show/hide the Key metrics widget #6261

Follow-up fix

• Test the settings Admin with userInput feature disabled to ensure the error (or anything else related to user-input/key-metrics) is not triggered/visible

Changelog entry

• Update the messaging for site goals in the Site Kit admin setting when user metrics have been selected.

[tofumatt]

I'm confused: doesn't clicking on the "Set your site goals" button open the side panel to edit the key metrics widgets that should appear on the dashboard?

Where is the CTA in this screenshot/in the Figma design? I don't see a User Input CTA, just the "Set your site goals" button that I'd expect would open the Key Metrics widget edit screen from #6258.

[tofumatt]

Ohhh, wait, I understand, that button IS the CTA but is for opening User Input if the user has already selected metrics. That didn't quite register but now I get it 👍🏻

I'm just going to tweak the wording or highlight that case here so it's extra-clear, but ACs are good and I'll move this to IB 👍🏻

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ⚠️

@hussain-t I have a few observations:

I think these are likely not issues but would like confirmation.

1. When I set up Site Kit, no user input questions appear after set up. Is that correct behaviour? I am only questioning it because in the QAB it says Don't answer User Input Questions and previously when testing UserInput, they were appearing on set up, so want to make sure.

This might be an expected change because admittedly, I am a little behind with changes on this epic so need to catch up!

2. In the QAB it says that the text should read Set your site goal but it reads Set your site goals which is matches the AC. I suspect it is just a typo but didn't want to assume.

3. There difference in the figma design to what I see on my test site. The text for the Personalize your metrics and Set your site goals CTA is different. On Figma it is Google Sans Display but on my test site it is Google Sans Text

[hussain-t]

Thanks @wpdarren. Regarding your observations:

When I set up Site Kit, no user input questions appear after set up. Is that correct behaviour? I am only questioning it because in the QAB it says Don't answer User Input Questions and previously when testing UserInput, they were appearing on set up, so want to make sure.

This might be an expected change because admittedly, I am a little behind with changes on this epic so need to catch up!

Yes, it was changed as part of #5900.

In the QAB it says that the text should read Set your site goal but it reads Set your site goals which is matches the AC. I suspect it is just a typo but didn't want to assume.

Yes, that was a typo, my bad. I have updated the QAB.

There difference in the figma design to what I see on my test site. The text for the Personalize your metrics and Set your site goals CTA is different. On Figma it is Google Sans Display but on my test site it is Google Sans Text

By default, we use the Google Sans Text font for all the links. It was not specific for this one.

[wpdarren]

QA Update: ✅

Verified:

• On the Admin settings page the current CTA text Personalize your metrics appears.
• When the user-defined key metrics are set, the CTA has changed to Set your site goals along with the toggle switch.

Screenshots

[aaemnnosttv]

Reopening this one due to the error raised in settings when userInput is not enabled. #7136 (comment)

[wpdarren]

QA Update: ✅

Verified:

• No errors appear in the console on admin settings or main/entity dashboard when userinput is disabled.

Checked to make sure that the QAB passes when userinput is enabled.

• On the Admin settings page the current CTA text Personalize your metrics appears.
• When the user-defined key metrics are set, the CTA has changed to Set your site goals along with the toggle switch.