Add GA events in RRM introductory overlay notification

[nfmohit]

Feature Description

GA events should be added to the Reader Revenue Manager introductory overlay notification.

---

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 in different Reader Revenue Manager introductory overlay notification. See the GA events sheet.

Event name / action	Category	Label	Trigger	This metric is recorded when...
view_notification	{viewContext}_rrm-introductory-notification	{ONBOARDING STATE}:{PAYMENT OPTION}. Example: "ONBOARDING_COMPLETE:noPayment"	element visibility	The user views the RRM introductory notification.
confirm_notification	{viewContext}_rrm-introductory-notification	{ONBOARDING STATE}:{PAYMENT OPTION}. Example: "ONBOARDING_COMPLETE:noPayment"	click	The user clicks on the RRM introductory notification CTA.
dismiss_notification	{viewContext}_rrm-introductory-notification	{ONBOARDING STATE}:{PAYMENT OPTION}. Example: "ONBOARDING_COMPLETE:noPayment"	click	The user dismisses the RRM introductory notification.
click_learn_more_link	{viewContext}_rrm-introductory-notification	{ONBOARDING STATE}:{PAYMENT OPTION}. Example: "ONBOARDING_COMPLETE:noPayment"	click	The user clicks on the RRM introductory notification learn more link.

Implementation Brief

• In assets/js/modules/reader-revenue-manager/components/dashboard/RRMIntroductoryOverlayNotification.js:
  • Import trackEvent from assets/js/util/index.js to track events.
  • Add an onShow prop to the OverlayNotification component. Pass a function that calls the trackEvent function with the view_notification event (second parameter).
  • Within the onClick prop function for the Maybe later button, call the trackEvent function with the dismiss_notification event (second parameter).
  • Add an onClick prop function to the Explore features/Learn more button. Call the trackEvent function with the confirm_notification event (second parameter).
  • Add an onClick prop function to the SupportLink component. Call the trackEvent function with the click_learn_more_link event (second parameter).
  • Each trackEvent function call should use {viewContext}_rrm-introductory-notification as the first parameter (event category).
    • Obtain the viewContext using the useViewContext (assets/js/hooks/useViewContext.js) hook.
  • Each trackEvent function call should use a label as the third parameter as described in the ACs.
    • Create a new variable to store the event label, say gaEventLabel. Compose the event label according to the ACs.
      • Obtain the onboarding state using the getPublicationOnboardingState selector.
      • Obtain the payment option using the getPaymentOption selector.

Test Coverage

• In assets/js/modules/reader-revenue-manager/components/dashboard/RRMIntroductoryOverlayNotification.test.js:
  • Add test coverage to validate all tracking events with the correct label.

QA Brief

• Install Google Analytics Debugger chrome extension to verify the GA events.
• Connect the Reader Revenue Manager with rrmModuleV2 feature flag enabled.
• Ensure the publication onboarding state is complete for the connected publication.
• Ensure the payment option is set to noPayment or empty (string) for the connected publication.
• When the Reader Revenue Manager introductory overlay notification is displayed, verify the following GA events are tracked as per the ACs:
  • The view_notification event is tracked when the notification is displayed.
  • The confirm_notification event is tracked when the user clicks on the "Explore features" button.
  • The dismiss_notification event is tracked when the user clicks on the "Maybe later" button.
  • The click_learn_more_link event is tracked when the user clicks on the "Learn more" link.

Changelog entry

• Add GA events tracking for user interaction with the Reader Revenue Manager introductory overlay notification.

[hussain-t]

Thanks, @nfmohit! Overall the IB looks good. However, the prop to pass to the OverlayNotification component should be onShow instead of onView. Could you update it?

Add an onView prop to the OverlayNotification component. Pass a function that calls the trackEvent function with the view_notification event (second parameter).

[nfmohit]

Excellent catch, updated, thanks @hussain-t!

[hussain-t]

Thanks, @nfmohit!

IB ✅

[kelvinballoo]

QA Update ✅

Tested good.
GA events are tracked as per the ACs:

• The view_notification event is tracked when the notification is displayed.

  

• The confirm_notification event is tracked when the user clicks on the "Explore features" button.

  

• The dismiss_notification event is tracked when the user clicks on the "Maybe later" button.

  

• The click_learn_more_link event is tracked when the user clicks on the "Learn more" link.