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().
  • Replace onEnableGroups with handleEnableGroups as the value for the onClick prop that is passed to SpinnerButton.
  • 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', 'tooltip_view' ).
  • Pass the onDismiss callback prop to AdminMenuTooltip. In the callback, call trackEvent( '${viewContext}_audiences-setup-cta-dashboard', 'tooltip_dismiss' ).
  • 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

• As a prerequisite for testing the events for each scenario:
  • Have a mechanism for checking tracked Analytics events ready, e.g. Tag Assistant or the Google Analytics Debugger Chrome extension.
  • Set up Site Kit with the audienceSegmentation feature flag enabled, tracking enabled, and Analytics connected using a property which is out of the gathering data state.

CTA events

• When the Setup CTA Banner appears, verify the view_notification event with category {viewContext}_audiences-setup-cta-dashboard is tracked as per the AC.
• Click on Enable groups to set up Audience Segmentation.
• Verify the confirm_notification event with category {viewContext}_audiences-setup-cta-dashboard is tracked as per the AC.
• Cancel out of the OAuth flow, and close the OAuth error modal to return to the Audience Segmentation Setup CTA.
• This time, click on Maybe later to dismiss the CTA.
• Verify the dismiss_notification event with category {viewContext}_audiences-setup-cta-dashboard is tracked as per the AC.
• The Settings tooltip should appear. Verify the tooltip_view event is tracked as per the AC.
• Close the tooltip. Verify the tooltip_dismiss event is tracked as per the AC.

Success notification events

• Set up Site Kit again and click on Enable groups to set up Audience Segmentation.
• Upon setting up Audience Segmentation, the success notification should appear.
• Verify the view_notification event with category {viewContext}_setup-success-notification-audiences is tracked as per the AC.
• Click on Show me on the notification.
• Verify the confirm_notification event with category {viewContext}_setup-success-notification-audiences is tracked as per the AC.
• Set up Site Kit again and click on Enable groups to set up Audience Segmentation.
• Click on Got it to dismiss the success notification.
• Verify the dismiss_notification event with category {viewContext}_setup-success-notification-audiences is tracked as per the AC.

Error modal events

OAuth error

• Set up Site Kit again and click on Enable groups to set up Audience Segmentation.
• Cancel out of the OAuth flow to return to Site Kit with an OAuth error.
• Verify the auth_error event is tracked as per the AC.
• Click Retry on the error modal and verify the auth_error_retry event is tracked as per the AC.
• Cancel the OAuth flow again to re-show the error modal. Click Cancel on the modal and verify the auth_error_cancel event is tracked as per the AC.

Insufficient permissions error

• Set up Site Kit again.
• Either remove view access to the connected GA property, or simulate the insufficient permissions error using the following Tweak Chrome extension configuration:
  • URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/sync-audiences.*
  • Enable the use of regular expression (.*)
  • HTTP Method: POST
  • Status code: 403
  • Response payload:

    {
      "code": 403,
      "message": "Insufficient Permissions Test Error",
      "data": {
        "status": 403,
        "reason": "insufficientPermissions"
      }
    }

• Click on Enable groups to set up Audience Segmentation and proceed through the OAuth flow.
• Upon returning to Site Kit the error modal should appear showing the insufficient permissions error message.
• Verify the insufficient_permissions_error event is tracked as per the AC.
• Click Request access on the modal and verify the insufficient_permissions_error_request_access event is tracked as per the AC.
• Click Cancel on the modal and verify the insufficient_permissions_error_request_cancel event is tracked as per the AC.

Generic error

• Set up Site Kit again.
• Simulate an API error other than the insufficient permissions error, for example a 500 error using the following Tweak configuration:
  • URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/sync-audiences.*
  • Enable the use of regular expression (.*)
  • HTTP Method: POST
  • Status code: 500
  • Response payload:

    {
      "code": "internal_server_error",
      "message": "Internal server error",
      "data": {
        "status": 500
      }
    }

• Click on Enable groups to set up Audience Segmentation and proceed through the OAuth flow.
• Upon returning to Site Kit the error modal should appear showing the generic error message.
• Verify the setup_error event is tracked as per the AC.
• Click Retry on the modal and verify the setup_error_retry event is tracked as per the AC.
• Click Cancel on the modal and verify the setup_error_request_cancel event is tracked as per the AC.

Changelog entry

• Add opt-in user activity tracking in the audience setup CTA widget and related setting areas.

[nfmohit]

IB ✅

[kelvinballoo]

QA Update ✅

Tested this and all the events are firing as expected.
Moving ticket to approval.

• view_notification

  

• confirm_notification

  

• dismiss_notification

  

• tooltip_view

  

• tooltip_dismiss

  

• view_notification

  

• confirm_notification

  

• dismiss_notification

  

• auth_error

  

• auth_error_retry

  

• auth_error_cancel

  

• insufficient_permissions_error

  

• insufficient_permissions_error_request_access

  

• insufficient_permissions_error_cancel

  

• setup_error

  

• setup_error_retry

  

• setup_error_cancel