Update GA4 Activation Success Banner

[nfmohit]

Feature Description

The GA4 Activation - Success Banner will need to be updated according to the Figma design. The major updates are:

• Updating the banner copy.
• Updating the graphic.

Since the GA4 dashboard view isn't available right away, it might be a good idea to keep the update to the banner copy behind the ga4Reporting feature flag.

Here is the relevant part in the design doc.

Here is a screenshot for visual aid:

---

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

Acceptance criteria

• Since the description copy mentions switching the Site Kit dashboard, and the GA4 dashboard view isn't available yet, the description should only show the new copy if the ga4Reporting feature flag is enabled. Otherwise, it should keep showing the existing copy.
• The GA4 Activation - Success Banner should be updated to match this Figma design.
• The WinImage graphic should be updated according to the design.
• The copy in the description should be updated according to the text in the Figma design linked above. Note the "learn more" link's text should read "Learn more about Google Analytics 4" not "Learn more about GA4"
  • The link text should be changed for all versions of the component, eg. regardless of the ga4Reporting feature flag.
  • The link should continue to go to the same URL defined in the existing component.

Implementation Brief

Within assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SuccessBanner.js:

• Check if the ga4Reporting feature flag is enabled. If so replace the current description with the text as per Figma:
  • description: Google Analytics 4 has started collecting data for your site. As soon there is enough data, you'll be able to switch your Site Kit dashboard to show data from Google Analytics 4.
• Update learnMoreLabel as per Figma:
  • learnMoreLabel: Learn more about Google Analytics 4
• Export the new graphic as an SVG and save it in assets/svg/graphics/. Use this new SVG in place of the current SuccessGreenSVG component.
  • Navigate to the Figma and search for "Group 2609388" to highlight the group to export for the SVG.

Test Coverage

• No new tests needed.

QA Brief

• Activate GA4 using the GA4 activation banner with the ga4Reporting feature flag enabled.
• Ensure the new description copy is displayed per the AC/Figma design.
• Activate GA4 using the GA4 activation banner with the ga4Reporting feature flag disabled.
• Ensure the old description is displayed.
• Ensure the learn more label and the SVG are changed per the new design for both cases.
• Ensure the new story Modules > Analytics4 SuccessBanner > SuccessBanner with GA4 Reporting Enabled is as expected.

Changelog entry

• Update the graphic and copy on the GA4 Activation Success Banner.

[tofumatt]

Looks good, just added a point about updating another component with the same translation that's being changed here for consistency (that part will be done in #6538).

Moved to IB 👍🏻

[tofumatt]

IB ✅

[mohitwp]

QA Update ⚠️

@hussain-t I've noticed that new graph is not showing in mobile viewports (Width less than 600). Are we not going to show graph in mobile size viewports ?

[hussain-t]

Thanks for raising this, @mohitwp. IMHO, it looks much better without the graphic SVG on the smaller screens, as the image is more prominent. However, I would like to get @marrrmarrr opinion on this. This is how it looks on a smaller screen:

[marrrmarrr]

@hussain-t @mohitwp agreed that the mobile version looks better without the graphic. Do we need to apply this in other cases as well?

[hussain-t]

Thanks, @marrrmarrr. IMHO, yes, to keep it consistent. However, please note that some banners render the image on the left and some on the right.

[mohitwp]

QA Update ✅

• Tested on dev.
• The GA4 Activation - Success Banner should be updated to match this Figma design.
• Tested GA4activation banner set up when ga4reporting feature flag is enabled.
• Verified banner is appearing with new copy.
• Tested GA4activation banner set up when ga4reporting feature flag is disabled.
• Verified banner is appearing with old description.
• Verifed the learn more label and the SVG are changed per the new design for both cases.
• Verified the new story Modules > Analytics4 SuccessBanner > SuccessBanner with GA4 Reporting Enabled is as expected.