Add tracks event to site profiler (#95025)

client/hosting/performance/site-performance.tsx

@@ -9,6 +9,7 @@ import InlineSupportLink from 'calypso/components/inline-support-link';
 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 { useDispatch, useSelector } from 'calypso/state';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import getRequest from 'calypso/state/selectors/get-request';
@@ -146,6 +147,7 @@ export const SitePerformance = () => {
 	}, [ currentPage?.wpcom_performance_report_url ] );
 
 	const retestPage = () => {
+		recordTracksEvent( 'calypso_performance_profiler_test_again_click' );
 		setWpcom_performance_report_url( {
 			url: currentPage?.url ?? '',
 			hash: '',
@@ -203,6 +205,13 @@ export const SitePerformance = () => {
 	const isMobile = useMobileBreakpoint();
 	const disableControls = performanceReport.isLoading || isInitialLoading || ! isSitePublic;
 
+	const handleDeviceTabChange = ( tab: Tab ) => {
+		setActiveTab( tab );
+		recordTracksEvent( 'calypso_performance_profiler_device_tab_change', {
+			device: tab,
+		} );
+	};
+
 	const pageSelector = (
 		<PageSelector
 			onFilterValueChange={ setQuery }
@@ -278,7 +287,7 @@ export const SitePerformance = () => {
 				{ ! isMobile && pageSelector }
 				<DeviceTabControls
 					showTitle={ ! isMobile }
-					onDeviceTabChange={ setActiveTab }
+					onDeviceTabChange={ handleDeviceTabChange }
 					disabled={ disableControls }
 					value={ activeTab }
 				/>

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

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { Metrics } from 'calypso/data/site-profiler/types';
 import { CircularPerformanceScore } from 'calypso/hosting/performance/components/circular-performance-score/circular-performance-score';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	metricsNames,
 	mapThresholdsToStatus,
@@ -59,6 +60,9 @@ export const CoreWebVitalsAccordionV2 = ( props: Props ) => {
 		if ( key === activeTab ) {
 			setActiveTab( null );
 		} else {
+			recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', {
+				tab: key,
+			} );
 			setActiveTab( key as Metrics );
 		}
 	};

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

@@ -38,6 +38,9 @@ export const InsightsSection = forwardRef(
 			.filter( ( key ) => filterRecommendations( selectedFilter, audits[ key ] ) )
 			.sort( sortInsightKeys );
 		const onFilter = useCallback( ( option: { label: string; value: string } ) => {
+			recordTracksEvent( 'calypso_performance_profiler_recommendations_filter_change', {
+				filter: option.value,
+			} );
 			setSelectedFilter( option.value );
 			if ( props.onRecommendationsFilterChange ) {
 				props.onRecommendationsFilterChange( option.value );

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

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { Metrics } from 'calypso/data/site-profiler/types';
 import { CircularPerformanceScore } from 'calypso/hosting/performance/components/circular-performance-score/circular-performance-score';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	metricsNames,
 	mapThresholdsToStatus,
@@ -17,13 +18,18 @@ type Props = Record< Metrics, number > & {
 const MetricTabBarV2 = ( props: Props ) => {
 	const { activeTab, setActiveTab } = props;
 
+	const handleTabClick = ( tab: Metrics ) => {
+		setActiveTab( tab );
+		recordTracksEvent( 'calypso_performance_profiler_metric_tab_click', { tab } );
+	};
+
 	return (
 		<div className="metric-tab-bar-v2">
 			<button
 				className={ clsx( 'metric-tab-bar-v2__tab metric-tab-bar-v2__performance', {
 					active: activeTab === 'overall',
 				} ) }
-				onClick={ () => setActiveTab( 'overall' ) }
+				onClick={ () => handleTabClick( 'overall' ) }
 			>
 				<div className="metric-tab-bar-v2__tab-text">
 					<div
@@ -61,7 +67,7 @@ const MetricTabBarV2 = ( props: Props ) => {
 						<button
 							key={ key }
 							className={ clsx( 'metric-tab-bar-v2__tab', { active: key === activeTab } ) }
-							onClick={ () => setActiveTab( key as Metrics ) }
+							onClick={ () => handleTabClick( key as Metrics ) }
 						>
 							<div className="metric-tab-bar-v2__tab-status">
 								<StatusIndicator

client/performance-profiler/components/tip/index.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from 'i18n-calypso';
 import './style.scss';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 
 export type TipProps = {
 	title: string;
@@ -11,13 +12,19 @@ export type TipProps = {
 export const Tip = ( { title, content, link, linkText }: TipProps ) => {
 	const translate = useTranslate();
 
+	const handleLearnMoreClick = () => {
+		recordTracksEvent( 'calypso_performance_profiler_tip_learn_more_clicked', {
+			link: link,
+		} );
+	};
+
 	return (
 		<div className="performance-profiler-tip">
 			<h4>{ title }</h4>
 			<p>{ content }</p>
 			{ link && (
 				<p className="learn-more-link">
-					<a href={ link } target="_blank" rel="noreferrer">
+					<a href={ link } target="_blank" rel="noreferrer" onClick={ handleLearnMoreClick }>
 						{ linkText ?? translate( 'Learn more ↗' ) }
 					</a>
 				</p>