Stats: Add blog_id to upsell impression and analytics events

client/components/stats-date-control/index.tsx

@@ -197,7 +197,7 @@ const StatsDateControl = ( {
 		let period = bestPeriodForDays( rangeInDays );
 
 		const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
-		recordTracksEvent( eventNames[ event_from ][ 'apply_button' ] );
+		recordTracksEvent( eventNames[ event_from ][ 'apply_button' ], { blog_id: siteId } );
 
 		const appliedShortcut = findShortcutForRange( shortcutList, {
 			chartStart: startDate,
@@ -241,7 +241,9 @@ const StatsDateControl = ( {
 				);
 			}
 		} else {
-			recordTracksEvent( eventNames[ event_from ][ shortcut.id as EventNameKey ] );
+			recordTracksEvent( eventNames[ event_from ][ shortcut.id as EventNameKey ], {
+				blog_id: siteId,
+			} );
 			if ( shortcut.id === 'all_time' ) {
 				closePopover();
 				setTimeout( () => page( generateAllTimeLink() ), 250 );
@@ -265,7 +267,7 @@ const StatsDateControl = ( {
 			onShortcutClick={ onShortcutClickHandler }
 			onDateControlClick={ () => {
 				const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
-				recordTracksEvent( eventNames[ event_from ][ 'trigger_button' ] );
+				recordTracksEvent( eventNames[ event_from ][ 'trigger_button' ], { blog_id: siteId } );
 			} }
 			tooltip={ translate( 'Filter all data by date' ) }
 			overlay={ overlay }

client/my-sites/stats/components/empty-state-action/empty-state-action.tsx

@@ -1,6 +1,8 @@
 import { Card, CardBody, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 import { trackStatsAnalyticsEvent } from 'calypso/my-sites/stats/utils';
+import { useSelector } from 'calypso/state';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import type { JSX } from 'react';
 
 import './styles.scss';
@@ -21,8 +23,13 @@ const EmptyStateAction: React.FC< EmptyStateActionProps > = ( {
 	analyticsDetails,
 	onClick,
 } ) => {
+	const siteId = useSelector( getSelectedSiteId );
+
 	const handleClick = () => {
-		trackStatsAnalyticsEvent( 'empty_state_interaction', analyticsDetails );
+		trackStatsAnalyticsEvent( 'empty_state_interaction', {
+			...analyticsDetails,
+			blog_id: siteId,
+		} );
 
 		onClick();
 	};

client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx

@@ -132,6 +132,7 @@ const StatsModuleDevices: React.FC< StatsModuleDevicesProps > = ( {
 		const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
 		recordTracksEvent( `${ event_from }_devices_module_menu_clicked`, {
 			button: optionLabels[ filter ]?.analyticsId ?? filter,
+			blog_id: siteId,
 		} );
 
 		setSelectedOption( filter );

client/my-sites/stats/features/modules/stats-locations/locations-nav-tabs.tsx

@@ -9,7 +9,13 @@ import { StatsQueryType } from '../types';
 import { UrlGeoMode, OPTION_KEYS } from './types';
 import useOptionLabels from './use-option-labels';
 
-function LocationsNavTabs( { query }: { query: StatsQueryType & { geoMode?: UrlGeoMode } } ) {
+function LocationsNavTabs( {
+	query,
+	givenSiteId,
+}: {
+	query: StatsQueryType & { geoMode?: UrlGeoMode };
+	givenSiteId: number;
+} ) {
 	const optionLabels = useOptionLabels();
 	const tabPanelTabs = useMemo( () => {
 		return Object.entries( optionLabels ).map( ( [ key, item ] ) => {
@@ -37,6 +43,7 @@ function LocationsNavTabs( { query }: { query: StatsQueryType & { geoMode?: UrlG
 				if ( tab?.path ) {
 					trackStatsAnalyticsEvent( 'stats_locations_module_menu_clicked', {
 						stat_type: tab.feature,
+						blog_id: givenSiteId,
 					} );
 					page( tab.path );
 				}

client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx

@@ -196,6 +196,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
 		trackStatsAnalyticsEvent( 'stats_locations_module_country_filter_changed', {
 			stat_type: optionLabels[ selectedOption ].feature,
 			country: value,
+			blog_id: siteId,
 		} );
 
 		setCountryFilter( value );
@@ -205,6 +206,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
 		const filter = selection.value;
 		trackStatsAnalyticsEvent( 'stats_locations_module_menu_clicked', {
 			stat_type: optionLabels[ filter ].feature,
+			blog_id: siteId,
 		} );
 
 		if ( summary ) {
@@ -217,6 +219,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
 	const onShowMoreClick = () => {
 		trackStatsAnalyticsEvent( 'stats_locations_module_show_more_clicked', {
 			stat_type: optionLabels[ selectedOption ].feature,
+			blog_id: siteId,
 		} );
 	};
 

client/my-sites/stats/features/modules/stats-top-posts/nav-tabs.tsx

@@ -48,6 +48,7 @@ function NavTabs( { query }: StatsModulePostsProps ) {
 				if ( tab?.path ) {
 					trackStatsAnalyticsEvent( 'stats_posts_module_menu_clicked', {
 						stat_type: tab.analyticsId,
+						blog_id: siteId,
 					} );
 
 					page( tab.path );

client/my-sites/stats/features/modules/stats-top-posts/stats-top-posts.tsx

@@ -77,6 +77,7 @@ const StatsTopPosts: React.FC< StatsModulePostsProps > = ( {
 	const onStatTypeChange = ( option: StatTypeOptionType ) => {
 		trackStatsAnalyticsEvent( 'stats_posts_module_menu_clicked', {
 			stat_type: option.analyticsId,
+			blog_id: siteId,
 		} );
 
 		setLocalStatType( option.value );

client/my-sites/stats/features/modules/stats-utm/stats-module-utm-dropdown.tsx

@@ -15,6 +15,7 @@ interface UTMDropdownProps {
 	onSelect: ( key: string ) => void;
 	selectOptions: Record< string, { selectLabel: string; isGrouped?: boolean } >;
 	selected: keyof typeof SELECTED_OPTION_KEYS;
+	siteId: number;
 }
 
 const BASE_CLASS_NAME = 'stats-utm-picker';
@@ -25,6 +26,7 @@ const UTMDropdown: React.FC< UTMDropdownProps > = ( {
 	onSelect,
 	selectOptions,
 	selected, // which option is indicated as selected
+	siteId,
 } ) => {
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 	const infoReferenceElement = useRef( null );
@@ -35,7 +37,7 @@ const UTMDropdown: React.FC< UTMDropdownProps > = ( {
 
 		if ( ! popoverOpened ) {
 			// record an event for opening the date picker
-			recordTracksEvent( `${ event_from }_stats_utm_dropdown_opened` );
+			recordTracksEvent( `${ event_from }_stats_utm_dropdown_opened`, { blog_id: siteId } );
 		}
 
 		togglePopoverOpened( ! popoverOpened );
@@ -48,6 +50,7 @@ const UTMDropdown: React.FC< UTMDropdownProps > = ( {
 		const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
 		recordTracksEvent( `${ event_from }_stats_utm_dropdown_option_selected`, {
 			option: key,
+			blog_id: siteId,
 		} );
 
 		togglePopoverOpened( false );

client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx

@@ -190,6 +190,7 @@ const StatsModuleUTM = ( {
 				onSelect={ setSelectedOption }
 				selectOptions={ optionLabels }
 				selected={ selectedOption }
+				siteId={ siteId }
 			/>
 		</div>
 	);

client/my-sites/stats/feedback/index.tsx

@@ -108,32 +108,34 @@ interface FeedbackPanelProps {
 	onDismissPanel: () => void;
 	onLeaveReview: () => void;
 	onSendFeedback: () => void;
+	siteId: number;
 }
 
 function FeedbackPanel( {
 	isOpen,
 	onDismissPanel,
 	onLeaveReview,
 	onSendFeedback,
+	siteId,
 }: FeedbackPanelProps ) {
 	const translate = useTranslate();
 	const [ animationClassName, setAnimationClassName ] = useState(
 		FEEDBACK_PANEL_ANIMATION_NAME_ENTRY
 	);
 
 	const handleDismissPanel = () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_DISMISS_FLOATING_PANEL );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_DISMISS_FLOATING_PANEL, { blog_id: siteId } );
 		setAnimationClassName( FEEDBACK_PANEL_ANIMATION_NAME_EXIT );
 		onDismissPanel();
 	};
 
 	const handleLeaveReviewFromPanel = () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_LEAVE_REVIEW_FROM_PANEL );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_LEAVE_REVIEW_FROM_PANEL, { blog_id: siteId } );
 		onLeaveReview();
 	};
 
 	const handleSendFeedbackFromPanel = () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_SEND_FEEDBACK_FROM_PANEL );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_SEND_FEEDBACK_FROM_PANEL, { blog_id: siteId } );
 		onSendFeedback();
 	};
 
@@ -167,30 +169,31 @@ function FeedbackPanel( {
 interface FeedbackCardProps {
 	onLeaveReview: () => void;
 	onSendFeedback: () => void;
+	siteId: number;
 }
 
-function FeedbackCard( { onLeaveReview, onSendFeedback }: FeedbackCardProps ) {
+function FeedbackCard( { onLeaveReview, onSendFeedback, siteId }: FeedbackCardProps ) {
 	const [ hasFiredViewEvent, setHasFiredViewEvent ] = useState( false );
 	const inlineFeedbackCardRef = useRef( null );
 	const isVisible = useOnScreen( inlineFeedbackCardRef );
 
 	useEffect( () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_DID_PRESENT_FEEDBACK_CARD );
-	}, [] );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_DID_PRESENT_FEEDBACK_CARD, { blog_id: siteId } );
+	}, [ siteId ] );
 
 	useEffect( () => {
 		if ( isVisible && ! hasFiredViewEvent ) {
-			trackStatsAnalyticsEvent( TRACKS_EVENT_DID_VIEW_FEEDBACK_CARD );
+			trackStatsAnalyticsEvent( TRACKS_EVENT_DID_VIEW_FEEDBACK_CARD, { blog_id: siteId } );
 			setHasFiredViewEvent( true );
 		}
-	}, [ isVisible, hasFiredViewEvent ] );
+	}, [ isVisible, hasFiredViewEvent, siteId ] );
 
 	const handleLeaveReviewFromCard = () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_LEAVE_REVIEW_FROM_CARD );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_LEAVE_REVIEW_FROM_CARD, { blog_id: siteId } );
 		onLeaveReview();
 	};
 	const handleSendFeedbackFromCard = () => {
-		trackStatsAnalyticsEvent( TRACKS_EVENT_SEND_FEEDBACK_FROM_CARD );
+		trackStatsAnalyticsEvent( TRACKS_EVENT_SEND_FEEDBACK_FROM_CARD, { blog_id: siteId } );
 		onSendFeedback();
 	};
 
@@ -214,10 +217,10 @@ function StatsFeedbackController( { siteId }: FeedbackProps ) {
 		if ( ! isPending && ! isError && shouldShowFeedbackPanel ) {
 			setTimeout( () => {
 				setIsFloatingPanelOpen( true );
-				trackStatsAnalyticsEvent( TRACKS_EVENT_VIEW_FLOATING_PANEL );
+				trackStatsAnalyticsEvent( TRACKS_EVENT_VIEW_FLOATING_PANEL, { blog_id: siteId } );
 			}, FEEDBACK_PANEL_PRESENTATION_DELAY );
 		}
-	}, [ isPending, isError, shouldShowFeedbackPanel ] );
+	}, [ isPending, isError, shouldShowFeedbackPanel, siteId ] );
 
 	const dismissPanelWithDelay = () => {
 		// Allows the animation to run first.
@@ -243,12 +246,17 @@ function StatsFeedbackController( { siteId }: FeedbackProps ) {
 
 	return (
 		<div className="stats-feedback-container">
-			<FeedbackCard onLeaveReview={ handleLeaveReview } onSendFeedback={ handleSendFeedback } />
+			<FeedbackCard
+				onLeaveReview={ handleLeaveReview }
+				onSendFeedback={ handleSendFeedback }
+				siteId={ siteId }
+			/>
 			<FeedbackPanel
 				isOpen={ isFloatingPanelOpen }
 				onDismissPanel={ handleDismissPanel }
 				onLeaveReview={ handleLeaveReview }
 				onSendFeedback={ handleSendFeedback }
+				siteId={ siteId }
 			/>
 		</div>
 	);

client/my-sites/stats/feedback/modal/index.tsx

@@ -58,10 +58,12 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 			onClose();
 
 			if ( isDirectClose ) {
-				trackStatsAnalyticsEvent( 'stats_feedback_action_directly_close_form_modal' );
+				trackStatsAnalyticsEvent( 'stats_feedback_action_directly_close_form_modal', {
+					blog_id: siteId,
+				} );
 			}
 		},
-		[ onClose ]
+		[ onClose, siteId ]
 	);
 
 	const onFormSubmit = useCallback( () => {
@@ -79,8 +81,9 @@ const FeedbackModal: React.FC< ModalProps > = ( { siteId, onClose } ) => {
 
 		trackStatsAnalyticsEvent( 'stats_feedback_action_submit_form', {
 			feedback: content,
+			blog_id: siteId,
 		} );
-	}, [ content, submitFeedback ] );
+	}, [ content, submitFeedback, siteId ] );
 
 	useEffect( () => {
 		if ( isSubmissionSuccessful ) {

client/my-sites/stats/mini-carousel/index.jsx

@@ -93,9 +93,15 @@ const MiniCarousel = ( { slug, isSitePrivate } ) => {
 			return;
 		} else if ( dotPagerIndex >= viewEvents.length ) {
 			// Prevent out of bounds index when switching sites.
-			recordTracksEvent( viewEvents[ viewEvents.length - 1 ], { site_id: selectedSiteId } );
+			recordTracksEvent( viewEvents[ viewEvents.length - 1 ], {
+				blog_id: selectedSiteId,
+				site_id: selectedSiteId,
+			} );
 		} else {
-			recordTracksEvent( viewEvents[ dotPagerIndex ], { site_id: selectedSiteId } );
+			recordTracksEvent( viewEvents[ dotPagerIndex ], {
+				blog_id: selectedSiteId,
+				site_id: selectedSiteId,
+			} );
 		}
 	}, [ viewEvents, dotPagerIndex, selectedSiteId ] );
 

client/my-sites/stats/mini-carousel/mini-carousel-block.jsx

@@ -4,8 +4,9 @@ import { Button } from '@automattic/components';
 import { Icon, chevronDown } from '@wordpress/icons';
 import { translate } from 'i18n-calypso';
 import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import FormattedHeader from 'calypso/components/formatted-header';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { dismissBlock } from './actions';
 
 import './mini-carousel-block.scss';
@@ -21,21 +22,22 @@ const MiniCarouselBlock = ( {
 	dismissText,
 } ) => {
 	const dispatch = useDispatch();
+	const selectedSiteId = useSelector( getSelectedSiteId );
 
 	const onClick = useCallback( () => {
-		recordTracksEvent( clickEvent );
+		recordTracksEvent( clickEvent, { blog_id: selectedSiteId } );
 		if ( href.startsWith( '/' ) ) {
 			page( href );
 			return;
 		}
 
 		location.href = href;
-	}, [ clickEvent, href ] );
+	}, [ clickEvent, href, selectedSiteId ] );
 
 	const onDismiss = useCallback( () => {
-		recordTracksEvent( dismissEvent );
+		recordTracksEvent( dismissEvent, { blog_id: selectedSiteId } );
 		dispatch( dismissBlock( dismissEvent ) );
-	}, [ dismissEvent, dispatch ] );
+	}, [ dismissEvent, dispatch, selectedSiteId ] );
 
 	return (
 		<div className="mini-carousel-block">

client/my-sites/stats/pages/purchase/index.tsx

@@ -7,7 +7,7 @@ import page from '@automattic/calypso-router';
 import { ProductsList } from '@automattic/data-stores';
 import clsx from 'clsx';
 import { translate } from 'i18n-calypso';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import StatsNavigation from 'calypso/blocks/stats-navigation';
 import DocumentHead from 'calypso/components/data/document-head';
 import QueryProductsList from 'calypso/components/data/query-products-list';
@@ -70,6 +70,8 @@ const StatsPurchasePage = ( {
 		}
 	}, [ siteSlug, isVip ] );
 
+	const hasTrackedUpgradeSource = useRef( false );
+
 	useEffect( () => {
 		// Scroll to top on page load
 		window.scrollTo( 0, 0 );
@@ -91,10 +93,13 @@ const StatsPurchasePage = ( {
 				break;
 		}
 
-		if ( triggeredEvent ) {
-			recordTracksEvent( triggeredEvent );
+		// Wait for the selected site to resolve so the event carries a real
+		// blog_id, and fire at most once per page load.
+		if ( triggeredEvent && siteId && ! hasTrackedUpgradeSource.current ) {
+			hasTrackedUpgradeSource.current = true;
+			recordTracksEvent( triggeredEvent, { blog_id: siteId } );
 		}
-	}, [ siteSlug, query, query?.from ] );
+	}, [ siteSlug, query, query?.from, siteId ] );
 
 	const commercialProduct = useSelector( ( state ) =>
 		getProductBySlug( state, PRODUCT_JETPACK_STATS_YEARLY )