Add GA tracking for Analytics setup CTA.

assets/js/components/ActivateAnalyticsCTA.js

@@ -20,13 +20,15 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useIntersection } from 'react-use';
 
 /**
  * WordPress dependencies
  */
 import {
 	createInterpolateElement,
 	useEffect,
+	useRef,
 	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -46,15 +48,29 @@ import useActivateModuleCallback from '@/js/hooks/useActivateModuleCallback';
 import useCompleteModuleActivationCallback from '@/js/hooks/useCompleteModuleActivationCallback';
 import { useDebounce } from '@/js/hooks/useDebounce';
 import { useFeature } from '@/js/hooks/useFeature';
+import useNotificationEvents from '@/js/googlesitekit/notifications/hooks/useNotificationEvents';
 import Link from '@/js/components/Link';
 import AnalyticsIcon from '@/svg/graphics/analytics.svg';
 
 export default function ActivateAnalyticsCTA( {
 	children,
 	dismissedItemSlug,
+	analyticsEventLabel,
 } ) {
+	const trackingRef = useRef();
 	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 
+	const trackEvents = useNotificationEvents( {
+		id: 'activate-analytics-cta',
+		category: undefined,
+		actions: {
+			viewAction: 'view_cta',
+			confirmAction: 'confirm_cta',
+			dismissAction: 'dismiss_cta',
+			clickLearnMoreAction: 'click_learn_more_link',
+		},
+	} );
+
 	const isDismissed = useSelect( ( select ) => {
 		if ( ! setupFlowRefreshEnabled ) {
 			return false;
@@ -129,8 +145,27 @@ export default function ActivateAnalyticsCTA( {
 		}
 	}, [ isActivating, isNavigatingToReauthURL, debouncedSetInProgress ] );
 
+	const intersectionEntry = useIntersection( trackingRef, {
+		threshold: 0.25,
+	} );
+	const [ hasBeenInView, setHasBeenInView ] = useState( false );
+	const inView = !! intersectionEntry?.intersectionRatio;
+
+	useEffect( () => {
+		if ( inView && ! hasBeenInView ) {
+			trackEvents.view( analyticsEventLabel );
+
+			setHasBeenInView( true );
+		}
+	}, [ inView, hasBeenInView, trackEvents, analyticsEventLabel ] );
+
 	const { dismissItem } = useDispatch( CORE_USER );
 
+	function handleDismiss() {
+		trackEvents.dismiss( analyticsEventLabel );
+		dismissItem( dismissedItemSlug );
+	}
+
 	const onClickCallback = analyticsModuleActive
 		? completeModuleActivationCallback
 		: activateModuleCallback;
@@ -186,22 +221,35 @@ export default function ActivateAnalyticsCTA( {
 							'google-site-kit'
 						),
 						{
-							a: <Link href={ documentationURL } external />,
+							a: (
+								<Link
+									href={ documentationURL }
+									onClick={ () => {
+										trackEvents.clickLearnMore(
+											analyticsEventLabel
+										);
+									} }
+									external
+								/>
+							),
 						}
 					) }
 				</p>
 			</div>
 			<div className="googlesitekit-activate-analytics-cta__actions">
 				<Button
 					className="googlesitekit-activate-analytics-cta__button--secondary"
-					onClick={ () => dismissItem( dismissedItemSlug ) }
+					onClick={ handleDismiss }
 					tertiary
 				>
 					{ __( 'Maybe later', 'google-site-kit' ) }
 				</Button>
 				<SpinnerButton
 					className="googlesitekit-activate-analytics-cta__button--primary"
-					onClick={ onClickCallback }
+					onClick={ () => {
+						onClickCallback();
+						trackEvents.confirm( analyticsEventLabel );
+					} }
 					isSaving={ inProgress }
 					disabled={ inProgress }
 				>
@@ -217,4 +265,5 @@ export default function ActivateAnalyticsCTA( {
 ActivateAnalyticsCTA.propTypes = {
 	children: PropTypes.node,
 	dismissedItemSlug: PropTypes.string.isRequired,
+	analyticsEventLabel: PropTypes.string,
 };

assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js

@@ -35,7 +35,10 @@ export default function AdminBarActivateAnalyticsCTA() {
 
 	if ( setupFlowRefreshEnabled ) {
 		return (
-			<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-admin-bar" />
+			<AnalyticsCTA
+				analyticsEventLabel="admin_bar"
+				dismissedItemSlug="analytics-setup-cta-admin-bar"
+			/>
 		);
 	}
 

assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js

@@ -35,7 +35,10 @@ export default function WPDashboardActivateAnalyticsCTA() {
 
 	if ( setupFlowRefreshEnabled ) {
 		return (
-			<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-wp-dashboard" />
+			<AnalyticsCTA
+				analyticsEventLabel="wp_dashboard"
+				dismissedItemSlug="analytics-setup-cta-wp-dashboard"
+			/>
 		);
 	}
 

assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js

@@ -40,7 +40,10 @@ export default function ActivateAnalyticsCTA( { title } ) {
 
 	if ( setupFlowRefreshEnabled ) {
 		return (
-			<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-search-funnel" />
+			<AnalyticsCTA
+				analyticsEventLabel="search_funnel"
+				dismissedItemSlug="analytics-setup-cta-search-funnel"
+			/>
 		);
 	}