Add GA event tracking for the No Audiences Banner and Info Notice

[techanvil]

Feature Description

GA events should be added to keep track of interaction with the No Audiences Banner and Info Notice.

---

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	Label	Trigger	Condition	Description/details
view_banner	{viewContext}_audiences-no-audiences	one of "none-selected" or "no-longer-available"	Element visibility	User views the "no audiences" banner	none-selected: The user views the variant where they have never had a populated selection no-longer-available: The user views the variant where their previous selection is not longer available
select_groups	{viewContext}_audiences-no-audiences	one of "none-selected" or "no-longer-available"	Click	User clicks the "Select groups" or "Select other groups" CTA on the banner
change_settings	{viewContext}_audiences-no-audiences	one of "none-selected" or "no-longer-available"	Click	User clicks the link on the banner to navigate to Settings
view_notice	{viewContext}_audiences-info-notice	one of "new-visitors", "compare-metrics", "custom-audiences", "purchasers", "returning-visitors", "compare-new-returning", "compare-cities"	Element visibility	User views a message in the Info Notice that appears below the audience tiles	These slugs represent the various messages that will be shown in the info notice
dismiss_notice	{viewContext}_audiences-info-notice	one of "new-visitors", "compare-metrics", "custom-audiences", "purchasers", "returning-visitors", "compare-new-returning", "compare-cities"	Click	User clicks "Got it" on the notice

Implementation Brief

• [x] Wrap the NoAudienceBanner component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• [x] In the NoAudienceBannerWidget component:
  • Create a version of NoAudienceBanner wrapped by the withIntersectionObserver() HOC, e.g. NoAudienceBannerWithIntersectionObserver. Render this in place of the existing NoAudienceBanner instance.
  • Determine the label for the GA event: no-longer-available when didSetAudiences is true, otherwise none-selected.
  • Add an onInView callback prop to NoAudienceBannerWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-no-audiences', 'view_banner', label ).
• [x] In the NoAudienceBanner component:
  • Determine the label for the GA event: no-longer-available when didSetAudiences is true, otherwise none-selected.
  • Amend the onClick handlers for the "Select groups" / "Select other groups" Link instances:
    • Call trackEvent( '${viewContext}_audiences-no-audiences', 'select_groups', label ) prior to the call to setValue. Chain the two calls using .finally().
  • Amend the onClick handler for the "You can deactivate this widget in Settings" Link instance:
    • Call trackEvent( '${viewContext}_audiences-no-audiences', 'change_settings', label ) prior to the call to navigateTo. Chain the two calls using .finally().
• [x] Wrap the InfoNotice component in forwardRef() so a ref can be passed to it, and add the ref to its top-level rendered element.
• [x] In the InfoNoticeWidget component:
  • Create a version of InfoNotice wrapped by the withIntersectionObserver() HOC, e.g. InfoNoticeWithIntersectionObserver. Render this in place of the existing InfoNotice instance.
  • Determine the label for the GA events: one of new-visitors, compare-metrics, custom-audiences, purchasers, returning-visitors, compare-new-returning, or compare-cities, depending on the current notice to be displayed.
  • Add an onInView callback prop to InfoNoticeWithIntersectionObserver. In the callback, call trackEvent( '${viewContext}_audiences-info-notice', 'view_notice', label ).
  • Amend the onDismiss() callback:
    • Call trackEvent( '${viewContext}_audiences-info-notice', 'dismiss_notice', label ) prior to the call to dismissPrompt. Chain the two calls using .finally().
• [x] Update the JSDoc for withIntersectionObserver() to remove the point about removing the hook when useIntersection() has been replaced. The HOC is a useful abstraction around a common pattern of useIntersection() usage that we can keep for the longer term.

Test Coverage

• Add coverage for the above changes to the tests for NoAudienceBanner and NoAudienceBannerWidget.

QA Brief

• As a prerequisite for testing the events for each component:
  • 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.
  • Click on Enable groups to set the feature up.

No Audiences Banner

• Events with the no-longer-available label:
  • Archive all of the audiences for the connected property barring "All Users".
  • Refresh the Site Kit dashboard and open the Audience Selection Panel to trigger a resync of the available audiences.
  • The No Audiences Banner should appear, showing the "It looks like your visitor groups aren’t available anymore" message.
  • Verify the view_banner event is tracked with the label no-longer-available as per the AC.
  • Click on Select other groups in the banner.
  • Verify the select_groups event is tracked with the label no-longer-available as per the AC.
  • Click on Settings in the banner.
  • Verify the change_settings event is tracked with the label no-longer-available as per the AC.
• Events with none-selected label:
  • Continuing with the flow above, login as a second admin user and connect Site Kit. The second admin should have view access or higher for the connected property.
  • The No Audiences Banner should appear, showing the "You don’t have any visitor groups selected" message.
  • Verify the view_banner event is tracked with the label none-selected as per the AC.
  • Click on Select groups in the banner.
  • Verify the select_groups event is tracked with the label none-selected as per the AC.
  • Click on Settings in the banner.
  • Verify the change_settings event is tracked with the label none-selected as per the AC.

Info Notice

• Follow the QAB for https://github.com/google/site-kit-wp/issues/8139, repeating point 9 with the values of 0 to 6 inclusive for count in order to iterate through the sequence of Info Notice messages:

9. Once a notice is dismissed, it takes two weeks for the next notice to appear. To be able to see any notice immediately, try the following script in the browser console:

googlesitekit.data.dispatch('core/user').receiveGetDismissedPrompts( {
    'audience-segmentation-info-notice': {
        expires: Math.floor( Date.now() / 1000 ) - 10,
        count: 0 // Change this to any number of notice that you intend to see (0 - 6).
    }
} );

• Each time a message is shown:
  • Verify the view_notice event is tracked with the correct label as per the AC.
  • Click on Got it in the notice and verify the dismiss_notice event is tracked with the correct label as per the AC.

Changelog entry

• Add GA event tracking for user interactions with the No Audiences Banner and Info Notice.

[nfmohit]

Thank you for drafting the IB, @techanvil !

• Determine the label for the GA event: none-selected when didSetAudiences is true, otherwise no-longer-available.

To confirm, shouldn't this be the other way around, i.e. none-selected when didSetAudiences is false, otherwise no-longer-available?

Please confirm, thank you!

[techanvil]

Thanks for catching that @nfmohit! You are spot on, it should be the other way round. I've fixed the IB, back over to you! 🦅 👁

[nfmohit]

Thank you Tom! IB ✅

[kelvinballoo]

QA Update ✅

Verified the GTM events as per the table in ACs and all are being triggered accordingly. Moving ticket to approval.

• no-longer-available label

  view_banner:

  

  select_groups:

  

  change_settings:

  

• none-selected label

  view_banner:

  

  select_groups:

  

  change_settings:

  

• new-visitors label

  view_notice:

  

  dimiss_notice:

  

• compare-metrics label

  view_notice:

  

  dimiss_notice:

  

• custom-audiences label

  view_notice:

  

  dimiss_notice:

  

• purchasers label

  view_notice:

  

  dimiss_notice:

  

• returning-visitors label

  view_notice:

  

  dimiss_notice:

  

• compare-new-returning label

  view_notice:

  

  dimiss_notice:

  

• compare-cities label

  view_notice:

  

  dimiss_notice: