From 7f0e83e387b2983eaa74a5a0c0dcc71158c69c6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donncha=20=C3=93=20Caoimh?= <5656673+donnchawp@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:47:21 +0000 Subject: [PATCH] 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 * Update projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx Co-authored-by: Peter Petrov * 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 <3737780+haqadn@users.noreply.github.com> * 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 Co-authored-by: Adnan Haque <3737780+haqadn@users.noreply.github.com> --- .../show-stopper-error/show-stopper-error.tsx | 13 +++++- .../features/critical-css/status/status.tsx | 14 ++++++- .../quality-settings/quality-settings.tsx | 1 + .../src/js/features/page-cache/meta/meta.tsx | 13 +++++- .../features/speed-score/pop-out/pop-out.tsx | 8 +++- .../js/features/speed-score/speed-score.tsx | 8 +++- .../features/ui/back-button/back-button.tsx | 5 +++ .../layout/settings-page/support/support.tsx | 2 + .../src/js/layout/settings-page/tips/tips.tsx | 23 +++++++++-- .../app/assets/src/js/pages/index/index.tsx | 40 ++++++++++++++++--- .../changelog/update-boost-add-tracks-events | 4 ++ 11 files changed, 115 insertions(+), 16 deletions(-) create mode 100644 projects/plugins/boost/changelog/update-boost-add-tracks-events diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx index 66adda816b59a..5e640257c58f6 100644 --- a/projects/plugins/boost/app/assets/src/js/features/critical-css/show-stopper-error/show-stopper-error.tsx +++ b/projects/plugins/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: , } ) }{ ' ' } { displayUrls.map( ( { href, label }, index ) => ( - + { + recordBoostEvent( 'critical_css_error_link_clicked', {} ); + } } + href={ href } + target="_blank" + rel="noreferrer" + key={ index } + > { label } ) ) } @@ -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' ) } 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 index 2c305c1ab9559..d3b7d596ced7f 100644 --- 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: , + advanced: , } ) } @@ -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 : } disabled={ cssState.status === 'pending' } > diff --git a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx b/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx index f96ddf366229e..8e44f312efcc1 100644 --- a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx +++ b/projects/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={
} summary={ } + tracksEvent="image_cdn_panel_toggle" >
Adjust image quality per format
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 index fd5038c8afb6b..d802d49d60066 100644 --- 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' ) } { logging && ( - + { __( 'See Logs', 'jetpack-boost' ) } ) } @@ -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 index af12ebfe3615a..7b2338d27e4e5 100644 --- 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,7 +70,6 @@ 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. */ @@ -77,6 +77,12 @@ function PopOut( { scoreChange }: Props ) { 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 index 57beb9aa899c1..7010f0af185fb 100644 --- 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={ } > 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 index 83cb3472a619c..6ca35c669fd8f 100644 --- 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 index 6f5c73f3afb06..be15bca0b9e01 100644 --- 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 index a11acbbc54495..941e531730b71 100644 --- 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: , + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + recordBoostEvent( 'pingdom_link_clicked', {} ) } + href={ pingdomLink } + target="_blank" + rel="noopener noreferrer" + /> + ), } ) }
@@ -37,8 +45,15 @@ const Tips = () => { 'jetpack-boost' ), { - // eslint-disable-next-line jsx-a11y/anchor-has-content - link: , + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + recordBoostEvent( 'why_speed_link_clicked', {} ) } + href={ whySpeedLink } + target="_blank" + rel="noopener noreferrer" + /> + ), } ) } 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 index 3bce8566cc662..4373e1baeac18 100644 --- 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 (
@@ -52,8 +57,16 @@ const Index = () => { 'jetpack-boost' ), { - // eslint-disable-next-line jsx-a11y/anchor-has-content - link: , + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), } ) }

@@ -102,8 +115,16 @@ const Index = () => { 'jetpack-boost' ), { - // eslint-disable-next-line jsx-a11y/anchor-has-content - link: , + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), } ) }

@@ -135,8 +156,15 @@ const Index = () => { 'jetpack-boost' ), { - // eslint-disable-next-line jsx-a11y/anchor-has-content - link: , + link: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + recordBoostEvent( 'defer_js_link_clicked', {} ) } + href={ deferJsLink } + target="_blank" + rel="noopener noreferrer" + /> + ), } ) }

diff --git a/projects/plugins/boost/changelog/update-boost-add-tracks-events b/projects/plugins/boost/changelog/update-boost-add-tracks-events new file mode 100644 index 0000000000000..7d24b2973f91e --- /dev/null +++ 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.