Enhancement/8847 RRM GA tracking

assets/js/modules/reader-revenue-manager/components/common/PublicationOnboardingStateNotice.js

@@ -32,11 +32,15 @@ import {
 	PUBLICATION_ONBOARDING_STATES,
 } from '../../datastore/constants';
 import SettingsNotice from '../../../../components/SettingsNotice';
+import { trackEvent } from '../../../../util';
+import useViewContext from '../../../../hooks/useViewContext';
+import { useEffect } from 'react';
 
 const { PENDING_VERIFICATION, ONBOARDING_ACTION_REQUIRED } =
 	PUBLICATION_ONBOARDING_STATES;
 
 export default function PublicationOnboardingStateNotice() {
+	const viewContext = useViewContext();
 	const onboardingState = useSelect( ( select ) =>
 		select( MODULES_READER_REVENUE_MANAGER ).getPublicationOnboardingState()
 	);
@@ -57,10 +61,23 @@ export default function PublicationOnboardingStateNotice() {
 		} )
 	);
 
-	if (
+	const skipDisplay =
 		! onboardingState ||
-		! actionableOnboardingStates.includes( onboardingState )
-	) {
+		! actionableOnboardingStates.includes( onboardingState );
+
+	useEffect( () => {
+		if ( skipDisplay ) {
+			return;
+		}
+
+		trackEvent(
+			`${ viewContext }_rrm-onboarding-state-notification`,
+			'view_notification',
+			onboardingState
+		);
+	}, [ onboardingState, skipDisplay, viewContext ] );
+
+	if ( skipDisplay ) {
 		return null;
 	}
 
@@ -82,7 +99,18 @@ export default function PublicationOnboardingStateNotice() {
 
 	const noticeCTA = () => {
 		return (
-			<Link href={ serviceURL } external inverse>
+			<Link
+				onClick={ () => {
+					trackEvent(
+						`${ viewContext }_rrm-onboarding-state-notification`,
+						'confirm_notification',
+						onboardingState
+					);
+				} }
+				href={ serviceURL }
+				external
+				inverse
+			>
 				{ buttonText }
 			</Link>
 		);

assets/js/modules/reader-revenue-manager/components/common/PublicationOnboardingStateNotice.test.js

@@ -20,18 +20,24 @@
  * Internal dependencies.
  */
 import {
+	act,
 	createTestRegistry,
+	fireEvent,
 	provideUserAuthentication,
 	provideUserInfo,
 	render,
 } from '../../../../../../tests/js/test-utils';
-
+import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../../../googlesitekit/constants';
+import * as tracking from '../../../../util/tracking';
 import {
 	MODULES_READER_REVENUE_MANAGER,
 	PUBLICATION_ONBOARDING_STATES,
 } from '../../datastore/constants';
 import PublicationOnboardingStateNotice from './PublicationOnboardingStateNotice';
 
+const mockTrackEvent = jest.spyOn( tracking, 'trackEvent' );
+mockTrackEvent.mockImplementation( () => Promise.resolve() );
+
 describe( 'PublicationOnboardingStateNotice', () => {
 	let registry;
 
@@ -42,6 +48,7 @@ describe( 'PublicationOnboardingStateNotice', () => {
 	} = PUBLICATION_ONBOARDING_STATES;
 
 	beforeEach( () => {
+		mockTrackEvent.mockClear();
 		registry = createTestRegistry();
 		provideUserAuthentication( registry );
 		provideUserInfo( registry );
@@ -61,6 +68,7 @@ describe( 'PublicationOnboardingStateNotice', () => {
 		} );
 
 		expect( container ).toBeEmptyDOMElement();
+		expect( mockTrackEvent ).not.toHaveBeenCalled();
 	} );
 
 	it.each( [
@@ -89,11 +97,18 @@ describe( 'PublicationOnboardingStateNotice', () => {
 				<PublicationOnboardingStateNotice />,
 				{
 					registry,
+					viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
 				}
 			);
 
 			await waitForRegistry();
 
+			expect( mockTrackEvent ).toHaveBeenCalledWith(
+				`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-onboarding-state-notification`,
+				'view_notification',
+				publicationState
+			);
+
 			expect( getByText( expectedText ) ).toBeInTheDocument();
 
 			const expectedServiceURL = registry
@@ -120,6 +135,19 @@ describe( 'PublicationOnboardingStateNotice', () => {
 			expect( container.firstChild ).toHaveClass(
 				'googlesitekit-publication-onboarding-state-notice'
 			);
+
+			// eslint-disable-next-line require-await
+			await act( async () => {
+				fireEvent.click(
+					container.querySelector( '.googlesitekit-cta-link' )
+				);
+			} );
+
+			expect( mockTrackEvent ).toHaveBeenCalledWith(
+				`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-onboarding-state-notification`,
+				'confirm_notification',
+				publicationState
+			);
 		}
 	);
 } );

assets/js/modules/reader-revenue-manager/components/dashboard/PublicationApprovedOverlayNotification.js

@@ -28,8 +28,10 @@ import OverlayNotification from '../../../../components/OverlayNotification/Over
 import ReaderRevenueManagerIntroductoryGraphicDesktop from '../../../../../svg/graphics/reader-revenue-manager-introductory-graphic-desktop.svg';
 import ReaderRevenueManagerIntroductoryGraphicMobile from '../../../../../svg/graphics/reader-revenue-manager-introductory-graphic-mobile.svg';
 import useViewOnly from '../../../../hooks/useViewOnly';
+import useViewContext from '../../../../hooks/useViewContext';
 import useDashboardType from '../../../../hooks/useDashboardType';
 import ExternalIcon from '../../../../../svg/icons/external.svg';
+import { trackEvent } from '../../../../util';
 import { Button } from 'googlesitekit-components';
 import { useSelect, useDispatch } from 'googlesitekit-data';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
@@ -44,6 +46,7 @@ export const RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION =
 	'rrmPublicationApprovedOverlayNotification';
 
 export default function PublicationApprovedOverlayNotification() {
+	const viewContext = useViewContext();
 	const isViewOnly = useViewOnly();
 	const dashboardType = useDashboardType();
 
@@ -84,18 +87,29 @@ export default function PublicationApprovedOverlayNotification() {
 	);
 
 	const dismissNotification = () => {
-		// Dismiss the notification, which also dismisses it from
-		// the current user's profile with the `dismissItem` action.
-		dismissOverlayNotification(
-			RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION
-		);
+		trackEvent(
+			`${ viewContext }_rrm-publication-approved-notification`,
+			'dismiss_notification'
+		).finally( () => {
+			// Dismiss the notification, which also dismisses it from
+			// the current user's profile with the `dismissItem` action.
+			dismissOverlayNotification(
+				RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION
+			);
+		} );
 	};
 
 	return (
 		<OverlayNotification
 			className="googlesitekit-reader-revenue-manager-publication-approved-notification"
 			GraphicDesktop={ ReaderRevenueManagerIntroductoryGraphicDesktop }
 			GraphicMobile={ ReaderRevenueManagerIntroductoryGraphicMobile }
+			onShow={ () => {
+				trackEvent(
+					`${ viewContext }_rrm-publication-approved-notification`,
+					'view_notification'
+				);
+			} }
 			shouldShowNotification={ shouldShowNotification }
 			notificationID={ RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION }
 		>
@@ -125,7 +139,14 @@ export default function PublicationApprovedOverlayNotification() {
 				<Button
 					disabled={ isDismissing }
 					href={ serviceURL }
-					onClick={ dismissNotification }
+					onClick={ () => {
+						trackEvent(
+							`${ viewContext }_rrm-publication-approved-notification`,
+							'confirm_notification'
+						).finally( () => {
+							dismissNotification();
+						} );
+					} }
 					trailingIcon={ <ExternalIcon width={ 13 } height={ 13 } /> }
 					target="_blank"
 				>

assets/js/modules/reader-revenue-manager/components/dashboard/PublicationApprovedOverlayNotification.test.js

@@ -25,12 +25,7 @@ import fetchMock from 'fetch-mock';
  * Internal dependencies
  */
 import { createTestRegistry } from '../../../../../../tests/js/utils';
-import {
-	act,
-	fireEvent,
-	render,
-	waitForDefaultTimeouts,
-} from '../../../../../../tests/js/test-utils';
+import { act, fireEvent, render } from '../../../../../../tests/js/test-utils';
 import PublicationApprovedOverlayNotification, {
 	RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION,
 } from './PublicationApprovedOverlayNotification';
@@ -39,10 +34,14 @@ import {
 	VIEW_CONTEXT_MAIN_DASHBOARD,
 	VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
 } from '../../../../googlesitekit/constants';
+import * as tracking from '../../../../util/tracking';
 import { Provider as ViewContextProvider } from '../../../../components/Root/ViewContextContext';
 import { UI_KEY_READER_REVENUE_MANAGER_SHOW_PUBLICATION_APPROVED_NOTIFICATION } from '../../datastore/constants';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 
+const mockTrackEvent = jest.spyOn( tracking, 'trackEvent' );
+mockTrackEvent.mockImplementation( () => Promise.resolve() );
+
 describe( 'PublicationApprovedOverlayNotification', () => {
 	let registry;
 
@@ -51,6 +50,7 @@ describe( 'PublicationApprovedOverlayNotification', () => {
 	);
 
 	beforeEach( () => {
+		mockTrackEvent.mockClear();
 		registry = createTestRegistry();
 		registry
 			.dispatch( CORE_UI )
@@ -93,6 +93,12 @@ describe( 'PublicationApprovedOverlayNotification', () => {
 				'.googlesitekit-reader-revenue-manager-publication-approved-notification'
 			)
 		).toBeInTheDocument();
+
+		// Make sure that the component is tracking the view event.
+		expect( mockTrackEvent ).toHaveBeenCalledWith(
+			`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-publication-approved-notification`,
+			'view_notification'
+		);
 	} );
 
 	it( 'should return null when dashboard is not main dashboard', async () => {
@@ -115,6 +121,8 @@ describe( 'PublicationApprovedOverlayNotification', () => {
 		expect( container ).toBeEmptyDOMElement();
 		// Component should return null.
 		expect( container.firstChild ).toBeNull();
+
+		expect( mockTrackEvent ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should return null when notification is dismissed', async () => {
@@ -140,6 +148,8 @@ describe( 'PublicationApprovedOverlayNotification', () => {
 		expect( container ).toBeEmptyDOMElement();
 		// Component should return null.
 		expect( container.firstChild ).toBeNull();
+
+		expect( mockTrackEvent ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should get dismissed when "Enable features" CTA is clicked', async () => {
@@ -166,10 +176,31 @@ describe( 'PublicationApprovedOverlayNotification', () => {
 
 		await waitForRegistry();
 
-		fireEvent.click( getByRole( 'button', { name: /Enable features/i } ) );
+		expect( mockTrackEvent ).toHaveBeenNthCalledWith(
+			1,
+			`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-publication-approved-notification`,
+			'view_notification'
+		);
 
-		await act( waitForDefaultTimeouts );
+		// eslint-disable-next-line require-await
+		await act( async () => {
+			fireEvent.click(
+				getByRole( 'button', { name: /Enable features/i } )
+			);
+		} );
 
 		expect( fetchMock ).toHaveFetched( dismissItemsEndpoint );
+
+		expect( mockTrackEvent ).toHaveBeenNthCalledWith(
+			2,
+			`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-publication-approved-notification`,
+			'confirm_notification'
+		);
+
+		expect( mockTrackEvent ).toHaveBeenNthCalledWith(
+			3,
+			`${ VIEW_CONTEXT_MAIN_DASHBOARD }_rrm-publication-approved-notification`,
+			'dismiss_notification'
+		);
 	} );
 } );