Boost: Add tracks event to clickable events on settings page (#40246)

* Add tracks event to clicking of speed score refresh * changelog * Add critical_css_regenerate_clicked Tracks event * Add Tracks events for page cache module * Add tracking to Image CDN adjust quality click * Add tracks event to "Contact Us" button * Add the tracksEventName to the quality settings story too * Update projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx Co-authored-by: Peter Petrov <[email protected]> * Update projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx Co-authored-by: Peter Petrov <[email protected]> * Record boost even when speed score alert shown * Updates to Tracks are general * Record clicks on "Contact Support" in CCCS * Add tracking on back button * add changelog * Revert changes done by prettier * Add Tracks record of Critical CSS link clicks * Track clicks on "advanced recommendations" link * Record clicks on css error links * Record clicks on the defer js link * Change it for ESLint * Fix renamed tracks prop * Record clicks on tip links * Links open themselves, not JS. Remove the window.open * Typo fix to changelog * Call the correct function to track C CSS clicks * Replace with neater code. props @dilirity * Record the scores and direction of change * Update projects/plugins/boost/changelog/update-boost-add-tracks-events Actions take^h^h^h^htook place in the past. Co-authored-by: Adnan Haque <[email protected]> * Don't track scores * Add tracks event on "see logs" click * Remove this as it's needed now. eslint update? --------- Co-authored-by: Peter Petrov <[email protected]> Co-authored-by: Adnan Haque <[email protected]>
Automattic · Dec 16, 2024 · 7f0e83e · 7f0e83e
1 parent b007df8
commit 7f0e83e
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 16 deletions.
diff --git a/...s/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx b/...s/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx
@@ -76,7 +76,15 @@ const Description = ( { errorSet }: { errorSet: ErrorSet } ) => {
 				b: <b />,
 			} ) }{ ' ' }
 			{ displayUrls.map( ( { href, label }, index ) => (
-				<a href={ href } target="_blank" rel="noreferrer" key={ index }>
+				<a
+					onClick={ () => {
+						recordBoostEvent( 'critical_css_error_link_clicked', {} );
+					} }
+					href={ href }
+					target="_blank"
+					rel="noreferrer"
+					key={ index }
+				>
 					{ label }
 				</a>
 			) ) }
@@ -203,6 +211,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>

diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/status/status.tsx b/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,15 @@ 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();
+	};
+
+	const handleAdvancedClick = () => {
+		recordBoostEvent( 'critical_css_advanced_link_clicked', {} );
+	};
+
 	// If there has been a fatal error, show it.
 	if ( showFatalError ) {
 		return (
@@ -91,7 +101,7 @@ const Status: React.FC< StatusTypes > = ( {
 									providersWithErrors.length
 								),
 								{
-									advanced: <Link to="/critical-css-advanced" />,
+									advanced: <Link to="/critical-css-advanced" onClick={ handleAdvancedClick } />,
 								}
 							) }
 						</>
@@ -104,7 +114,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' }
 			>

diff --git a/.../plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx b/.../plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx
@@ -53,6 +53,7 @@ const QualitySettings = ( { isPremium }: QualitySettingsProps ) => {
 					toggleText={ __( 'Adjust Quality', 'jetpack-boost' ) }
 					header={ <Header /> }
 					summary={ <Summary imageCdnQuality={ imageCdnQuality } /> }
+					tracksEvent="image_cdn_panel_toggle"
 				>
 					<div className={ styles.body }>
 						<h5>Adjust image quality per format</h5>

diff --git a/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx b/projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx
@@ -25,9 +25,14 @@ const Meta = () => {
 	const [ clearedCacheMessage, runClearPageCacheAction ] = useClearPageCacheAction();
 
 	const clearPageCache = () => {
+		recordBoostEvent( 'page_cache_clear_clicked', {} );
 		runClearPageCacheAction.mutate();
 	};
 
+	const handleSeeLogsClick = () => {
+		recordBoostEvent( 'page_cache_see_logs_clicked', {} );
+	};
+
 	const totalBypassPatterns = bypassPatterns?.length || 0;
 
 	const getSummary = () => {
@@ -121,7 +126,11 @@ const Meta = () => {
 					{ __( 'Activate logging to track all your cache events.', 'jetpack-boost' ) }
 				</label>
 				{ logging && (
-					<Link className={ styles[ 'see-logs-link' ] } to="/cache-debug-log">
+					<Link
+						onClick={ handleSeeLogsClick }
+						className={ styles[ 'see-logs-link' ] }
+						to="/cache-debug-log"
+					>
 						{ __( 'See Logs', 'jetpack-boost' ) }
 					</Link>
 				) }
@@ -193,6 +202,7 @@ const BypassPatterns = ( {
 	}, [ showErrorNotice ] );
 
 	function save() {
+		recordBoostEvent( 'page_cache_exceptions_save_clicked', {} );
 		setPatterns( inputValue );
 	}
 
@@ -264,6 +274,7 @@ const BypassPatternsExample = ( { children }: BypassPatternsExampleProps ) => {
 				href="#"
 				className={ styles[ 'example-button' ] }
 				onClick={ e => {
+					recordBoostEvent( 'page_cache_see_example_clicked', {} );
 					e.preventDefault();
 					setShow( ! show );
 				} }

diff --git a/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx b/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.
@@ -69,14 +70,19 @@ function PopOut( { scoreChange }: Props ) {
 	 * Dismissed means that the user asked to never show us this alert again.
 	 */
 	const [ isDismissed, dismissAlert ] = useDismissibleAlertState( message.id );
-
 	/*
 	 * Hide the alert for now. The alert will show up again if the user refreshes the page.
 	 */
 	const [ isClosed, setClose ] = useState( false );
 
 	const hideAlert = () => setClose( true );
 
+	if ( hasScoreChanged ) {
+		recordBoostEvent( 'speed_score_alert_shown', {
+			score_direction: scoreChange > 0 ? 'up' : 'down',
+		} );
+	}
+
 	const animationStyles = useSpring( {
 		from: {
 			right: '-100%',

diff --git a/projects/plugins/boost/app/assets/src/js/features/speed-score/speed-score.tsx b/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 /> }
 							>

diff --git a/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx b/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.href.replace( window.location.origin, '' ),
+			destination: route,
+		} );
 		navigate( route );
 	};
 

diff --git a/projects/plugins/boost/app/assets/src/js/layout/settings-page/support/support.tsx b/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' );
 	};

diff --git a/projects/plugins/boost/app/assets/src/js/layout/settings-page/tips/tips.tsx b/projects/plugins/boost/app/assets/src/js/layout/settings-page/tips/tips.tsx
@@ -2,6 +2,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import styles from './tips.module.scss';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 const Tips = () => {
 	const pingdomLink = getRedirectUrl( 'jetpack-boost-pingdom' );
@@ -22,8 +23,15 @@ const Tips = () => {
 										'jetpack-boost'
 									),
 									{
-										// eslint-disable-next-line jsx-a11y/anchor-has-content
-										link: <a href={ pingdomLink } target="_blank" rel="noopener noreferrer" />,
+										link: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a
+												onClick={ () => recordBoostEvent( 'pingdom_link_clicked', {} ) }
+												href={ pingdomLink }
+												target="_blank"
+												rel="noopener noreferrer"
+											/>
+										),
 									}
 								) }
 							</div>
@@ -37,8 +45,15 @@ const Tips = () => {
 										'jetpack-boost'
 									),
 									{
-										// eslint-disable-next-line jsx-a11y/anchor-has-content
-										link: <a href={ whySpeedLink } target="_blank" rel="noopener noreferrer" />,
+										link: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a
+												onClick={ () => recordBoostEvent( 'why_speed_link_clicked', {} ) }
+												href={ whySpeedLink }
+												target="_blank"
+												rel="noopener noreferrer"
+											/>
+										),
 									}
 								) }
 							</div>

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
@@ -17,6 +17,7 @@ import PremiumTooltip from '$features/premium-tooltip/premium-tooltip';
 import Upgraded from '$features/ui/upgraded/upgraded';
 import PageCacheModule from '$features/page-cache/page-cache';
 import Pill from '$features/ui/pill/pill';
+import { recordBoostEvent } from '$lib/utils/analytics';
 
 const Index = () => {
 	const criticalCssLink = getRedirectUrl( 'jetpack-boost-critical-css' );
@@ -36,6 +37,10 @@ const Index = () => {
 	const hasPremiumCdnFeatures =
 		premiumFeatures.includes( 'image-cdn-liar' ) && premiumFeatures.includes( 'image-cdn-quality' );
 
+	const handleCriticalCssLink = () => {
+		recordBoostEvent( 'critical_css_link_clicked', {} );
+	};
+
 	return (
 		<div className="jb-container--narrow">
 			<CornerstonePages />
@@ -52,8 +57,16 @@ const Index = () => {
 									'jetpack-boost'
 								),
 								{
-									// eslint-disable-next-line jsx-a11y/anchor-has-content
-									link: <a href={ criticalCssLink } target="_blank" rel="noopener noreferrer" />,
+									link: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ criticalCssLink }
+											target="_blank"
+											onClick={ handleCriticalCssLink }
+											style={ { cursor: 'pointer' } }
+											rel="noopener noreferrer"
+										/>
+									),
 								}
 							) }
 						</p>
@@ -102,8 +115,16 @@ const Index = () => {
 									'jetpack-boost'
 								),
 								{
-									// eslint-disable-next-line jsx-a11y/anchor-has-content
-									link: <a href={ criticalCssLink } target="_blank" rel="noopener noreferrer" />,
+									link: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											href={ criticalCssLink }
+											target="_blank"
+											onClick={ handleCriticalCssLink }
+											style={ { cursor: 'pointer' } }
+											rel="noopener noreferrer"
+										/>
+									),
 								}
 							) }
 						</p>
@@ -135,8 +156,15 @@ const Index = () => {
 								'jetpack-boost'
 							),
 							{
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								link: <a href={ deferJsLink } target="_blank" rel="noopener noreferrer" />,
+								link: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										onClick={ () => recordBoostEvent( 'defer_js_link_clicked', {} ) }
+										href={ deferJsLink }
+										target="_blank"
+										rel="noopener noreferrer"
+									/>
+								),
 							}
 						) }
 					</p>

diff --git a/projects/plugins/boost/changelog/update-boost-add-tracks-events b/projects/plugins/boost/changelog/update-boost-add-tracks-events
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+General: Added tracks events to clickable elements on the settings page.