Add GA event tracking for the Setup CTA Banner, including events which are shared with the Settings setup process

[techanvil]

Feature Description

GA events should be added to keep track of interaction with the Setup CTA Banner. Some events will be shared with the setup flow on the Settings screen.

---

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

Acceptance criteria

The following GA events should be tracked for the given actions. See the GA events sheet.

Event Name	Category	Trigger	Condition	Description/details
view_notification	{viewContext}_audiences-setup-cta-dashboard	Element visibility	User views the Audience Segmentation Setup CTA notification on the dashboard
confirm_notification	{viewContext}_audiences-setup-cta-dashboard	Click	User clicks "Enable groups" on the notification
dismiss_notification	{viewContext}_audiences-setup-cta-dashboard	Click	User clicks "Maybe later" on the notification
tooltip_view	{viewContext}_audiences-setup-cta-dashboard	Element visibility	User views the tooltip that appears when dismissing the notification	Event named for consistency with the corresponding event for KMW
tooltip_dismiss	{viewContext}_audiences-setup-cta-dashboard	Click	User clicks "Got it" on the tooltip	As above
view_notification	{viewContext}_setup-success-notification-audiences	Element visibility	User views the Audience Segmentation Setup Success notification on the dashboard	The category for this component is aligned with the conventions for the new notifications infrastructure, and the events should already be implemented as a result of the component migration specced in GH #9281
confirm_notification	{viewContext}_setup-success-notification-audiences	Click	User clicks "Show me" on the notification
dismiss_notification	{viewContext}_setup-success-notification-audiences	Click	User clicks "Got it" on the notification
auth_error	{viewContext}_audiences-setup	Element visibility	User views the OAuth error modal on the dashboard or Settings screen when an error occurs during setup
auth_error_retry	{viewContext}_audiences-setup	Click	User clicks "Retry" on the modal
auth_error_cancel	{viewContext}_audiences-setup	Click	User clicks "Cancel" on the modal
insufficient_permissions_error	{viewContext}_audiences-setup	Element visibility	User views the insufficient permissions error modal on the dashboard or Settings screen during setup
insufficient_permissions_error_request_access	{viewContext}_audiences-setup	Click	User clicks "Request access" on the modal
insufficient_permissions_error_cancel	{viewContext}_audiences-setup	Click	User clicks "Cancel" on the modal
setup_error	{viewContext}_audiences-setup	Element visibility	User views the generic error modal on the dashboard or Settings screen when an error occurs during setup
setup_error_retry	{viewContext}_audiences-setup	Click	User clicks "Retry" on the modal
setup_error_cancel	{viewContext}_audiences-setup	Click	User clicks "Cancel" on the modal

Implementation Brief

• Refactor the AudienceSegmentationSetupCTAWidget component to be a module with its own folder and an index.js file.
• Extract the main JSX content from the AudienceSegmentationSetupCTAWidget component to a new component e.g. SetupCTAContent.
  • Wrap the SetupCTAContent component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• In the AudienceSegmentationSetupCTAWidget component:
  • Create a version of SetupCTAContent wrapped by the withIntersectionObserver() HOC, e.g. SetupCTAContentWithIntersectionObserver. Render this in place of the existing SetupCTAContent instance.
  • Pass the onInView callback prop to SetupCTAContentWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'view_notification' ).
  • Create a handleEnableGroups() callback:
    • Call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'confirm_notification' ), followed by onEnableGroups(). Chain the two calls using .finally().
  • Amend the handleDismissClick() callback:
    • Call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'dismiss_notification' ) prior to the block where dismissPrompt() is called. Chain the call & code block using .finally().
  • Add a useEffect() hook:
    • If isTooltipVisible is true, call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'view_tooltip' ).
  • Pass the onDismiss callback prop to AdminMenuTooltip. In the callback, call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'dismiss_tooltip' ).
  • Pass the trackEventCategory prop (see Add GA event tracking for the "Top content" metric area of an Audience Tile #9495) to AudienceErrorModal with the value ${viewContext}_audiences-setup.
• In the SettingsCardVisitorGroups/SetupCTA component:
  • Pass the trackEventCategory prop to AudienceErrorModal with the value ${viewContext}_audiences-setup.

Note that the events with category {viewContext}_setup-success-notification-audiences were implemented via #9281, and the logic for the events with category {viewContext}_audiences-setup will have been implemented via #9495, with only the category itself needing to be passed into AudienceErrorModal in this issue. We should still test all of the listed events in QA.

Test Coverage

• Add JS test coverage for the above changes where tests exist for the affected components.
• The auth_error, insufficient_permissions_error and setup_error GA events can be excluded from the coverage as discussed here under Relevant technical choices: Add GA event tracking for the "Top content" metric area of an Audience Tile #9542 (comment)

QA Brief

Changelog entry