Boost: Add tracks event to clickable events on settings page

projects/plugins/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx

@@ -203,6 +203,9 @@ const OtherErrors = ( { cssState, retry, showRetry, supportLink }: ShowStopperEr
 							href={ supportLink }
 							target="_blank"
 							rel="noreferrer"
+							onClick={ () => {
+								recordBoostEvent( 'critical_css_contact_support', {} );
+							} }
 						>
 							{ __( 'Contact Support', 'jetpack-boost' ) }
 						</a>

projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx

@@ -11,6 +11,7 @@ import { getProvidersWithErrors } from '../lib/critical-css-errors';
 import ShowStopperError from '../show-stopper-error/show-stopper-error';
 import { Button } from '@automattic/jetpack-components';
 import styles from './status.module.scss';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 type StatusTypes = {
 	cssState: CriticalCssState;
@@ -38,6 +39,11 @@ const Status: React.FC< StatusTypes > = ( {
 		cssState.providers.filter( provider => provider.status === 'success' ).length || 0;
 	const providersWithErrors = getProvidersWithErrors( cssState );
 
+	const handleClickRegenerate = () => {
+		recordBoostEvent( 'critical_css_regenerate_clicked', {} );
+		regenerateAction.mutate();
+	};
+
 	// If there has been a fatal error, show it.
 	if ( showFatalError ) {
 		return (
@@ -104,7 +110,7 @@ const Status: React.FC< StatusTypes > = ( {
 				variant={ highlightRegenerateButton ? 'primary' : 'link' }
 				size="small"
 				weight="regular"
-				onClick={ () => regenerateAction.mutate() }
+				onClick={ handleClickRegenerate }
 				icon={ highlightRegenerateButton ? undefined : <RefreshIcon /> }
 				disabled={ cssState.status === 'pending' }
 			>

projects/plugins/boost/app/assets/src/js/features/image-cdn/collapsible-meta/collapsible-meta.tsx

@@ -3,13 +3,15 @@ import { Button } from '@automattic/jetpack-components';
 import React, { useState } from 'react';
 import CloseIcon from '$svg/close';
 import PencilIcon from '$svg/pencil';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 type CollapsibleMetaProps = {
 	children: React.ReactNode;
 	header: React.ReactNode;
 	summary: React.ReactNode;
 	editText: string;
 	closeEditText: string;
+	tracksEventName: string;
 };
 
 const CollapsibleMeta = ( {
@@ -18,6 +20,7 @@ const CollapsibleMeta = ( {
 	summary,
 	editText,
 	closeEditText,
+	tracksEventName,
 }: CollapsibleMetaProps ) => {
 	const [ isEditing, setIsEditing ] = useState( false );
 	return (
@@ -37,6 +40,9 @@ const CollapsibleMeta = ( {
 					}
 					className={ styles[ 'edit-button' ] }
 					onClick={ () => {
+						recordBoostEvent( tracksEventName, {
+							status: isEditing ? 'open' : 'close',
+						} );
 						setIsEditing( ! isEditing );
 					} }
 				>

projects/plugins/boost/app/assets/src/js/features/image-cdn/collapsible-meta/stories/collapsible-meta.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta< typeof CollapsibleMeta > = {
 		summary: { control: 'text' },
 		editText: { control: 'text' },
 		closeEditText: { control: 'text' },
+		tracksEventName: { control: 'text' },
 	},
 	decorators: [
 		Story => (
@@ -25,6 +26,7 @@ const defaultValues = {
 	summary: 'Something to show in the summary',
 	editText: 'Edit',
 	closeEditText: 'Close',
+	tracksEventName: 'tracks_event_name',
 };
 
 export default meta;

projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx

@@ -54,6 +54,7 @@ const QualitySettings = ( { isPremium }: QualitySettingsProps ) => {
 					closeEditText={ __( 'Hide', 'jetpack-boost' ) }
 					header={ <Header /> }
 					summary={ <Summary imageCdnQuality={ imageCdnQuality } /> }
+					tracksEventName="image_cdn_panel_toggle"
 				>
 					<div className={ styles.body }>
 						<h5>Adjust image quality per format</h5>

projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx

@@ -27,11 +27,19 @@ const Meta = () => {
 	const [ clearedCacheMessage, runClearPageCacheAction ] = useClearPageCacheAction();
 
 	const clearPageCache = () => {
+		recordBoostEvent( 'page_cache_clear_clicked', {} );
 		runClearPageCacheAction.mutate();
 	};
 
 	const totalBypassPatterns = bypassPatterns?.length || 0;
 
+	const toggleExpanded = ( newValue: boolean ) => {
+		recordBoostEvent( 'page_cache_panel_toggle', {
+			status: newValue ? 'open' : 'close',
+		} );
+		setIsExpanded( newValue );
+	};
+
 	const getSummary = () => {
 		if ( runClearPageCacheAction.isPending ) {
 			return __( 'Clearing cache…', 'jetpack-boost' );
@@ -110,7 +118,7 @@ const Meta = () => {
 							weight="regular"
 							iconSize={ 16 }
 							icon={ isExpanded ? <ChevronUp /> : <ChevronDown /> }
-							onClick={ () => setIsExpanded( ! isExpanded ) }
+							onClick={ () => toggleExpanded( ! isExpanded ) }
 						>
 							{ __( 'Show Options', 'jetpack-boost' ) }
 						</Button>
@@ -198,6 +206,7 @@ const BypassPatterns = ( {
 	}, [ showErrorNotice ] );
 
 	function save() {
+		recordBoostEvent( 'page_cache_exceptions_save_clicked', {} );
 		setPatterns( inputValue );
 	}
 
@@ -269,6 +278,7 @@ const BypassPatternsExample = ( { children }: BypassPatternsExampleProps ) => {
 				href="#"
 				className={ styles[ 'example-button' ] }
 				onClick={ e => {
+					recordBoostEvent( 'page_cache_see_example_clicked', {} );
 					e.preventDefault();
 					setShow( ! show );
 				} }

projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx

@@ -6,6 +6,7 @@ import { ReactNode, useState } from 'react';
 import { Button } from '@wordpress/components';
 import { useDismissibleAlertState } from '$features/performance-history/lib/hooks';
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 type Props = {
 	scoreChange: number | false; // Speed score shift to show, or false if none.
@@ -77,6 +78,8 @@ function PopOut( { scoreChange }: Props ) {
 
 	const hideAlert = () => setClose( true );
 
+	hasScoreChanged && recordBoostEvent( 'speed_score_alert_shown', {} );
+
 	const animationStyles = useSpring( {
 		from: {
 			right: '-100%',

projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx

@@ -21,6 +21,7 @@ import { queryClient } from '@automattic/jetpack-react-data-sync-client';
 import ErrorBoundary from '$features/error-boundary/error-boundary';
 import PopOut from './pop-out/pop-out';
 import { useCornerstonePages } from '$features/cornerstone-pages/lib/stores/cornerstone-pages';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 const SpeedScore = () => {
 	const [ cornerstonePages ] = useCornerstonePages();
@@ -55,6 +56,11 @@ const SpeedScore = () => {
 		}
 	}, [ site.online, status ] );
 
+	const handleClickRefresh = () => {
+		recordBoostEvent( 'speed_score_refresh_clicked', {} );
+		loadScore( true );
+	};
+
 	// Ask the API to recompute the score.
 	const refreshScore = useCallback( async () => {
 		if ( site.online ) {
@@ -100,7 +106,7 @@ const SpeedScore = () => {
 								size="small"
 								weight="regular"
 								className={ styles[ 'action-button' ] }
-								onClick={ () => loadScore( true ) }
+								onClick={ handleClickRefresh }
 								disabled={ status === 'loading' }
 								icon={ <RefreshIcon /> }
 							>

projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import LeftArrow from '$svg/left-arrow';
 import { useNavigate } from 'react-router-dom';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 type BackButtonProps = {
 	route?: string;
@@ -9,6 +10,10 @@ type BackButtonProps = {
 const BackButton: React.FC< BackButtonProps > = ( { route = '/' } ) => {
 	const navigate = useNavigate();
 	const handleBack = () => {
+		recordBoostEvent( 'back_button_clicked', {
+			current_page: window.location.pathname + window.location.search + window.location.hash,
+			destination: route,
+		} );
 		navigate( route );
 	};
 

projects/plugins/boost/app/assets/src/js/layout/settings-page/support/support.tsx

@@ -1,9 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { Button } from '@automattic/jetpack-components';
 import styles from './support.module.scss';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 const Support = () => {
 	const openPaidSupport = () => {
+		recordBoostEvent( 'support_contact_us_clicked', {} );
 		const supportUrl = 'https://jetpackme.wordpress.com/contact-support/';
 		window.open( supportUrl, '_blank' );
 	};

projects/plugins/boost/changelog/update-boost-add-tracks-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+General: add Tracks events to clickable events on settings page