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

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
  • https://github.com/google/site-kit-wp/blob/5841f2b67715762c98a76e644f534ed000b47a03/assets/js/components/activation/activation-app.js#L62
  • https://github.com/google/site-kit-wp/blob/a7a6f45123b24b9c767ac62ae4dcd2c6c5a1bd6a/assets/js/components/notifications/SetupSuccessBannerNotification.js#L99-L102
  • https://github.com/google/site-kit-wp/blob/a7a6f45123b24b9c767ac62ae4dcd2c6c5a1bd6a/assets/js/components/notifications/WPVersionBumpNotification.js#L53

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:
  • https://github.com/google/site-kit-wp/blob/5841f2b67715762c98a76e644f534ed000b47a03/assets/js/components/activation/activation-app.js#L62
    • Change the useMount that calls trackEvent to be a useEffect that only runs when buttonURL is truthy.
  • https://github.com/google/site-kit-wp/blob/a7a6f45123b24b9c767ac62ae4dcd2c6c5a1bd6a/assets/js/components/notifications/SetupSuccessBannerNotification.js#L99-L102
    • Change the useMount to a useEffect here: https://github.com/google/site-kit-wp/blob/5841f2b67715762c98a76e644f534ed000b47a03/assets/js/components/notifications/SetupSuccessBannerNotification.js#L99-L102 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.
  • https://github.com/google/site-kit-wp/blob/a7a6f45123b24b9c767ac62ae4dcd2c6c5a1bd6a/assets/js/components/notifications/WPVersionBumpNotification.js#L53
    • 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.

[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: https://github.com/google/site-kit-wp/issues/6109

[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.