Add Tracks events for Welcome Flow

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx

@@ -4,14 +4,23 @@ import { Flex } from '@wordpress/components';
 import { FlexItem } from '@wordpress/components';
 import { __, _n } from '@wordpress/i18n';
 import { moreHorizontalMobile } from '@wordpress/icons';
+import { useEffect } from 'react';
 import useEvaluationRecommendations from '../../data/evaluation-recommendations/use-evaluation-recommendations';
+import useAnalytics from '../../hooks/use-analytics';
 import { JetpackModuleToProductCard } from '../product-cards-section/all';
 import styles from './style.module.scss';
 
 const EvaluationRecommendations: React.FC = () => {
+	const { recordEvent } = useAnalytics();
 	const { recommendedModules, redoEvaluation, removeEvaluationResult } =
 		useEvaluationRecommendations();
 
+	useEffect( () => {
+		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_view', {
+			modules: recommendedModules,
+		} );
+	}, [ recommendedModules, recordEvent ] );
+
 	return (
 		<Container horizontalGap={ 2 } horizontalSpacing={ 6 }>
 			<Col>

projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts

@@ -6,6 +6,7 @@ import useActivate from '../../data/products/use-activate';
 import useProduct from '../../data/products/use-product';
 import { ProductCamelCase } from '../../data/types';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
+import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 
 const parsePricingData = ( pricingForUi: ProductCamelCase[ 'pricingForUi' ] ) => {
@@ -80,6 +81,7 @@ const getSecondaryAction = ( detail: ProductCamelCase, onActivate: () => void )
 };
 
 const usePricingData = ( slug: string ) => {
+	const { recordEvent } = useAnalytics();
 	const { detail } = useProduct( slug );
 	const { wpcomProductSlug, wpcomFreeProductSlug, ...data } = parsePricingData(
 		detail.pricingForUi
@@ -112,13 +114,14 @@ const usePricingData = ( slug: string ) => {
 	}, [ activate, runFreeCheckout, wpcomFreeProductSlug ] );
 
 	const handleCheckout = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_checkout_click', { slug } );
 		if ( slug === 'crm' ) {
 			activate( {} );
 			window.open( 'https://jetpackcrm.com/pricing/', '_blank' );
 			return;
 		}
 		runCheckout();
-	}, [ activate, runCheckout, slug ] );
+	}, [ activate, recordEvent, runCheckout, slug ] );
 
 	return {
 		secondaryAction: getSecondaryAction( detail, handleActivate ),

projects/packages/my-jetpack/_inc/components/welcome-flow/index.tsx

@@ -61,6 +61,11 @@ const WelcomeFlow: FC< PropsWithChildren > = ( { children } ) => {
 		dismissWelcomeBanner();
 	}, [ recordEvent, currentStep, isUserConnected, isSiteConnected, dismissWelcomeBanner ] );
 
+	const onSkipClick = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_welcome_banner_skip_recommendations_click' );
+		dismissWelcomeBanner();
+	}, [ dismissWelcomeBanner, recordEvent ] );
+
 	const handleEvaluation = useCallback(
 		async ( values: { [ key in EvaluationAreas ]: boolean } ) => {
 			const goals = Object.keys( values ).filter( key => values[ key ] );
@@ -113,7 +118,7 @@ const WelcomeFlow: FC< PropsWithChildren > = ( { children } ) => {
 						) }
 						{ 'evaluation' === currentStep && (
 							<EvaluationStep
-								onSkipOnboarding={ onDismissClick }
+								onSkipOnboarding={ onSkipClick }
 								onSubmitEvaluation={ handleEvaluation }
 							/>
 						) }

projects/packages/my-jetpack/_inc/data/evaluation-recommendations/use-evaluation-recommendations.ts

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from 'react';
 import { useValueStore } from '../../context/value-store/valueStoreContext';
+import useAnalytics from '../../hooks/use-analytics';
 import {
 	QUERY_EVALUATE_KEY,
 	QUERY_REMOVE_EVALUATION_KEY,
@@ -20,6 +21,7 @@ const getInitialRecommendedModules = (): JetpackModule[] | null => {
 };
 
 const useEvaluationRecommendations = () => {
+	const { recordEvent } = useAnalytics();
 	const { isWelcomeBannerVisible, showWelcomeBanner } = useWelcomeBanner();
 	const [ recommendedModules, setRecommendedModules ] = useValueStore(
 		'recommendedModules',
@@ -107,16 +109,18 @@ const useEvaluationRecommendations = () => {
 			{
 				onSuccess: () => {
 					setIsSectionVisible( false );
+					recordEvent( 'jetpack_myjetpack_evaluation_recommendations_dismiss_click' );
 				},
 			}
 		);
-	}, [ handleRemoveEvaluationResult, setIsSectionVisible ] );
+	}, [ handleRemoveEvaluationResult, recordEvent, setIsSectionVisible ] );
 
 	const redoEvaluation = useCallback( () => {
 		// It just happens locally - on reload we're back to recommendations view
 		setIsSectionVisible( false );
 		showWelcomeBanner();
-	}, [ setIsSectionVisible, showWelcomeBanner ] );
+		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_redo_click' );
+	}, [ recordEvent, setIsSectionVisible, showWelcomeBanner ] );
 
 	return {
 		submitEvaluation,

projects/packages/my-jetpack/changelog/Add Tracks events for Welcome Flow

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add Tracks events for Welcome Flow

projects/packages/my-jetpack/composer.json

@@ -83,7 +83,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-my-jetpack/compare/${old}...${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "4.31.x-dev"
+			"dev-trunk": "4.32.x-dev"
 		},
 		"version-constants": {
 			"::PACKAGE_VERSION": "src/class-initializer.php"

projects/packages/my-jetpack/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "4.31.1-alpha",
+	"version": "4.32.0-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {

projects/packages/my-jetpack/src/class-initializer.php

@@ -41,7 +41,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '4.31.1-alpha';
+	const PACKAGE_VERSION = '4.32.0-alpha';
 
 	/**
 	 * HTML container ID for the IDC screen on My Jetpack page.

projects/plugins/backup/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/boost/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/jetpack/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updated composer.lock.
+
+

projects/plugins/migration/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/protect/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/search/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/social/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/starter-plugin/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+

projects/plugins/videopress/changelog/add-welcome-flow-tracks-events

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+