Feature Description

GA events should be added to keep track of interaction with the Audience Selection Panel.

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.

Implementation Brief

• In the ChangeGroupsLink component:
  • Call trackEvent( '${viewContext}_audiences-sidebar', 'change_groups' ) in the openAudiencesSelectionPanel() callback.
• In the AudienceSelectionPanel component:
  • Call trackEvent( '${viewContext}_audiences-sidebar', 'audiences_sidebar_view' ) in the onSideSheetOpen() callback.
• In the AudienceSelectionPanel/Footer component:
  • Retrieve availableAudiences via the getAvailableAudiences() selector.
  • Add an onSaveSuccess callback prop to the rendered SelectionPanelFooter:
    • Determine the label for the GA event in the format user:123,site-kit:456,default:789 by mapping configuredAudiences to the number of audiences of the given type in the saved selection. The type can be determined by looking up the audienceType for an audience via availableAudiences; 123/456/789 are of course the number of audiences of the given type.
    • Call trackEvent( '${viewContext}_audiences-sidebar', 'audiences_sidebar_save', label ).
  • Add an onCancel callback prop to the rendered SelectionPanelFooter. In the callback, call trackEvent( '${viewContext}_audiences-sidebar', 'audiences_sidebar_cancel' ).
• In the AudienceSelectionPanel/ErrorNotice component:
  • Retrieve the selection panel's open state via the CORE_UI AUDIENCE_SELECTION_PANEL_OPENED_KEY value.
  • Create a variable, hasErrors which contains the value of errors.length > 0. This is to use in the useEffect() hook below to avoid passing errors as a dependency as errors will change more often.
  • Add a useEffect() hook.
    • Return early if the panel is closed or hasErrors is false.
    • If hasInsufficientPermissionsError is true, call trackEvent( '${viewContext}_audiences-sidebar', 'insufficient_permissions_error' ).
    • Otherwise, call trackEvent( '${viewContext}_audiences-sidebar', 'data_loading_error' ).
• In the AudienceSelectionPanel/RequestAccessButton component:
  • Add an onClick callback prop to the rendered Button. In the callback, call trackEvent( '${viewContext}_audiences-sidebar', 'insufficient_permissions_error_request_access' ).
• In the AudienceSelectionPanel/RetryButton component:
  • Add an onClick callback prop to the rendered Button. In the callback, call trackEvent( '${viewContext}_audiences-sidebar', 'data_loading_error_retry' ).
• In the AudienceCreationNotice component:
  • Retrieve the selection panel's open state via the CORE_UI AUDIENCE_SELECTION_PANEL_OPENED_KEY value.
  • Add a useEffect() hook.
    • If the panel is open and shouldShowNotice is true, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'view_notice' ).
  • Amend the onClick handler for the SpinnerButton component:
    • Determine the label for the event, which should be new-visitors or returning-visitors depending on which audience is being created.
    • Call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'create_audience', label ) prior to the call to handleCreateAudience. Chain the two calls using .finally().
  • Add another useEffect() hook.
    • Return early if the panel is closed.
    • If the conditions for showing the SubtleNotification are true (i.e. if ! hasAnalytics4EditScope && ! isEditScopeNoticeDismissed) call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'view_oauth_notice' ).
  • Amend the handleDismissEditScopeNotice() callback:
    • Call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'dismiss_oauth_notice' ) prior to the call to dismissItem. Chain the two calls using .finally().
• In the AudienceCreationSuccessNotice component:
  • Retrieve the selection panel's open state via the CORE_UI AUDIENCE_SELECTION_PANEL_OPENED_KEY value.
  • Add a useEffect() hook.
    • If the panel is open and showSuccessNotice is true, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences-success', 'view_notification' ).
  • Amend the onClick handler for the Button component:
    • Call trackEvent( '${viewContext}_audiences-sidebar-create-audiences-success', 'dismiss_notification' ) prior to the call to setValue. Chain the two calls using .finally().
• In the AudienceCreationErrorNotice component:
  • Create a variable, hasErrors which contains the value of errors.length > 0. This is to use in the useEffect() hook below to avoid passing errors as a dependency as errors will change more often.
  • Add a useEffect() hook.
    • Return early if hasErrors is false.
    • If hasOAuthError is true, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'auth_error' ).
    • Otherwise, if hasInsufficientPermissionsError is true, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'insufficient_permissions_error' ).
    • Otherwise, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'setup_error' ).
  • Add an onClick callback prop to the rendered Button. In the callback, call trackEvent( '${viewContext}_audiences-sidebar-create-audiences', 'insufficient_permissions_error_request_access' ).

Test Coverage

• Add JS test coverage for the above changes where tests exist for the affected components.

QA Brief

Changelog entry