Add GA tracking for RRM

[nfmohit]

Feature Description

GA event tracking should be added to different parts of the RRM module, such as the user-facing banner notification (#8846), publication-approved overlay notification (#8843), publication onboarding state notice (#8838), and module success banner (#8840).

• See relevant section in the design doc.

---

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 module elements. See the GA events sheet.

Event name	Category	Label	Trigger	Condition
view_notification	{viewContext}_rrm-setup-notification		element visibility	The user views the RRM setup CTA notification.
confirm_notification	{viewContext}_rrm-setup-notification		click	The user actions the RRM setup CTA notification.
dismiss_notification	{viewContext}_rrm-setup-notification		click	The user dismisses the RRM setup CTA notification.
view_notification	{viewContext}_rrm-onboarding-state-notification	Can be either "PENDING_VERIFICATION" or "ONBOARDING_ACTION_REQUIRED"	element visibility	The user views the onboarding state notification.
confirm_notification	{viewContext}_rrm-onboarding-state-notification	Can be either "PENDING_VERIFICATION" or "ONBOARDING_ACTION_REQUIRED"	click	The user clicks on the onboarding state notification CTA.
view_notification	{viewContext}_rrm-setup-success-notification	One of "PENDING_VERIFICATION", "ONBOARDING_ACTION_REQUIRED", or "ONBOARDING_COMPLETE".	element visibility	The user views the RRM module setup success notification.
confirm_notification	{viewContext}_rrm-setup-success-notification	One of "PENDING_VERIFICATION", "ONBOARDING_ACTION_REQUIRED", or "ONBOARDING_COMPLETE".	click	The user clicks on the RRM module setup success notification CTA.
dismiss_notification	{viewContext}_rrm-setup-success-notification	One of "PENDING_VERIFICATION", "ONBOARDING_ACTION_REQUIRED", or "ONBOARDING_COMPLETE".	click	The user dismisses the RRM module setup success notification.
view_notification	{viewContext}_rrm-publication-approved-notification		element visibility	The user views the RRM publication approved notification.
confirm_notification	{viewContext}_rrm-publication-approved-notification		click	The user clicks on the RRM publication approved notification CTA.
dismiss_notification	{viewContext}_rrm-publication-approved-notification		click	The user dismisses the RRM publication approved notification.

Implementation Brief

• To get the viewContext use useViewContext hook.
• trackEvent method should be used to track the event in GA.
• In assets/js/modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner.js component added in Implement RRM setup CTA widget #8846, do the following.
  • Add the useEffect hook in the component to track the view_notification event with category name {viewContext}_rrm-setup-notification .
  • Update the onSetupCallback to track the event confirm_notification with {viewContext}_rrm-setup-notification
  • Update onDismiss callback to track the event dismiss_notification with {viewContext}_rrm-setup-notification
• In assets/js/modules/reader-revenue-manager/components/common/PublicationOnboardingStateNotice.js component added in Implement <PublicationOnboardingStateNotice> component #8838, do the following.
  • Track only when the onboardingState is present in actionableOnboardingStates array. Pass the label as value of onboardingState.
  • Add the useEffect hook in the component to track the view_notification event with category name {viewContext}_rrm-setup-notification .
  • Add the onClick prop in Link to track the confirm_notification event with category name {viewContext}_rrm-onboarding-state-notification.
• In assets/js/modules/reader-revenue-manager/components/dashboard/PublicationApprovedOverlayNotification.js component added in Implement <PublicationApprovedOverlayNotification> component #8843, do the following.
  • Pass a function as onShow prop to OverlayNotification component which should track the view_notification event with category name {viewContext}_rrm-publication-approved-notification.
  • Update dismissNotification function, to track the event dismiss_notification with category name {viewContext}_rrm-publication-approved-notification.
  • In Enable features CTA Button component, add onClick prop to track event confirm_notification with category {viewContext}_rrm-publication-approved-notification.
• In assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.js component added in Implement RRM module setup success banner #8840, do the following.
  • Track only when the onboardingState is one of PENDING_VERIFICATION, ONBOARDING_ACTION_REQUIRED, or ONBOARDING_COMPLETE.
  • Add the useEffect hook in the component to track the view_notification event with category name {viewContext}_rrm-setup-success-notification. Add the dependencies correctly for the hook.
  • Pass the onClick handler as prop which should track event on dismiss and on click. The prop should be passed to SubtleNotification component.

Test Coverage

1. Add test coverage for on click functionality in all components.
2. Add test coverage for on dismiss functionality in all components.
3. Add test coverage for view even tracking.

QA Brief

• Ensure you have the Google Analytics Debugger Chrome Extension installed and have Site Kit set up to track Analytics events in "Settings > Tracking".

RRM setup CTA notification

1. Make sure RRM is deactivated. Banner would appear in the dashboard.
2. Refer to the table above and make sure the events mentioned for this banner are being called under mentioned conditions with correct categories.

Onboarding state notification.

1. Activate the module. You will be redirected to setup screen.
2. Run the command in browser console.

  const settings = {
      publicationID: "CAow6J6vDA",
      publicationOnboardingState: "ONBOARDING_ACTION_REQUIRED",
      publicationOnboardingStateLastSyncedAtMs: 0
    };

    googlesitekit.data.dispatch('modules/reader-revenue-manager').setSettings( settings );
    googlesitekit.data.dispatch('modules/reader-revenue-manager').saveSettings();

3. Go to Site Kit > Settings > Reader Revenue Manager, expand panel.
4. Make sure the events mentioned for this banner are being called under mentioned conditions with correct categories.

Onboarding success notification

1. Activate the module. You will be redirected to setup screen.
2. Select the publication and complete the setup, you should be redirected to dashboard and see the success notification.
3. Make sure you see the intended tracking events with correct categories in console.

Approved publication notice

1. Activate the module and complete setup.
2. Run the following command in browser console.

googlesitekit.data.dispatch( 'core/ui' ).setValue( 'READER_REVENUE_MANAGER_SHOW_PUBLICATION_APPROVED_NOTIFICATION', true );

3. Make sure you see the intended tracking events with correct categories in console.

Changelog entry

• Add Analytics tracking events for the Reader Revenue Manager module.

[nfmohit]

This is blocked by this internal task to define GA tracking parameters for Reader Revenue Management.

[nfmohit]

Thank you for the IB, @ankitrox . Please take a look at my comments below:

In assets/js/modules/reader-revenue-manager/components/dashboard/PublicationApprovedOverlayNotification.js component added in Implement <PublicationApprovedOverlayNotification> component #8843, do the following.

• Add the useEffect hook in the component to track the view_notification event with category name {viewContext}_rrm-publication-approved-notification.

To track the view notification for the overlay notification, we should use the onShow prop instead.

Also, do you think we should increase the estimate by a notch as these are a lot of components and involves quite extensive test coverage, just to be on the safe side?

[ankitrox]

Thank you @nfmohit .

I've updated the point to pass onShow prop to OverlayNotification component.

Also, I've bumped the estimate to 19 as I agree that there are lot of places for update and this may cause some unforeseen issues in tests or any other places.

[nfmohit]

Thank you @ankitrox!

IB ✅

[wpdarren]

QA Update: ✅

Verified

• I went through all of the GA events in the AC and ensured that they are fired when the appropriate scenario is met. I went through the dashboard, setting up the module, viewing and editing the module settings and the overlay notification

Screenshots