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

  site-kit-wp/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js

  Line 57 in dc89f6c

  function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {

  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

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