Create the Acknowledgement Component

[techanvil]

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

[tofumatt]

Should we be using "GA4" as a shorthand for this? I don't think we actually refer to Google Analytics 4 as "GA4" anywhere user-facing in the plugin.

I've changed the user-facing text in the ACs from "GA4" to "Google Analytics 4". If that's no good just let me know @techanvil 🙂

[techanvil]

Hey @tofumatt - turns out, we do refer to it as "GA4" in a number of user-facing spots. I have found references in:

https://github.com/google/site-kit-wp/blob/develop/assets/js/modules/analytics/components/common/GA4Notice.js
https://github.com/google/site-kit-wp/blob/develop/assets/js/modules/analytics-4/components/settings/SettingsUseSnippetSwitch.js
https://github.com/google/site-kit-wp/blob/develop/assets/js/modules/analytics-4/components/setup/SetupUseSnippetSwitch.js
https://github.com/google/site-kit-wp/blob/develop/assets/js/modules/analytics-4/datastore/webdatastreams.js (possibly - not sure whether these messages are shown to the user)

And, also in the support page we link to: https://sitekit.withgoogle.com/documentation/using-site-kit/ga4/

Sooo... I mean, I don't see anything actually wrong with the change you've made, but we also certainly do use the abbreviation in a user facing way.

[techanvil]

Hey @jimmymadon, you have raised an interesting point in the IB about code reuse.

On reflection, I actually think this is a case where we should go a bit further. The code to interact with the WordPress Admin Menu is quite fiddly and I think it's something that would really benefit from not duplicating at all.

Furthermore the functionality of showing a tooltip pointing to Settings (or thinking more generally, the Admin Menu), now that it's being used in two places, it feels like there's a good chance that we'll want to use it more as time goes on.

With that in mind, I would suggest that we take the approach of extracting the related code from AdSenseConnectCTAWidget into a reusable component/module, say AdminMenuTooltip.

I've knocked up a quick draft PR, which could be implemented pretty much as-is or serve as a basis for doing so: #5654

If you are happy taking the approach in the PR, I think it would be fair to reference it in the IB without going into all the steps in detail, rather a point about extracting the behaviour and link to the PR should suffice, along with a point(s) about using it in the ReminderBanner...

What do you think?

[jimmymadon]

@techanvil Great refactor - thank you! Update the IB.

[techanvil]

Thanks @jimmymadon!

IB ✅

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

[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