Create the Acknowledgement Component

Feature Description

Create the Acknowledgement Component. This will take the form of a tooltip, with the following text:

Title: You can connect Google Analytics 4 later here
Description: You can configure the Google Analytics 4 property inside the Site Kit Settings later.

This component will take a prop for the button text.

Display the Acknowledgement Component when postponing the GA4 Activation Banner:

• When clicking Remind me later on the Reminder Component:
  • Show the Acknowledgement Component with the button text set to Got it.
• When clicking Cancel on the Setup Component:
  • Show the Acknowledgement Component with the button text set to Remind me later.

From the Design Doc:

The Acknowledgement Component can be implemented using the Tooltip component created for the AdSense Connect CTA update - see https://github.com/google/site-kit-wp/issues/5260.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.754ql48d85ap

---

Acceptance criteria

• When clicking Remind me later on the Reminder Component, or Cancel on the Setup Component, an acknowledgement should be displayed, in the form of a a tooltip, with the following text:
  • Title: You can connect Google Analytics 4 later here
  • Description: You can configure the Google Analytics 4 property inside the Site Kit Settings later.
• The tooltip should have a dismiss button. Pressing it will dismiss the tooltip.
  • Having clicked Remind me later on the Reminder Component, the dismiss button text should read: Got it.
  • Having clicked Cancel on the Setup Component, the dismiss button text should read: Remind me later.
• The tooltip should point to the Settings menu item.

Implementation Brief

• This issue largely follows the same pattern within assets/js/modules/adsense/components/dashboard/AdSenseConnectCTAWidget.js so use it as a reference for each of the steps below. The reusable logic to display an AdminMenuTooltip has been extracted into a separate reusable component this draft PR to avoid duplicating the logic for this issue. Use this POC as a starting point and refer to how it is being used within AdSenseConnectCTAWidget.
• Create a constant in assets/js/modules/analytics-4/constants.js for ACTIVATION_ACKNOWLEDGEMENT_TOOLTIP_STATE_KEY that will be used as the key to persist the state of the AdminMenuTooltip (show/hide along with admin menu state).
• Within assets/js/modules/analytics-4/components/dashboard/ActivationBanner/ReminderBanner.js and SetupBanner.js:
  • Render the AdminMenuTooltip component with the dismissLabel prop set to “Got it” (for ReminderBanner) or “Remind me later” (for SetupBanner) as in the AC.

Test Coverage

• No new tests required.

QA Brief

• As for other GA4 Activation banner issues, setup UA but not GA4 for the banner to appear.
• On the first “Reminder” banner, click “Remind me later” and verify the tooltip appears as per the AC.
• Clear browser storage (session/cache) and re login. The banner will appear again. This time, click on “Setup” on the “Reminder” banner. This will take you to the “Setup” banner. Click “Cancel” and verify the tooltip appears as per the AC.
• As the AdSense Connect CTA has been refactored to share the common behaviour here, the “Maybe later” functionality of the AdSense Connect CTA should be regression tested to make sure it still works as expected.

Changelog entry

• Show a tooltip to acknowledge dismissing the GA4 Activation Banner.

[wpdarren]

QA Update: ✅

Verified:

• On the “Reminder” banner, when I click “Remind me later” the tooltip appears as per the AC.
• On the “Setup” banner, when I click “Cancel” the tooltip appears as per the AC.
• The “Maybe later” functionality of the AdSense Connect CTA still works as expected, the tooltip appears.
• Checked desktop and mobile. Usually tooltips do not appear on mobile but we made a decision for these to appear when the AdSense tooltip was setup.

Screenshots

[techanvil]

@jimmymadon just a heads up that I added a point to the QAB about regression testing the “Maybe later” behaviour of the AdSense Connect CTA due to the refactor.