Add GA event tracking for the Settings section

[techanvil]

Feature Description

GA events should be added to keep track of interaction with the Settings section, exclusing those events which are shared with the dashboard Setup CTA Banner (see #9493).

---

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
enable_groups	{viewContext}_audiences-setup-cta-settings	Click	User clicks "Enable groups"	Setup and error events relating to the CTA are defined in #9493, see the "{viewContext}_audiences-setup" event category
view_notification	{viewContext}_audiences-setup-cta-settings-success	Element visibility	User views the Audience Segmentation Setup Success notification on the Settings screen
confirm_notification	{viewContext}_audiences-setup-cta-settings-success	Click	User clicks "Show me" on the notification
dismiss_notification	{viewContext}_audiences-setup-cta-settings-success	Click	User clicks "Got it" on the notification
audience_widgets_enable	{viewContext}_audiences-settings	Click	User clicks the toggle to enable the audiences widget area
audience_widgets_disable	{viewContext}_audiences-settings	Click	User clicks the toggle to disable the audiences widget area

Implementation Brief

• [ ] In the SettingsCardVisitorGroups/SetupCTA component:
  • Create a handleEnableGroups() callback:
    • Call trackEvent( '${viewContext}_audiences-setup-cta-settings', 'enable_groups' ), followed by onEnableGroups(). Chain the two calls using trackEvent().finally().
  • Replace onEnableGroups with handleEnableGroups as the value for the onClick prop that is passed to Link.
• [ ] Refactor the SettingsCardVisitorGroups/SetupSuccess component to be a module with its own folder and an index.js file.
• [ ] Extract the rendered JSX content from the SetupSuccess component to a new component e.g. SetupSuccessContent.
  • Wrap the SetupSuccessContent component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• [ ] In the SettingsCardVisitorGroups/SetupSuccess component:
  • Create a version of SetupSuccessContent wrapped by the withIntersectionObserver() HOC, e.g. SetupSuccessContentWithIntersectionObserver. Render this in place of the existing SetupSuccessContent instance.
  • Pass the onInView callback prop to SetupSuccessContentWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-setup-cta-settings-success', 'view_notification' ).
• [ ] In the SetupSuccessContent component:
  • Amend the scrollToWidgetArea() callback:
    • Replace the call to dismissNotificationForUser() with a direct call to dismissItem() (alternatively, refactor the call to dismissItem() to a reusable function).
    • Call trackEvent( '${viewContext}_audiences-setup-cta-settings-success', 'confirm_notification' ) prior to the calls to dismissItem() and navigateTo(). Chain the calls using trackEvent().finally().
  • Amend the dismissNotificationForUser() callback:
    • Call trackEvent( '${viewContext}_audiences-setup-cta-settings-success', 'dismiss_notification' ) prior to the call to dismissItem(). Chain the two calls using trackEvent().finally().
• [ ] In the SettingsCardVisitorGroups component:
  • Amend the handleKeyMetricsToggle() callback:
    • Determine the action for the GA event: audience_widgets_enable when audienceSegmentationWidgetHidden is true, otherwise audience_widgets_disable.
    • Call trackEvent( '${viewContext}_audiences-settings', action ) prior to the calls to setAudienceSegmentationWidgetHidden() and saveAudienceSettings(). Chain the calls using trackEvent().finally().

Test Coverage

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

QA Brief

Changelog entry

[nfmohit]

Thank you for drafting the IB, @techanvil.

In the SettingsCardVisitorGroups/SetupCTA component:

• Create a version of SetupSuccessContent wrapped by the withIntersectionObserver() HOC, e.g. SetupSuccessContentWithIntersectionObserver. Render this in place of the existing SetupSuccessContent instance.

Just to confirm, did you mean SettingsCardVisitorGroups/SetupSuccess (assets/js/modules/analytics-4/components/audience-segmentation/settings/SettingsCardVisitorGroups/SetupSuccess/index.js) instead of SettingsCardVisitorGroups/SetupCTA?

[techanvil]

I certainly did, thanks for spotting another copy/pasta @nfmohit! I've updated the IB, cheers.

[nfmohit]

Brilliant, thanks Tom! IB ✅

[kelvinballoo]

QA Update ✅

Verified good. All events are being tracked as per the AC. Moving ticket to approval.

• enable_groups

  

• view_notification

  

• confirm_notification

  

• dismiss_notification

  

• audience_widgets_enable

  

• audience_widgets_disable