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
Automattic · Sep 25, 2024 · a905204 · a905204
1 parent e40b189
commit a905204
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git 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
 							/>
 						</div>
 					) }

diff --git 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
@@ -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 (
-							<Button onClick={ onTriggerClick } ref={ buttonRef }>
+							<Button
+								onClick={ () => {
+									const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
+									recordTracksEvent( eventNames[ event_from ][ 'trigger_button' ] );
+									onTriggerClick();
+								} }
+								ref={ buttonRef }
+							>
 								{ getButtonLabel() }
 								<Icon className="gridicon" icon={ calendar } />
 							</Button>
@@ -152,6 +203,7 @@ const StatsDateControl = ( {
 					useArrowNavigation
 					customTitle="Date Range"
 					focusedMonth={ moment( dateRange.chartEnd ).toDate() }
+					onShortcutClick={ onShortcutClickHandler }
 				/>
 			) : (
 				<DateControlPicker