Trigger the custom GA view_notification event only when the banner notifications are visible

[hussain-t]

Bug Description

Currently, some banner notifications trigger the custom GA view_notification event using the useMount hook. However, the view_notification event will be triggered even if the banner notification is not displayed due to the respective component returning null if the data is unavailable.

The above event should be triggered if the respective banner notification is displayed.

Steps to reproduce

1. Go to the Site Kit dashboard.
2. Ensure the Google Analytics Debugger is enabled.
3. Open the dev tools->console and filter by view_notification.
4. Notice some GA events are triggered even though respective banner notifications aren't displayed. For example, mainDashboard_wp52-version-notification is triggered.

---

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

Acceptance criteria

• All the banner notifications that trigger the custom GA view_notification event should be triggered if the respective banner notification is displayed. The following notification events should be checked to only send when the component actually renders and doesn't return null

  • site-kit-wp/assets/js/components/activation/activation-app.js

    Line 62 in 5841f2b

    trackEvent( viewContext, 'view_notification' );

  • site-kit-wp/assets/js/components/notifications/SetupSuccessBannerNotification.js

    Lines 99 to 102 in a7a6f45

    	trackEvent(
    	`${ viewContext }_authentication-success-notification`,
    	'view_notification'
    	);

  • site-kit-wp/assets/js/components/notifications/WPVersionBumpNotification.js

    Line 53 in a7a6f45

    trackEvent( eventCategory, 'view_notification' );

Implementation Brief

• We should trigger the trackEvent call within a useEffect instead of the useMount hook, conditionally on the same code path that causes the component to actually render. An example of how we have done this is in the ThankWithGoogleSupporterWallNotification component.
• This should be done in the following places:

  • site-kit-wp/assets/js/components/activation/activation-app.js

    Line 62 in 5841f2b

    trackEvent( viewContext, 'view_notification' );

    • Change the useMount that calls trackEvent to be a useEffect that only runs when buttonURL is truthy.

  • site-kit-wp/assets/js/components/notifications/SetupSuccessBannerNotification.js

    Lines 99 to 102 in a7a6f45

    	trackEvent(
    	`${ viewContext }_authentication-success-notification`,
    	'view_notification'
    	);

    • Change the useMount to a useEffect here:

      site-kit-wp/assets/js/components/notifications/SetupSuccessBannerNotification.js

      Lines 99 to 102 in 5841f2b

      	trackEvent(
      	`${ viewContext }_authentication-success-notification`,
      	'view_notification'
      	);

      so it only runs when the conditions to not return null are met (starts with modules !== undefined && !! notification, but also includes conditions in this switch case). It might be worth cleaning up the switch case here and returning early in a few places, as the current logic is a bit hard to read.

  • site-kit-wp/assets/js/components/notifications/WPVersionBumpNotification.js

    Line 53 in a7a6f45

    trackEvent( eventCategory, 'view_notification' );

    • Update the useMount to a useEffect that only calls trackEvent when hasMinimumWPVersion === false && version !== undefined

Test Coverage

• No new tests needed.

QA Brief

• Install Site Kit via the plugin directory and activate it. Ensure the view_notification GA event for the activation category is triggered only when the ActivationApp notification is displayed. (This notification will have the Congratulations, the Site Kit plugin is now activated. title).
• Ensure the view_notification GA event for the mainDashboard_wp52-version-notification event category is triggered only when the WPVersionBumpNotification is displayed.
• Ensure the following events are triggered only when the SetupSuccessBannerNotification is displayed:
  • view_notification - mainDashboard_authentication-success-notification
  • complete_user_setup - mainDashboard_authentication-success-notification
  • complete_site_setup - mainDashboard_authentication-success-notification

Changelog entry

• Fix bug that could cause a notification view event to be sent even when the notification doesn't appear.

[tofumatt]

ACs here are largely good, but I wanted to call out which components were actually affected. I'll move this to IB, and I can work on that myself 👍🏻

[eugene-manuilov]

Thanks, @tofumatt. Could you please add more information to IB? I think that each components have different circumstances when we can consider them as rendered, right? Let's write them down in IB.

[eugene-manuilov]

Thanks, @tofumatt. IB ✔️

[wpdarren]

QA Update: ⚠️

@hussain-t I have a query based on this section of the QAB.

Install Site Kit via the plugin directory and activate it. Ensure the view_notification GA event for the mainDashboard event category is triggered only when the ActivationApp notification is displayed. (This notification will have the Congratulations, the Site Kit plugin is now activated. title).

When viewing the log the mainDashboard event is not showing and I am wondering if this is expected, since the Congratulations, the Site Kit plugin is now activated. title takes place on the plugins page. Please could you confirm this. This is what I see.

[hussain-t]

@wpdarren, you're correct mainDashboard won't be available on the plugins page rather, it should be the activation category for the view_notification event.

[wpdarren]

QA Update: ✅

Verified:

• The view_notification GA event for the activation category is triggered only when the ActivationApp notification is displayed.
• The view_notification GA event for the mainDashboard_wp52-version-notification event category is triggered only when the WPVersionBumpNotification is displayed.
  The following events are triggered only when the SetupSuccessBannerNotification is displayed:
  view_notification - mainDashboard_authentication-success-notification
  • complete_user_setup - mainDashboard_authentication-success-notification
  • complete_site_setup - mainDashboard_authentication-success-notification

Screenshots

[aaemnnosttv]

⚠️ Approval

Not sure if this is a regression, but I still see the main authentication success view_notification event even when has been dismissed.

Also, it seems that view_notification events are triggered even when it isn't visible (i.e. hidden by CSS) due to the limit of only one shown at a time.

This can be seen by meeting the conditions for seeing the WPVersionBumpNotification, not dismissing it, and then visiting /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success&slug=analytics to trigger the SetupSuccessBannerNotification. view_notification events are triggered for both right away even though only the success banner notification is visible.

cc: @hussain-t @tofumatt

It may be that this fulfills the AC as-is but we probably want to open a follow-up here so that view events are truly triggered when in-view (maybe using IntersectionObserver?)

[techanvil]

Good spot there @aaemnnosttv. I have looked into this and it's not a regression as I can see the same behaviour in the previous release. I've created a followup issue to address this: #6109