Update the design of the Key Metrics setup CTA banner.

[techanvil]

Feature Description

The current Key Metrics setup CTA banner looks like this:

But the dismiss CTA is in the bottom of the banner, which isn’t consistent with our new banners.

We have a new Figma design for the Key Metrics setup CTA banner:

This design should be applied to the banner in the plugin.

---

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

Acceptance criteria

• The https://github.com/google/site-kit-wp/blob/dc89f6c19d3d1103e5be3387c2739fe2955324bc/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js#L57 should be updated to match the new design in the Figma mockups for mobile, tablet, 960 specific screen design and desktop views.
• Note that the "I'll pick metrics myself" secondary CTA should be moved to the footer of the new CTA, and renamed to the "Choose your own metrics", and the "Maybe later" in the current CTA should be moved to the secondary CTA next to "Get tailored metrics".

Implementation Brief

• [x] Edit assets/js/components/KeyMetrics/KeyMetricsCTAContent.js and assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js
  • Adapt the markup for new design - swapping the CTA's, adding new text in the footer, replacing the SVG image with the one in figma, etc.
  • Note that mobile version has different SVG, which should be rendered conditionally based on the breakpoint , instead of the main one
  • New footer layout might need some tweaks in layout
• [x] Update assets/sass/components/key-metrics/_googlesitekit-key-metrics-setup-cta.scss
  • Adjust the styling to match new design - areas like font size, new footer section, position of the graphic, etc

Test Coverage

• Update VRT's

QA Brief

• Setup Site Kit with Analytics module
• Verify that setup key metrics widget is showing as per new figma designs across the screens
• Select 2 key metrics, then disconnect Analytics module
• Verify that small connect GA4 CTA is showing correctly (there is no new design for this, it should look correctly across the screens)
• Setup Analytics module and select 4 GA4 key metrics
• Disconnect the module
• Verify that big Analytics disconnected CTA is showing correctly across the screens - it follows same layout as default setup CTA just with different content, and footer CTA should be maybe later instead of select your own metrics

Changelog entry

• Update the design of the Key Metrics setup CTA banner.

[tofumatt]

As mentioned in Slack, this needs mobile designs/guidance before we can move it to IB, so leaving it in AC for now.

[tofumatt]

Mobile designs are ready so moved this to IB 👍🏻

[eugene-manuilov]

IB ✔️

[zutigrm]

Parking it in the meantime until it gets a sprint number, since I picked it up by mistake

[zutigrm]

Hi @sigal-teller , since this banner has a bit longer content, and we aim to cover desktop layout for screens starting at 960px and over, currently it's existing desktop sizes are too crowded, causing the banner to grow in height, and hence the Graphic to look out of place as it doesn't fit correctly in that crowded space. At the moment it is showing tablet layout on these screens. Would it be possible to add new screen with adjusted desktop layout for 960px screen width?

Current desktop layout works fine for screens starting at 1280px and over so that style will remain for these screens, new adjustment would be only for specific screen sizes between 960px to bellow 1280px.

cc: @eugene-manuilov

[sigal-teller]

Hi @zutigrm I assume you meant a total screen width of 960px, which means that when deducting the WP bar, there is a net width of 800px for the dashboard. It is possible to have a version of the desktop design like here. In this width it looks better then the tablet design. By the way, why aren't we implementing the banner design that I created for ACR already? It is very similar only includes a slightly different illustration and additional explanatory text, which can actually fit for KMW as well. This new design for KMW was created before, but it was a long time ago, so Im wondering if we're implementing it now why not use the ACR banner which will replace it?

[zutigrm]

@sigal-teller Yes perfect, that's nice solution.

By the way, why aren't we implementing the banner design that I created for ACR already? It is very similar only includes a slightly different illustration and additional explanatory text

That's a good point, thanks. Since the text is not mentioning directly the ACR - because this banner will be shown to all users, not hidden behind feature flag, I will adjust the current implementation to include new graphic and text from the ACR figma file.

[sigal-teller]

@zutigrm ok great, so I'll create the design for this this width in the ACR Figma file as well

[zutigrm]

@sigal-teller awesome, thank you!

[sigal-teller]

@zutigrm Done.

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified updated design of Key metrics Setup CTA and compared it with figma.
• Verified Key metrics Setup CTA widget design across different viewports.
• Verified Analytics disconnected design across different viewports.

@zutigrm

Issues -

1. Additional space showing below CTA under viewports from 601px to 959px.
2. Both KMW CTA and Analytics CTA are not showing correctly under tablets and mobile viewports.
3. CTA's are not loading correctly.

Loading issue -

https://github.com/user-attachments/assets/d21c2285-f8e2-4bb2-902d-e7c4f094b77e https://github.com/user-attachments/assets/1ad52373-10be-4d21-ae19-f8609ff636fc

Design issues

      

[zutigrm]

@mohitwp thanks for your observations. I updated the styles, regarding the spacing on tablet screens, there is an open issue for that #9106, I brought it up to the AC so we can work on it sooner. Couldn't include it as part of this issue, since it will needs some thoughts and digging during definition, since it is a grid style, affecting the overall display of KMW, but makes an empty space when banner is shown. There seems to be KMW that are just hidden with css, which might be causing this.

Regarding one screenshot - on 1024px for iPad PRO, I couldn't reproduce it on my end, but I decreased graphic a bit, let me know if it works on your end

[mohitwp]

QA Update ❌

@zutigrm I tested this on BrowserStack and found that the CTA banner image appears misaligned on Mac and iOS devices. However, it looks good on Windows and Android devices. The issue exists only on macOS and iPads across all browsers.

**Mac and iOS devices**    

[zutigrm]

@mohitwp Thanks, graphic has been fixed for mac OS and iOS

[mohitwp]

QA Update ✅

• Tested on main environment.
• Verified that CTA banner image misaligned issue on Mac and iOS devices is resolved now.
• Tested on Mac and iOS devices using BrowserStack.
• Verified updated design of Key metrics Setup CTA and compared it with figma.
• Verified Key metrics Setup CTA widget design across different viewports.
• Verified Analytics disconnected design across different viewports.
• Note : Spacing issue under tablets will be address under https://github.com/google/site-kit-wp/issues/9106

    

When 4 metrics are selected and analytics gets disconnect

   

When 2 metrics selected and analytics gets disconnect