Boost: Add tracks events (#38211)

* Add identifiers to upgrade CTA * Track CTA click on performance history * changelog
Automattic · Jul 8, 2024 · f392190 · f392190
1 parent d1da4aa
commit f392190
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/...ects/plugins/boost/app/assets/src/js/features/performance-history/performance-history.tsx b/...ects/plugins/boost/app/assets/src/js/features/performance-history/performance-history.tsx
@@ -46,12 +46,17 @@ const PerformanceHistoryBody = () => {
 		);
 	}
 
+	const handleUpgrade = () => {
+		recordBoostEvent( 'performance_history_upgrade_cta_click', {} );
+		navigate( '/upgrade' );
+	};
+
 	return (
 		<GraphComponent
 			{ ...( data as PerformanceHistoryData ) }
 			isFreshStart={ ! freshStartCompleted }
 			needsUpgrade={ needsUpgrade }
-			handleUpgrade={ () => navigate( '/upgrade' ) }
+			handleUpgrade={ handleUpgrade }
 			handleDismissFreshStart={ dismissFreshStart }
 			isLoading={ isFetching && ( ! data || data.periods.length === 0 ) }
 		/>
@@ -68,7 +73,9 @@ const PerformanceHistory = () => {
 					title={ __( 'Historical Performance', 'jetpack-boost' ) }
 					initialOpen={ isPanelOpen }
 					onToggle={ ( value: boolean ) => {
-						recordBoostEvent( 'performance_history_panel_toggle', { status: value ? 'open' : 'close' } );
+						recordBoostEvent( 'performance_history_panel_toggle', {
+							status: value ? 'open' : 'close',
+						} );
 						setPanelOpen( value );
 					} }
 					className={ styles[ 'performance-history-body' ] }

diff --git a/projects/plugins/boost/app/assets/src/js/features/upgrade-cta/upgrade-cta.tsx b/projects/plugins/boost/app/assets/src/js/features/upgrade-cta/upgrade-cta.tsx
@@ -8,13 +8,14 @@ import { useNavigate } from 'react-router-dom';
 
 type UpgradeCTAProps = {
 	description: string;
+	identifier: string;
 };
 
-const UpgradeCTA = ( { description }: UpgradeCTAProps ) => {
+const UpgradeCTA = ( { description, identifier }: UpgradeCTAProps ) => {
 	const navigate = useNavigate();
 
 	const showBenefits = () => {
-		recordBoostEvent( 'upsell_cta_from_settings_page_in_plugin', {} );
+		recordBoostEvent( 'upsell_cta_from_settings_page_in_plugin', { identifier } );
 		navigate( '/upgrade' );
 	};
 

diff --git a/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx b/projects/plugins/boost/app/assets/src/js/pages/index/index.tsx
@@ -76,6 +76,7 @@ const Index = () => {
 				<CriticalCssMeta />
 
 				<UpgradeCTA
+					identifier="critical-css"
 					description={ __(
 						'Save time by upgrading to Automatic Critical CSS generation.',
 						'jetpack-boost'
@@ -200,6 +201,7 @@ const Index = () => {
 			>
 				{ ! hasPremiumCdnFeatures && (
 					<UpgradeCTA
+						identifier="image-cdn"
 						description={ __(
 							'Auto-resize lazy images and adjust their quality.',
 							'jetpack-boost'
@@ -224,6 +226,7 @@ const Index = () => {
 							</p>
 							{ ! isaState?.available && (
 								<UpgradeCTA
+									identifier="image-guide"
 									description={ __(
 										'Upgrade to scan your site for issues - automatically!',
 										'jetpack-boost'

diff --git a/projects/plugins/boost/changelog/add-tracks-events b/projects/plugins/boost/changelog/add-tracks-events
@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Added some tracks events
+
+