diff --git a/assets/js/components/ActivateAnalyticsCTA.js b/assets/js/components/ActivateAnalyticsCTA.js index ac941f29151..d85d1448524 100644 --- a/assets/js/components/ActivateAnalyticsCTA.js +++ b/assets/js/components/ActivateAnalyticsCTA.js @@ -20,6 +20,7 @@ * External dependencies */ import PropTypes from 'prop-types'; +import { useIntersection } from 'react-use'; /** * WordPress dependencies @@ -27,6 +28,7 @@ import PropTypes from 'prop-types'; 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,7 +221,17 @@ export default function ActivateAnalyticsCTA( { 'google-site-kit' ), { - a: , + a: ( + { + trackEvents.clickLearnMore( + analyticsEventLabel + ); + } } + external + /> + ), } ) }

@@ -194,14 +239,17 @@ export default function ActivateAnalyticsCTA( {
{ + 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, }; diff --git a/assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js b/assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js index 22bd43be3db..a7dbf8abe8f 100644 --- a/assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js +++ b/assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js @@ -35,7 +35,10 @@ export default function AdminBarActivateAnalyticsCTA() { if ( setupFlowRefreshEnabled ) { return ( - + ); } diff --git a/assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js b/assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js index 96d26f8b283..5db54391d8e 100644 --- a/assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js +++ b/assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js @@ -35,7 +35,10 @@ export default function WPDashboardActivateAnalyticsCTA() { if ( setupFlowRefreshEnabled ) { return ( - + ); } diff --git a/assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js b/assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js index b31abd46336..76a0c2259e9 100644 --- a/assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js +++ b/assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js @@ -40,7 +40,10 @@ export default function ActivateAnalyticsCTA( { title } ) { if ( setupFlowRefreshEnabled ) { return ( - + ); }