Scaffold the Setup Component variants

Feature Description

Prepare the Setup Component variants based on the presence of an existing GA4 property in the user’s Analytics account (“existing GA4 property”) and/or existing manually inserted tag on the page (“existing tag”).

• No existing GA4 property, no existing tag.
  • CTA button: Create property.
• Existing GA4 property, no existing tag.
  • CTA button: Connect.
• Existing GA4 property, existing tag.
  • CTA button: Connect.
• No existing GA4 property, existing tag.
  • CTA button: Create property.

Ensure the relevant variant is displayed, showing the text as per the design. If necessary, modify the BannerNotification component to allow content to be displayed below the CTA - a footer prop could be appropriate.

However do not implement the dropdown or toggle controls for the “existing GA4 property” variants, they will be added separately.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.2g0r7ejoqctz
• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1549

---

Acceptance criteria

• The placeholder version of the Setup Component (see #5270) should be replaced with the fully-realised design - except for the dropdown and toggle controls (which will be implemented in another issue, see: #5276). For reference, see Figma.
• For each variant display text as follows.
  • No existing GA4 property, no existing tag.
    • Title: No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site
    • CTA button: Create property.
    • Footer: You can always add/edit this in the Site Kit Settings.
  • Existing GA4 property, no existing tag.
    • Title: Connect the Google Analytics 4 property that’s associated with your existing Universal Analytics property
    • CTA button: Connect.
    • Footer: You can always add/edit this in the Site Kit Settings.
  • Existing GA4 property, existing tag.
    • Title: Connect the Google Analytics 4 property that’s associated with your existing Universal Analytics property
    • CTA button: Connect.
    • Footer: You can always add/edit this in the Site Kit Settings.
  • No existing GA4 property, existing tag.
    • Title: No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site
    • CTA button: Create property.
    • Footer: A GA4 tag {property_ID} is found on this site but this property is not associated with your Google Analytics account. You can always add/edit this in the Site Kit Settings.

Implementation Brief

In assets/js/components/notifications/BannerNotification/index.js:

• Add an optional footer prop of type PropTypes.node.
• If footer is provided, render it within a new Row at the end of the Grid.

In assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.js:

• To check for an existing GA4 property, use the MODULES_ANALYTICS_4 store’s getMeasurementID selector.
• To check for an existing tag, use the MODULES_ANALYTICS_4 store’s getExistingTag selector.
• For each variant described in the AC, set the corresponding BannerNotification props:
  • title with the specified Title text.
  • ctaLabel with the specified CTA button text.
  • footer with the specified Footer text.
• The footer may benefit from wrapping in a paragraph p for styling.

Make any styling updates needed.

• BannerNotification styles can be found in assets/sass/components/global/_googlesitekit-publisher-wins.scss
• Consider adding assets/sass/components/activation/_googlesitekit-ga4-activation-banner.scss if it makes sense to do so.

Test Coverage

• Add Storybook stories for the new Activation Banner variations and add to the VRT suite.

QA Brief

• Activate the ga4ActivationBanner feature flag from the tester plugin.
• Go to the Site Kit Dashboard.
• Click on Set up now in the displayed banner.
• Verify that the banner displayed afterwards matches the text in the AC and designs in Figma (do not that due to the GM2+, some styles may be different).
• Verify the Modules/Analytics4/ActivationBanner/SetupBanner story displays correctly.

Changelog entry

• N/A

[techanvil]

Adding a note to mention that the IB and subsequent implementation was a bit wrong here and we should have been checking the result of the analytics-4 getProperties selector to check for an existing property/properties, rather than getMeasurementID.

This has come up while QAing https://github.com/google/site-kit-wp/issues/5276 and a followup PR to that issue has been created to fix it: https://github.com/google/site-kit-wp/pull/5793

[nfmohit]

Thank you for the review, @techanvil!

@wpdarren That would be fab! I’m already working on #5276 and I have already included the fixes there. Thank you!