Implement GA events for zero states

A few additional GA events for new areas from the zeroDataStates epic should be implemented.

---

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

Acceptance criteria

• Both the “gathering data” and “zero data” banner notifications should fire GA tracking events for certain interactions (via ZeroDataStateNotifications):
  • Any of the events below should use a category depending on which of the two notifications is shown:
    • If the gathering-data-notification is shown, the category needs to be {viewContext}_gathering-data-notification.
    • If the zero-data-notification is shown, the category needs to be {viewContext}_zero-data-notification.
  • When the respective notification is shown (i.e. useMount), a view_notification event should be fired.
  • When the respective dismiss button is clicked, a dismiss_notification event should be fired.
  • When the learn more button is clicked (only relevant for zero-data-notification), a click_learn_more_link event should be fired.
• Two GA tracking events for the new CreateGoalCTA component should be added:
  • Both of the events should use {viewContext}_search-traffic-widget as category.
  • When the component is shown (i.e. useMount), a view_analytics_goal_cta event should be fired.
  • When the user clicks the support link “Create a new goal”, a click_analytics_goal_cta event should be fired.

Implementation Brief

Note: The banner notification events implementation would benefit from building out the two notifications as their own components and keeping the current ZeroDataStateNotifications component only as a wrapper for alternatively displaying one of them.

• Using assets/js/components/notifications/BannerNotification/index.js,
  • Add a new prop onView which will be a function called within the useMount hook if defined.
• Rename and move assets/js/components/notifications/ZeroDataStateNotifications.js to assets/js/components/notifications/ZeroDataStateNotifications/index.js. This includes ZeroDataStateNotifications.stories.js as well.
• Create assets/js/components/notifications/ZeroDataStateNotifications/GatheringDataNotification.js which exports the GatheringDataNotification functional component.
  • It should render the same BannerNotification from index.js having gathering-data-notification as id.
  • It should accept a title prop which will be used as value for the title prop of BannerNotification.
  • Category for event tracking should be: {viewContext}_gathering-data-notification.
  • Add the following props to BannerNotification:
    • onView: callback function should call trackEvent with event action set to view_notification.
    • onDismiss: Callback function should call trackEvent with event action set to dismiss_notification.
• Create assets/js/components/notifications/ZeroDataStateNotifications/ZeroDataNotification.js which exports the ZeroDataNotification functional component.
  • It should render the same BannerNotification from index.js having zero-data-notification as id.
  • Category for event tracking should be: {viewContext}_zero-data-notification.
  • Add the following props to BannerNotification:
    • onView: callback function should call trackEvent with event action set to view_notification.
    • onDismiss: Callback function should call trackEvent with event action set to dismiss_notification.
    • onLearnMoreClick: Callback function should call trackEvent with event action set to click_learn_more_link.
• For the above new components,
  • Import the trackEvent function from assets/js/util/tracking/index.js.
  • Get the context by using the useContext hook with ViewContextContext as parameter. ViewContextContext imported from assets/js/components/Root/ViewContextContext.js.
• Using assets/js/components/notifications/ZeroDataStateNotifications/index.js,
  • Replace the gathering-data-notification banner notification with the new GatheringDataNotification component, passing the gatheringDataTitle as value to the title prop.
  • Replace the zero-data-notification banner notification with the new ZeroDataNotification component.
  • Tweak the code to return early when we return GatheringDataNotification, thus avoiding the conditions to display ZeroDataNotification.
• Using assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/CreateGoalCTA.js,
  • Import trackEvent and get the context as per the above.
  • The event category should be {viewContext}_search-traffic-widget for all trackEvent calls.
  • Using the useMount hook, call trackEvent with event action set to view_analytics_goal_cta.
  • Add the onClick prop to the Button component and callback function should call trackEvent with event action set to click_analytics_goal_cta.

Test Coverage

• No new tests to be added.

QA Brief

• Ensure the GA events are fired as per the AC when the gathering data and zero data notifications are rendered.
• Ensure GA events are fired as per the AC for the CreateGoalCTA

Changelog entry

• N/A

[asvinb]

@felixarntz Totally makes sense! I’ve updated the IB, can you take another look?

Thanks!

[felixarntz]

@eclarke1 @FlicHollis This needs to be part of the zero data states launch, so I’ve added the sprint and release as needed. It should be a quite small issue though. We can remove something from dashboard sharing if necessary.