Scaffold the Setup Component variants

[techanvil]

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 Scaffold GA4 Activation Banner "happy path" UI #5270) should be replaced with the fully-realised design - except for the dropdown and toggle controls (which will be implemented in another issue, see: Add the dropdown and toggle controls to "existing GA4 property" setup variants #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

[eugene-manuilov]

In assets/js/modules/thank-with-google/components/dashboard/ActivationBanner/SetupBanner.js:

@techanvil I believe this file should belong to the analytics-4 module, shouldn't it?

[techanvil]

In assets/js/modules/thank-with-google/components/dashboard/ActivationBanner/SetupBanner.js:

@techanvil I believe this file should belong to the analytics-4 module, shouldn't it?

Whooops, that was a copy/paste error. I've fixed it - thanks for spotting!

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ❌

@nfmohit I have a few observations:

1. No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site The font size of the title is 20px on figma design but 28px on my test site.

2. You can always add/edit this in the Site Kit Settings. The font size of the text is 16px on the figma but 14px on my test site.

This applies to both of the screens: 1) Set up Google Analytics 4 now to join the future of Analytics and 2) No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site

3. The alignment of the notification does not appear to be correct. If you look at the figma design, the title, description and CTA button are aligned to the Google Site Kit icon. On my test site it's not. The notification appears to have more padding/margin around it too. Compare it with the first screen Set up Google Analytics 4 now to join the future of Analytics and you'll see the differences.

Figma design

Test site

[nfmohit]

Thank you for your findings, @wpdarren!

For issues 1 & 2, the implemented font sizes reflect the GM2+ styles in order to keep them consistent with the other Banner Notifications. However, for the footer text, even though it is newly introduced in this task, I decided to keep it consistent with the existing paragraph font size, so that it doesn't look bigger than the description text in any other case.

For issue 3, you're right. I'm currently working on #5276 and have included a fix for it there. Would that work?

CC: @techanvil to validate my points, thank you!

[techanvil]

Hey @nfmohit, thanks for the tag.

1. Actually, I do think we need to reduce the font size for the title here. Notice that in Figma, the font size for the title on the Reminder component is larger than the Setup component:

As it happens the font sizes in Figma are 28px for the Reminder vs 20px for Setup, so I think 20px would be the right value to use in this case.

2. Your reasoning makes sense for the footer text, we want to be consistent with other Banner Notifications, which have description text with 14px font size. Keeping the footer text the same size as the description text would in fact be consistent with the Figma design. So 14px does look like the correct size here.

3. You may want to reassess this considering point 1 also needs a fix... Maybe a followup PR would be more appropriate but if you prefer to roll it into Add the dropdown and toggle controls to "existing GA4 property" setup variants #5276 and @wpdarren is happy with that too, that sounds perfectly OK to me. If you do take the followup PR route feel free to ping me for a review.

[wpdarren]

@nfmohit @techanvil I am happy to go with whatever is easier for you. I can include these as known issues that will be fixed in 5276.

[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!

[wpdarren]

QA Update: ✅

Verified:

• The banner displayed matches the texts in the AC for the different scenarios.

Screenshots

Note: there are some differences in the FIgma designs which were highlighted in this ticket here. We decided that these will be fixed within 5276, so will check the styling when this is merged.

[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 #5276 and a followup PR to that issue has been created to fix it: #5793