Logged-in Performance Profiler:Add additional track events

client/hosting/performance/site-performance.tsx

@@ -9,6 +9,7 @@ import NavigationHeader from 'calypso/components/navigation-header';
 import { useUrlBasicMetricsQuery } from 'calypso/data/site-profiler/use-url-basic-metrics-query';
 import { useUrlPerformanceInsightsQuery } from 'calypso/data/site-profiler/use-url-performance-insights';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import { profilerVersion } from 'calypso/performance-profiler/utils/profiler-version';
 import { useDispatch, useSelector } from 'calypso/state';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getRequest from 'calypso/state/selectors/get-request';
@@ -249,10 +250,12 @@ export const SitePerformance = () => {
 
 	const onLaunchSiteClick = () => {
 		if ( site?.is_a4a_dev_site ) {
+			recordTracksEvent( 'calypso_performance_profiler_prepare_launch_cta_click' );
 			page( `/settings/general/${ site.slug }` );
 			return;
 		}
 		dispatch( launchSite( siteId! ) );
+		recordTracksEvent( 'calypso_performance_profiler_launch_site_cta_click' );
 	};
 
 	const isMobile = useMobileBreakpoint();
@@ -300,7 +303,10 @@ export const SitePerformance = () => {
 			disabled={ disableControls }
 			onChange={ ( page_id ) => {
 				const url = new URL( window.location.href );
-
+				recordTracksEvent( 'calypso_performance_profiler_page_selector_change', {
+					is_home: page_id === '0',
+					version: profilerVersion(),
+				} );
 				if ( page_id ) {
 					setCurrentPageUserSelection( pages.find( ( page ) => page.value === page_id ) );
 					url.searchParams.set( 'page_id', page_id );

client/performance-profiler/components/core-web-vitals-accordion/index.tsx

@@ -9,7 +9,7 @@ import {
 	mapThresholdsToStatus,
 	displayValue,
 } from 'calypso/performance-profiler/utils/metrics';
-
+import { profilerVersion } from 'calypso/performance-profiler/utils/profiler-version';
 import './styles.scss';
 
 type Props = Record< Metrics, number > & {
@@ -61,6 +61,7 @@ export const CoreWebVitalsAccordion = ( props: Props ) => {
 		} else {
 			recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', {
 				tab: key,
+				version: profilerVersion(),
 			} );
 			setActiveTab( key as Metrics );
 		}

client/performance-profiler/components/insights-section/index.tsx

@@ -11,6 +11,7 @@ import {
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { MetricsInsight } from 'calypso/performance-profiler/components/metrics-insight';
 import { filterRecommendations, metricsNames } from 'calypso/performance-profiler/utils/metrics';
+import { profilerVersion } from 'calypso/performance-profiler/utils/profiler-version';
 import { updateQueryParams } from 'calypso/performance-profiler/utils/query-params';
 import './style.scss';
 
@@ -139,6 +140,7 @@ export const InsightsSection = forwardRef(
 							recordTracksEvent( 'calypso_performance_profiler_insight_click', {
 								url: props.url,
 								key,
+								version: profilerVersion(),
 							} )
 						}
 					/>

client/performance-profiler/components/metric-tab-bar/index.tsx

@@ -8,6 +8,7 @@ import {
 	mapThresholdsToStatus,
 	displayValue,
 } from 'calypso/performance-profiler/utils/metrics';
+import { profilerVersion } from 'calypso/performance-profiler/utils/profiler-version';
 import { StatusIndicator } from '../status-indicator';
 import './style.scss';
 
@@ -23,7 +24,10 @@ const MetricTabBar = ( props: Props ) => {
 
 	const handleTabClick = ( tab: Metrics ) => {
 		setActiveTab( tab );
-		recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', { tab } );
+		recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', {
+			tab,
+			version: profilerVersion(),
+		} );
 	};
 
 	return (

client/performance-profiler/components/status-section/index.tsx

@@ -2,7 +2,9 @@ import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { Metrics } from 'calypso/data/site-profiler/types';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { Valuation } from 'calypso/performance-profiler/types/performance-metrics';
+import { profilerVersion } from 'calypso/performance-profiler/utils/profiler-version';
 
 import './style.scss';
 
@@ -39,6 +41,12 @@ export const StatusSection = ( props: StatusSectionProps ) => {
 		good: translate( 'Excellent' ),
 	}[ status ];
 
+	const recordRecommendationsClickEvent = ( filter: string ) =>
+		recordTracksEvent( 'calypso_performance_profiler_recommendations_link_click', {
+			filter,
+			version: profilerVersion(),
+		} );
+
 	return (
 		<div className="status-section">
 			<div className={ clsx( 'status-badge', { [ status ]: true } ) }>{ statusText }</div>
@@ -55,6 +63,7 @@ export const StatusSection = ( props: StatusSectionProps ) => {
 											role="button"
 											tabIndex={ 0 }
 											onClick={ () => {
+												recordRecommendationsClickEvent( 'all' );
 												onRecommendationsFilterChange?.( '' );
 												recommendationsRef?.current?.scrollIntoView( {
 													behavior: 'smooth',
@@ -80,6 +89,7 @@ export const StatusSection = ( props: StatusSectionProps ) => {
 												role="button"
 												tabIndex={ 0 }
 												onClick={ () => {
+													recordRecommendationsClickEvent( activeTab ?? '' );
 													onRecommendationsFilterChange?.( activeTab ?? '' );
 													recommendationsRef?.current?.scrollIntoView( {
 														behavior: 'smooth',

client/performance-profiler/utils/profiler-version.ts

@@ -0,0 +1,8 @@
+export const profilerVersion = () => {
+	if ( window.location.pathname.includes( '/sites/performance/' ) ) {
+		return 'logged-in';
+	} else if ( window.location.pathname.includes( '/speed-test-tool' ) ) {
+		return 'logged-out';
+	}
+	return 'unknown';
+};