Add the view_fpm_setup_cta survey trigger.

google · Dec 23, 2024 · 5bafd68 · 5bafd68
1 parent 0747d42
commit 5bafd68
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/assets/js/components/notifications/FirstPartyModeSetupBanner.js b/assets/js/components/notifications/FirstPartyModeSetupBanner.js
@@ -19,7 +19,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
+import { Fragment, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -36,6 +36,7 @@ import {
 	NOTIFICATION_GROUPS,
 } from '../../googlesitekit/notifications/datastore/constants';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 import { CORE_UI } from '../../googlesitekit/datastore/ui/constants';
 import Description from '../../googlesitekit/notifications/components/common/Description';
 import LearnMoreLink from '../../googlesitekit/notifications/components/common/LearnMoreLink';
@@ -50,6 +51,7 @@ import {
 	useBreakpoint,
 } from '../../hooks/useBreakpoint';
 import useViewContext from '../../hooks/useViewContext';
+import { DAY_IN_SECONDS } from '../../util';
 
 export const FPM_SHOW_SETUP_SUCCESS_NOTIFICATION =
 	'fpm-show-setup-success-notification';
@@ -65,6 +67,10 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 
 	const { isTooltipVisible } = useTooltipState( id );
 
+	const usingProxy = useSelect( ( select ) =>
+		select( CORE_SITE ).isUsingProxy()
+	);
+
 	const isItemDismissed = useSelect( ( select ) =>
 		select( CORE_NOTIFICATIONS ).isNotificationDismissed( id )
 	);
@@ -92,6 +98,13 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 		dismissNotification( id );
 	};
 
+	const { triggerSurvey } = useDispatch( CORE_USER );
+	const handleView = useCallback( () => {
+		if ( usingProxy ) {
+			triggerSurvey( 'view_fpm_setup_cta', { ttl: DAY_IN_SECONDS } );
+		}
+	}, [ triggerSurvey, usingProxy ] );
+
 	const onDismiss = () => {
 		showTooltip();
 	};
@@ -129,7 +142,7 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 	};
 
 	return (
-		<Notification>
+		<Notification onView={ handleView }>
 			<NotificationWithSVG
 				id={ id }
 				title={ __(

diff --git a/assets/js/googlesitekit/notifications/components/Notification/index.js b/assets/js/googlesitekit/notifications/components/Notification/index.js
@@ -36,6 +36,7 @@ export default function Notification( {
 	className,
 	gaTrackingEventArgs,
 	children,
+	onView = () => {},
 } ) {
 	const ref = useRef();
 	const viewed = useHasBeenViewed( id );
@@ -53,9 +54,12 @@ export default function Notification( {
 				gaTrackingEventArgs?.label,
 				gaTrackingEventArgs?.value
 			);
+
+			onView?.();
+
 			setIsViewedOnce( true );
 		}
-	}, [ viewed, trackEvents, isViewedOnce, gaTrackingEventArgs ] );
+	}, [ viewed, trackEvents, isViewedOnce, gaTrackingEventArgs, onView ] );
 
 	return (
 		<section id={ id } ref={ ref } className={ className }>
@@ -81,4 +85,5 @@ Notification.propTypes = {
 		value: PropTypes.string,
 	} ),
 	children: PropTypes.node,
+	onView: PropTypes.func,
 };