Tooltip not appearing on GA4 property within Analytics settings when only UA property connected

Bug Description

With ga4ActivationBanner feature flag enabled.

When you click on the Connect Google Analytics 4 button, the tooltip appears for a second and then disappears.

See screencast below.

https://user-images.githubusercontent.com/73545194/197425648-8a4e399e-94d4-4259-9fa7-64fe8f347089.mp4

We also noticed that when you click on the Edit link in Analytics settings the tooltip does not appear at all, even when the ga4ActivationBanner feature flag is enabled or not.

---

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

Acceptance criteria

• The tooltip pointing to the dropdown in Analytics settings for setting up GA4 should keep showing until the user dismisses it (i.e. not only flash for a split second).

Implementation Brief

• The general idea here is to display the Set up your Google Analytics 4 property here tooltip only when the Connect Google Analytics 4 CTA is clicked in SettingsActiveModule -> Header. We will implement that overruling any other logic, i.e. we will show tooltip when the said CTA is clicked, and close it when the edit screen is closed.
• In assets/js/modules/analytics/components/settings/GA4SettingsControls.js:
  • Remove the useEffect hook that was added here.
  • Locate the <JoyrideTooltip /> component and update its display conditions so that besides the current conditions, it only appears if GA4 is not connected. This can be checked using the isModuleConnected selector from the CORE_MODULES store, passing analytics-4 as the parameter. This will act as an extra measure to make sure we do not show the tooltip when it is not needed.
• In assets/js/components/settings/SettingsActiveModule/Footer.js:
  • Call the getValue selector from the CORE_FORMS store passing FORM_SETUP and enableGA4PropertyTooltip as parameters. Assign the selector to a new variable named enableGA4PropertyTooltip.
  • Create a new callback function that will dismiss the tooltip when the user closes the edit screen, say dismissGA4PropertyTooltip. In this callback function:
    • Return null early if the slug prop is not analytics, or enableGA4PropertyTooltip is false.
    • Dispatch the setValues action from the CORE_FORMS store with parameters FORM_SETUP and an object containing the enableGA4PropertyTooltip as key and false as value.
  • In the handleClose and handleConfirm functions, after the history.push() function call, check if the slug prop is analytics, and if so, call the new dismissGA4PropertyTooltip function.
• When adding a QA Brief, it should be noted that the outcome of #5921 should be checked as well to make sure the behaviour reported there is still fixed.

Test Coverage

• No tests need to be added/updated.

QA Brief

• Set Up analytics without GA4 property
• Go to settings and expand Analytics
• Tooltip should appear as per the screenshot
• The outcome of #5921 should be checked as well to make sure the behaviour reported there is still fixed.

Changelog entry

• Fix bug where the GA4 reminder tooltip in Analytics Settings was not appearing properly.

[wpdarren]

QA Update: ✅

@sashadoes the behaviour reported was due to smaller screen size. When I viewed on full-screen, the issue doesn’t occur. It makes sense why it places the tooltip above the GA4 property with the smaller resolution, so I will approve this.

Verified:

• Set Up analytics without GA4 property, and when clicking on the Connect GA4 button in settings, the tooltip appears as per the screenshot in the QAB. I tested this with and without a GA property on the Google analytics account.
• The outcome of https://github.com/google/site-kit-wp/issues/5921 was also checked as well and the behaviour reported there is still fixed.

[sashadoes]

Hi @wpdarren, thank you for the feedback. Unfortunately, I am struggling to reproduce this issue.

https://user-images.githubusercontent.com/16494321/200822563-27310f05-d95f-4853-8959-942f9274fba6.mov

Could you write detailed steps on how to reproduce and specify the environment? Thank you.