From a905204d72061f4a58694dd74ba04f73269271f1 Mon Sep 17 00:00:00 2001 From: Anna McPhee <30754158+annacmc@users.noreply.github.com> Date: Wed, 25 Sep 2024 06:26:54 -0600 Subject: [PATCH] Stats: DateRange Picker adds shortcut and trigger click tracking (#94834) * add shortcut click handler to stats datecontrol * add onShortCutClick prop to shortcuts.tsx * add to component index * update commenting * add tracking of shortcut clicks * add tracking to button trigger click * remove commenting & checks * tidy up * hardcoding event names * update trigger button event * resolve typing problems --- client/components/date-range/index.js | 2 + client/components/date-range/shortcuts.tsx | 8 +++ .../components/stats-date-control/index.tsx | 58 ++++++++++++++++++- 3 files changed, 65 insertions(+), 3 deletions(-) diff --git a/client/components/date-range/index.js b/client/components/date-range/index.js index 3695cc83be528..4c845bb3ec938 100644 --- a/client/components/date-range/index.js +++ b/client/components/date-range/index.js @@ -53,6 +53,7 @@ export class DateRange extends Component { useArrowNavigation: PropTypes.bool, overlay: PropTypes.node, customTitle: PropTypes.string, + onShortcutClick: PropTypes.func, }; static defaultProps = { @@ -479,6 +480,7 @@ export class DateRange extends Component { locked={ !! this.props.overlay } startDate={ this.state.startDate } endDate={ this.state.endDate } + onShortcutClick={ this.props.onShortcutClick } // for tracking shortcut clicks /> ) } diff --git a/client/components/date-range/shortcuts.tsx b/client/components/date-range/shortcuts.tsx index 90ed63dbd2a2d..a721cd1038177 100644 --- a/client/components/date-range/shortcuts.tsx +++ b/client/components/date-range/shortcuts.tsx @@ -14,12 +14,14 @@ const DATERANGE_PERIOD = { const DateRangePickerShortcuts = ( { currentShortcut, onClick, + onShortcutClick, // Optional callback function for tracking shortcut clicks locked = false, startDate, endDate, }: { currentShortcut?: string; onClick: ( newFromDate: moment.Moment, newToDate: moment.Moment, shortcutId: string ) => void; + onShortcutClick?: ( shortcutId: string ) => void; locked?: boolean; startDate?: Moment; endDate?: Moment; @@ -89,6 +91,11 @@ const DateRangePickerShortcuts = ( { const newFromDate = moment().subtract( offset + range, 'days' ); onClick( newFromDate, newToDate, id || '' ); + + // Call the onShortcutClick if provided + if ( onShortcutClick && id ) { + onShortcutClick( id ); + } }; currentShortcut = @@ -120,6 +127,7 @@ const DateRangePickerShortcuts = ( { DateRangePickerShortcuts.propTypes = { currentShortcut: PropTypes.string, onClick: PropTypes.func.isRequired, + onShortcutClick: PropTypes.func, locked: PropTypes.bool, startDate: PropTypes.object, endDate: PropTypes.object, diff --git a/client/components/stats-date-control/index.tsx b/client/components/stats-date-control/index.tsx index b13c1dc605873..c9427287c71d2 100644 --- a/client/components/stats-date-control/index.tsx +++ b/client/components/stats-date-control/index.tsx @@ -15,6 +15,44 @@ import './style.scss'; const COMPONENT_CLASS_NAME = 'stats-date-control'; const isCalendarEnabled = config.isEnabled( 'stats/date-picker-calendar' ); +// Define the event name keys for tracking events +type EventNameKey = + | 'last_7_days' + | 'last_30_days' + | 'last_90_days' + | 'last_year' + | 'custom_date_range' + | 'apply_button' + | 'trigger_button'; + +// Define the structure for tracking event names +interface EventNames { + jetpack_odyssey: Record< EventNameKey, string >; + calypso: Record< EventNameKey, string >; +} + +// Define the tracking event names object. Hardcoding event names ensures consistency, searchability, and prevents errors per Tracks naming conventions. +const eventNames: EventNames = { + jetpack_odyssey: { + last_7_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_7_days_click', + last_30_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_30_days_click', + last_90_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_90_days_click', + last_year: 'jetpack_odyssey_stats_date_picker_shortcut_last_year_click', + custom_date_range: 'jetpack_odyssey_stats_date_picker_shortcut_custom_date_range_click', + apply_button: 'jetpack_odyssey_stats_date_picker_apply_button_click', + trigger_button: 'jetpack_odyssey_stats_date_picker_trigger_click', + }, + calypso: { + last_7_days: 'calypso_stats_date_picker_shortcut_last_7_days_click', + last_30_days: 'calypso_stats_date_picker_shortcut_last_30_days_click', + last_90_days: 'calypso_stats_date_picker_shortcut_last_90_days_click', + last_year: 'calypso_stats_date_picker_shortcut_last_year_click', + custom_date_range: 'calypso_stats_date_picker_shortcut_custom_date_range_click', + apply_button: 'calypso_stats_date_picker_apply_button_click', + trigger_button: 'calypso_stats_date_picker_trigger_click', + }, +}; + const StatsDateControl = ( { slug, queryParams, @@ -66,7 +104,7 @@ const StatsDateControl = ( { const period = bestPeriodForDays( rangeInDays ); const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso'; - recordTracksEvent( `${ event_from }_stats_date_picker_apply_button_clicked` ); + recordTracksEvent( eventNames[ event_from ][ 'apply_button' ] ); // Update chart via routing. setTimeout( () => page( generateNewLink( period, startDate, endDate ) ), 250 ); @@ -80,12 +118,18 @@ const StatsDateControl = ( { const endDate = anchor.format( 'YYYY-MM-DD' ); const startDate = anchor.subtract( shortcut.range, 'days' ).format( 'YYYY-MM-DD' ); - recordTracksEvent( `${ event_from }_stats_date_picker_shortcut_${ shortcut.id }_clicked` ); + recordTracksEvent( eventNames[ event_from ][ shortcut.id as EventNameKey ] ); // Update chart via routing. setTimeout( () => page( generateNewLink( shortcut.period, startDate, endDate ) ), 250 ); }; + // handler for shortcut clicks in new updated DateRange component + const onShortcutClickHandler = ( shortcutId: EventNameKey ) => { + const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso'; + recordTracksEvent( eventNames[ event_from ][ shortcutId ] ); + }; + const getShortcutForRange = () => { // Search the shortcut array for something matching the current date range. // Returns shortcut or null; @@ -140,7 +184,14 @@ const StatsDateControl = ( { buttonRef: RefObject< typeof Button >; } ) => { return ( - @@ -152,6 +203,7 @@ const StatsDateControl = ( { useArrowNavigation customTitle="Date Range" focusedMonth={ moment( dateRange.chartEnd ).toDate() } + onShortcutClick={ onShortcutClickHandler } /> ) : (