diff --git a/client/components/stats-date-control/index.tsx b/client/components/stats-date-control/index.tsx index 8a6d08390847..5e88066b7928 100644 --- a/client/components/stats-date-control/index.tsx +++ b/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 } diff --git a/client/my-sites/stats/components/empty-state-action/empty-state-action.tsx b/client/my-sites/stats/components/empty-state-action/empty-state-action.tsx index 53e9bbdc36d9..678240b0dab6 100644 --- a/client/my-sites/stats/components/empty-state-action/empty-state-action.tsx +++ b/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(); }; diff --git a/client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx b/client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx index 1b69e3f82195..b184b9189478 100644 --- a/client/my-sites/stats/features/modules/stats-devices/stats-module-devices.tsx +++ b/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 ); diff --git a/client/my-sites/stats/features/modules/stats-locations/locations-nav-tabs.tsx b/client/my-sites/stats/features/modules/stats-locations/locations-nav-tabs.tsx index 730bed9902f6..76b31337b5b4 100644 --- a/client/my-sites/stats/features/modules/stats-locations/locations-nav-tabs.tsx +++ b/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 ); } diff --git a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx b/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx index d768b71b8921..9db94b25c090 100644 --- a/client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx +++ b/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, } ); }; diff --git a/client/my-sites/stats/features/modules/stats-top-posts/nav-tabs.tsx b/client/my-sites/stats/features/modules/stats-top-posts/nav-tabs.tsx index 857ef68a9498..6b8e0f6751e7 100644 --- a/client/my-sites/stats/features/modules/stats-top-posts/nav-tabs.tsx +++ b/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 ); diff --git a/client/my-sites/stats/features/modules/stats-top-posts/stats-top-posts.tsx b/client/my-sites/stats/features/modules/stats-top-posts/stats-top-posts.tsx index 771df6dffe69..20e443611794 100644 --- a/client/my-sites/stats/features/modules/stats-top-posts/stats-top-posts.tsx +++ b/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 ); diff --git a/client/my-sites/stats/features/modules/stats-utm/stats-module-utm-dropdown.tsx b/client/my-sites/stats/features/modules/stats-utm/stats-module-utm-dropdown.tsx index 8cac814e1a71..0359fdf07514 100644 --- a/client/my-sites/stats/features/modules/stats-utm/stats-module-utm-dropdown.tsx +++ b/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 ); diff --git a/client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx b/client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx index 2c3a4e5a98c0..ac62b02d5efd 100644 --- a/client/my-sites/stats/features/modules/stats-utm/stats-module-utm.jsx +++ b/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 } /> ); diff --git a/client/my-sites/stats/feedback/index.tsx b/client/my-sites/stats/feedback/index.tsx index 122a38330339..857992917fd8 100644 --- a/client/my-sites/stats/feedback/index.tsx +++ b/client/my-sites/stats/feedback/index.tsx @@ -108,6 +108,7 @@ interface FeedbackPanelProps { onDismissPanel: () => void; onLeaveReview: () => void; onSendFeedback: () => void; + siteId: number; } function FeedbackPanel( { @@ -115,6 +116,7 @@ function FeedbackPanel( { onDismissPanel, onLeaveReview, onSendFeedback, + siteId, }: FeedbackPanelProps ) { const translate = useTranslate(); const [ animationClassName, setAnimationClassName ] = useState( @@ -122,18 +124,18 @@ function FeedbackPanel( { ); 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 (
- +
); diff --git a/client/my-sites/stats/feedback/modal/index.tsx b/client/my-sites/stats/feedback/modal/index.tsx index 196c8f08e486..32c47e850622 100644 --- a/client/my-sites/stats/feedback/modal/index.tsx +++ b/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 ) { diff --git a/client/my-sites/stats/mini-carousel/index.jsx b/client/my-sites/stats/mini-carousel/index.jsx index baf549696531..dc1c8b88176d 100644 --- a/client/my-sites/stats/mini-carousel/index.jsx +++ b/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 ] ); diff --git a/client/my-sites/stats/mini-carousel/mini-carousel-block.jsx b/client/my-sites/stats/mini-carousel/mini-carousel-block.jsx index c6c731e0b49a..fc625dc90528 100644 --- a/client/my-sites/stats/mini-carousel/mini-carousel-block.jsx +++ b/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 (
diff --git a/client/my-sites/stats/pages/purchase/index.tsx b/client/my-sites/stats/pages/purchase/index.tsx index 20caaa4506cf..0bdb248680a8 100644 --- a/client/my-sites/stats/pages/purchase/index.tsx +++ b/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 ) diff --git a/client/my-sites/stats/promo-cards/index.jsx b/client/my-sites/stats/promo-cards/index.jsx index 5fec9d786be3..98c615bfb027 100644 --- a/client/my-sites/stats/promo-cards/index.jsx +++ b/client/my-sites/stats/promo-cards/index.jsx @@ -64,9 +64,15 @@ export default function PromoCards( { isOdysseyStats, slug, pageSlug } ) { 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 ] ); @@ -103,7 +109,7 @@ export default function PromoCards( { isOdysseyStats, slug, pageSlug } ) { '-', '_' ); - recordTracksEvent( tracksEventName ); + recordTracksEvent( tracksEventName, { blog_id: selectedSiteId } ); }; const pagerDidSelectPage = ( index ) => setDotPagerIndex( index ); diff --git a/client/my-sites/stats/stats-card-upsell/index.tsx b/client/my-sites/stats/stats-card-upsell/index.tsx index cb91969098e2..1005580037a3 100644 --- a/client/my-sites/stats/stats-card-upsell/index.tsx +++ b/client/my-sites/stats/stats-card-upsell/index.tsx @@ -39,8 +39,9 @@ const StatsCardUpsell: React.FC< Props > = ( { className, statType, siteId, butt useEffect( () => { trackStatsAnalyticsEvent( 'stats_card_upsell_view', { stat_type: statType, + blog_id: siteId, } ); - }, [ statType ] ); + }, [ statType, siteId ] ); return ( = ( { className, siteId, const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso'; recordTracksEvent( `${ event_from }_${ tracksEvent }`, { module: statType, + blog_id: siteId, } ); // redirect to the Plugins page diff --git a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-jetpack.tsx b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-jetpack.tsx index afef7fdc4a54..7d1ad8ef2303 100644 --- a/client/my-sites/stats/stats-card-upsell/stats-card-upsell-jetpack.tsx +++ b/client/my-sites/stats/stats-card-upsell/stats-card-upsell-jetpack.tsx @@ -35,10 +35,11 @@ const StatsCardUpsellJetpack: React.FC< Props > = ( { className, siteId, statTyp // publish an event const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso'; - recordTracksEvent( `${ event_from }_${ tracksEvent }` ); + recordTracksEvent( `${ event_from }_${ tracksEvent }`, { blog_id: siteId } ); // publish new unified upgrade event trackStatsAnalyticsEvent( 'stats_upgrade_clicked', { type: statType, + blog_id: siteId, } ); // redirect to the Purchase page diff --git a/client/my-sites/stats/stats-chart-tabs/chart-header.jsx b/client/my-sites/stats/stats-chart-tabs/chart-header.jsx index 2e720f0e3a47..c4cfd4d67733 100644 --- a/client/my-sites/stats/stats-chart-tabs/chart-header.jsx +++ b/client/my-sites/stats/stats-chart-tabs/chart-header.jsx @@ -40,7 +40,9 @@ const ChartHeader = ( { return; } - events.forEach( ( event ) => recordTracksEvent( event.name, event.params ) ); + events.forEach( ( event ) => + recordTracksEvent( event.name, { blog_id: siteId, ...event.params } ) + ); dispatch( toggleUpsellModal( siteId, statType ) ); }; diff --git a/client/my-sites/stats/stats-chart-tabs/index.jsx b/client/my-sites/stats/stats-chart-tabs/index.jsx index 1b955aa465b8..15144f87adc3 100644 --- a/client/my-sites/stats/stats-chart-tabs/index.jsx +++ b/client/my-sites/stats/stats-chart-tabs/index.jsx @@ -161,7 +161,9 @@ class StatModuleChartTabs extends Component { } // Record the chart type change event - this.props.recordTracksEvent( CHART_TYPE_EVENTS[ event_from ][ newType ] ); + this.props.recordTracksEvent( CHART_TYPE_EVENTS[ event_from ][ newType ], { + blog_id: siteId, + } ); }; formatLineChartTimeTick = ( date ) => { diff --git a/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder.tsx b/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder.tsx index 8489ec26616d..e6455bc3b124 100644 --- a/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder.tsx +++ b/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder.tsx @@ -6,6 +6,8 @@ import clsx from 'clsx'; import { useTranslate } from 'i18n-calypso'; import React, { useEffect, useRef } from 'react'; import useWPAdminTheme from 'calypso/my-sites/stats/hooks/use-wp-admin-theme'; +import { useSelector } from 'calypso/state'; +import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { trackStatsAnalyticsEvent } from '../utils'; import StatsUtmBuilderForm, { type UtmBuilderProps } from './stats-module-utm-builder-form'; @@ -18,6 +20,7 @@ interface Props { const UTMBuilder: React.FC< Props > = ( { modalClassName, trigger, initialData } ) => { const [ isOpen, setOpen ] = useState< boolean | null >( null ); const scrollY = useRef( { y: 0, mobile: false } ); + const siteId = useSelector( getSelectedSiteId ); const openModal = () => { const isMobile = document.body.scrollTop > 0; @@ -46,8 +49,11 @@ const UTMBuilder: React.FC< Props > = ( { modalClassName, trigger, initialData } const translate = useTranslate(); const handleClick = () => { - trackStatsAnalyticsEvent( 'utm_builder_opened' ); - trackStatsAnalyticsEvent( 'advanced_feature_interaction', { feature: 'utm_builder' } ); + trackStatsAnalyticsEvent( 'utm_builder_opened', { blog_id: siteId } ); + trackStatsAnalyticsEvent( 'advanced_feature_interaction', { + feature: 'utm_builder', + blog_id: siteId, + } ); openModal(); }; diff --git a/client/my-sites/stats/stats-module/all-time-nav.jsx b/client/my-sites/stats/stats-module/all-time-nav.jsx index 643a3f46ed71..430b8c2e72f0 100644 --- a/client/my-sites/stats/stats-module/all-time-nav.jsx +++ b/client/my-sites/stats/stats-module/all-time-nav.jsx @@ -94,7 +94,9 @@ export const StatsModuleSummaryLinks = ( props ) => { return; } - events.forEach( ( event ) => recordTracksEvent( event.name, event.params ) ); + events.forEach( ( event ) => + recordTracksEvent( event.name, { blog_id: siteId, ...event.params } ) + ); dispatch( toggleUpsellModal( siteId, statType ) ); }; diff --git a/client/my-sites/stats/stats-notices/commercial-site-upgrade-notice.tsx b/client/my-sites/stats/stats-notices/commercial-site-upgrade-notice.tsx index 4f165fd1566f..f8c089824f64 100644 --- a/client/my-sites/stats/stats-notices/commercial-site-upgrade-notice.tsx +++ b/client/my-sites/stats/stats-notices/commercial-site-upgrade-notice.tsx @@ -42,9 +42,13 @@ const CommercialSiteUpgradeNotice = ( { const dismissNotice = () => { if ( isOdysseyStats ) { - recordTracksEvent( 'jetpack_odyssey_stats_commercial_site_upgrade_notice_dismissed' ); + recordTracksEvent( 'jetpack_odyssey_stats_commercial_site_upgrade_notice_dismissed', { + blog_id: siteId, + } ); } else { - recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_dismissed' ); + recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_dismissed', { + blog_id: siteId, + } ); } setNoticeDismissed( true ); @@ -54,14 +58,18 @@ const CommercialSiteUpgradeNotice = ( { const gotoJetpackStatsProduct = () => { if ( isOdysseyStats ) { recordTracksEvent( - 'jetpack_odyssey_stats_commercial_site_upgrade_notice_support_button_clicked' + 'jetpack_odyssey_stats_commercial_site_upgrade_notice_support_button_clicked', + { blog_id: siteId } ); } else { - recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_support_button_clicked' ); + recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_support_button_clicked', { + blog_id: siteId, + } ); } trackStatsAnalyticsEvent( 'stats_upgrade_clicked', { type: 'notice-commercial', + blog_id: siteId, } ); // Allow some time for the event to be recorded before redirecting. @@ -71,12 +79,16 @@ const CommercialSiteUpgradeNotice = ( { useEffect( () => { if ( ! noticeDismissed ) { if ( isOdysseyStats ) { - recordTracksEvent( 'jetpack_odyssey_stats_commercial_site_upgrade_notice_viewed' ); + recordTracksEvent( 'jetpack_odyssey_stats_commercial_site_upgrade_notice_viewed', { + blog_id: siteId, + } ); } else { - recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_viewed' ); + recordTracksEvent( 'calypso_stats_commercial_site_upgrade_notice_viewed', { + blog_id: siteId, + } ); } } - }, [ noticeDismissed, isOdysseyStats ] ); + }, [ noticeDismissed, isOdysseyStats, siteId ] ); if ( noticeDismissed ) { return null; diff --git a/client/my-sites/stats/stats-notices/do-you-love-jetpack-stats-notice.tsx b/client/my-sites/stats/stats-notices/do-you-love-jetpack-stats-notice.tsx index cb3fca42fcdb..facae154d49d 100644 --- a/client/my-sites/stats/stats-notices/do-you-love-jetpack-stats-notice.tsx +++ b/client/my-sites/stats/stats-notices/do-you-love-jetpack-stats-notice.tsx @@ -50,7 +50,8 @@ const DoYouLoveJetpackStatsNotice = ( { recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_do_you_love_jetpack_stats_notice_dismissed' - : 'calypso_stats_do_you_love_jetpack_stats_notice_dismissed' + : 'calypso_stats_do_you_love_jetpack_stats_notice_dismissed', + { blog_id: siteId } ); setNoticeDismissed( true ); @@ -58,7 +59,9 @@ const DoYouLoveJetpackStatsNotice = ( { }; const openWPCOMPaidStatsUpsellModal = () => { - recordTracksEvent( 'calypso_stats_do_you_love_jetpack_stats_notice_upgrade_button_clicked' ); + recordTracksEvent( 'calypso_stats_do_you_love_jetpack_stats_notice_upgrade_button_clicked', { + blog_id: siteId, + } ); dispatch( toggleUpsellModal( siteId, STATS_DO_YOU_LOVE_JETPACK_STATS_NOTICE ) ); }; @@ -66,11 +69,13 @@ const DoYouLoveJetpackStatsNotice = ( { recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_do_you_love_jetpack_stats_notice_support_button_clicked' - : 'calypso_stats_do_you_love_jetpack_stats_notice_support_button_clicked' + : 'calypso_stats_do_you_love_jetpack_stats_notice_support_button_clicked', + { blog_id: siteId } ); trackStatsAnalyticsEvent( 'stats_upgrade_clicked', { type: 'notice-love-stats', + blog_id: siteId, } ); // Allow some time for the event to be recorded before redirecting. @@ -89,10 +94,11 @@ const DoYouLoveJetpackStatsNotice = ( { recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_do_you_love_jetpack_stats_notice_viewed' - : 'calypso_stats_do_you_love_jetpack_stats_notice_viewed' + : 'calypso_stats_do_you_love_jetpack_stats_notice_viewed', + { blog_id: siteId } ); } - }, [ noticeDismissed, isOdysseyStats ] ); + }, [ noticeDismissed, isOdysseyStats, siteId ] ); if ( noticeDismissed ) { return null; diff --git a/client/my-sites/stats/stats-notices/free-plan-purchase-success-notice.tsx b/client/my-sites/stats/stats-notices/free-plan-purchase-success-notice.tsx index ab3704d96529..53ace0fcdef8 100644 --- a/client/my-sites/stats/stats-notices/free-plan-purchase-success-notice.tsx +++ b/client/my-sites/stats/stats-notices/free-plan-purchase-success-notice.tsx @@ -19,14 +19,16 @@ const getStatsPurchaseURL = ( siteId: number | null ) => { const handleUpgradeClick = ( event: React.MouseEvent< HTMLAnchorElement, MouseEvent >, upgradeUrl: string, - isOdysseyStats: boolean + isOdysseyStats: boolean, + siteId: number | null ) => { event.preventDefault(); recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_purchase_success_banner_upgrade_clicked' - : 'calypso_stats_purchase_success_banner_upgrade_clicked' + : 'calypso_stats_purchase_success_banner_upgrade_clicked', + { blog_id: siteId } ); setTimeout( () => page( upgradeUrl ), 250 ); @@ -78,7 +80,7 @@ const FreePlanPurchaseSuccessJetpackStatsNotice = ( { jetpackStatsProductLink: ( - handleUpgradeClick( e, getStatsPurchaseURL( siteId ), isOdysseyStats ) + handleUpgradeClick( e, getStatsPurchaseURL( siteId ), isOdysseyStats, siteId ) } className="notice-banner__action-link notice-banner__action-link--inline" href={ getStatsPurchaseURL( siteId ) } diff --git a/client/my-sites/stats/stats-notices/free-site-upgrade-notice.tsx b/client/my-sites/stats/stats-notices/free-site-upgrade-notice.tsx index 6a46750733e0..fd3d4836c524 100644 --- a/client/my-sites/stats/stats-notices/free-site-upgrade-notice.tsx +++ b/client/my-sites/stats/stats-notices/free-site-upgrade-notice.tsx @@ -47,7 +47,8 @@ const FreeSiteUpgradeNotice = ( { siteId, hasFreeStats, isOdysseyStats }: StatsN recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_free_site_upgrade_notice_dismissed' - : 'calypso_stats_free_site_upgrade_notice_dismissed' + : 'calypso_stats_free_site_upgrade_notice_dismissed', + { blog_id: siteId } ); setNoticeDismissed( true ); @@ -56,7 +57,9 @@ const FreeSiteUpgradeNotice = ( { siteId, hasFreeStats, isOdysseyStats }: StatsN }; const openWPCOMPaidStatsUpsellModal = () => { - recordTracksEvent( 'calypso_stats_free_site_upgrade_notice_upgrade_button_clicked' ); + recordTracksEvent( 'calypso_stats_free_site_upgrade_notice_upgrade_button_clicked', { + blog_id: siteId, + } ); dispatch( toggleUpsellModal( siteId, STATS_FREE_SITE_UPGRADE_NOTICE ) ); }; @@ -64,11 +67,13 @@ const FreeSiteUpgradeNotice = ( { siteId, hasFreeStats, isOdysseyStats }: StatsN recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_free_site_upgrade_notice_support_button_clicked' - : 'calypso_stats_free_site_upgrade_notice_support_button_clicked' + : 'calypso_stats_free_site_upgrade_notice_support_button_clicked', + { blog_id: siteId } ); trackStatsAnalyticsEvent( 'stats_upgrade_clicked', { type: 'notice-free-site-upgrade', + blog_id: siteId, } ); // Allow some time for the event to be recorded before redirecting. @@ -87,10 +92,11 @@ const FreeSiteUpgradeNotice = ( { siteId, hasFreeStats, isOdysseyStats }: StatsN recordTracksEvent( isOdysseyStats ? 'jetpack_odyssey_stats_free_site_upgrade_notice_viewed' - : 'calypso_stats_free_site_upgrade_notice_viewed' + : 'calypso_stats_free_site_upgrade_notice_viewed', + { blog_id: siteId } ); } - }, [ noticeDismissed, isOdysseyStats ] ); + }, [ noticeDismissed, isOdysseyStats, siteId ] ); if ( noticeDismissed ) { return null; diff --git a/client/my-sites/stats/stats-notices/gdpr-cookie-consent-notice.tsx b/client/my-sites/stats/stats-notices/gdpr-cookie-consent-notice.tsx index 4c48dce8a16f..3bb7a23570f7 100644 --- a/client/my-sites/stats/stats-notices/gdpr-cookie-consent-notice.tsx +++ b/client/my-sites/stats/stats-notices/gdpr-cookie-consent-notice.tsx @@ -23,9 +23,10 @@ const GDPRCookieConsentNotice = ( { siteId, isOdysseyStats }: StatsNoticeProps ) ); const dismissNotice = () => { - isOdysseyStats - ? recordTracksEvent( 'jetpack_odyssey_stats_gdpr_cookie_consent_notice_dismissed' ) - : recordTracksEvent( 'calypso_stats_gdpr_cookie_consent_notice_dismissed' ); + const event = isOdysseyStats + ? 'jetpack_odyssey_stats_gdpr_cookie_consent_notice_dismissed' + : 'calypso_stats_gdpr_cookie_consent_notice_dismissed'; + recordTracksEvent( event, { blog_id: siteId } ); setNoticeDismissed( true ); postponeNoticeAsync(); diff --git a/client/my-sites/stats/stats-notices/tier-upgrade-notice.tsx b/client/my-sites/stats/stats-notices/tier-upgrade-notice.tsx index f5f37ca92070..91846bbee6ef 100644 --- a/client/my-sites/stats/stats-notices/tier-upgrade-notice.tsx +++ b/client/my-sites/stats/stats-notices/tier-upgrade-notice.tsx @@ -24,9 +24,10 @@ const TierUpgradeNotice = ( { siteId, isOdysseyStats, isOverLimit }: StatsNotice ); const dismissNotice = () => { - isOdysseyStats - ? recordTracksEvent( 'jetpack_odyssey_stats_tier_upgrade_notice_dismissed' ) - : recordTracksEvent( 'calypso_stats_tier_upgrade_notice_dismissed' ); + const event = isOdysseyStats + ? 'jetpack_odyssey_stats_tier_upgrade_notice_dismissed' + : 'calypso_stats_tier_upgrade_notice_dismissed'; + recordTracksEvent( event, { blog_id: siteId } ); setNoticeDismissed( true ); postponeNoticeAsync(); diff --git a/client/my-sites/stats/stats-period-navigation/index.jsx b/client/my-sites/stats/stats-period-navigation/index.jsx index b0b905a1cbce..dde20125e6b1 100644 --- a/client/my-sites/stats/stats-period-navigation/index.jsx +++ b/client/my-sites/stats/stats-period-navigation/index.jsx @@ -205,6 +205,7 @@ class StatsPeriodNavigation extends PureComponent { recordTracksEvent( `${ event_from }_stats_date_range_navigation`, { range_in_days: dateRange.daysInRange, direction: previousOrNext ? 'previous' : 'next', + blog_id: this.props.siteId, } ); const navigationStart = momentSiteZone( dateRange.chartStart ); @@ -306,7 +307,9 @@ class StatsPeriodNavigation extends PureComponent { return; } - events.forEach( ( event ) => recordTracksEvent( event.name, event.params ) ); + events.forEach( ( event ) => + recordTracksEvent( event.name, { blog_id: this.props.siteId, ...event.params } ) + ); this.props.toggleUpsellModal( this.props.siteId, statType ); }; diff --git a/client/my-sites/stats/stats-purchase/stats-commercial-upgrade-slider/index.tsx b/client/my-sites/stats/stats-purchase/stats-commercial-upgrade-slider/index.tsx index c820786c5c41..754f898d73c1 100644 --- a/client/my-sites/stats/stats-purchase/stats-commercial-upgrade-slider/index.tsx +++ b/client/my-sites/stats/stats-purchase/stats-commercial-upgrade-slider/index.tsx @@ -4,6 +4,8 @@ import { useEffect } from 'react'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import { EXTENSION_THRESHOLD_IN_MILLION } from 'calypso/my-sites/stats/hooks/use-available-upgrade-tiers'; import TierUpgradeSlider from 'calypso/my-sites/stats/stats-purchase/tier-upgrade-slider'; +import { useSelector } from 'calypso/state'; +import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { StatsPlanTierUI } from '../types'; import './styles.scss'; @@ -79,6 +81,7 @@ function StatsCommercialUpgradeSlider( { }: StatsCommercialUpgradeSliderProps ) { const translate = useTranslate(); const uiStrings = useTranslatedStrings(); + const siteId = useSelector( getSelectedSiteId ); // TODO: Guard against bad data. // The code below assumes we have a valid tier listing with at least one item. @@ -127,6 +130,7 @@ function StatsCommercialUpgradeSlider( { recordTracksEvent( analyticsEventName, { tier_views: quantity, default_changed: index !== 0, // 0 is the default initialVlaue value for + blog_id: siteId, } ); } diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx b/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx index a5051b973939..9bdf2d70ae32 100644 --- a/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx +++ b/client/my-sites/stats/stats-purchase/stats-purchase-checkout-redirect.tsx @@ -208,11 +208,14 @@ const gotoCheckoutPage = ( { } // Keeping the event for data continuity - recordTracksEvent( `calypso_stats_${ eventName }_purchase_button_clicked` ); + recordTracksEvent( `calypso_stats_${ eventName }_purchase_button_clicked`, { + blog_id: siteId, + } ); // Add parameters to the event trackStatsAnalyticsEvent( 'stats_purchase_button_clicked', { type, quantity, + blog_id: siteId, } ); const redirectUrl = getRedirectUrl( { type, adminUrl, redirectUri, siteSlug } ); diff --git a/client/my-sites/stats/stats-purchase/stats-purchase-notice.jsx b/client/my-sites/stats/stats-purchase/stats-purchase-notice.jsx index db07f2c55331..d7aec1f9b38d 100644 --- a/client/my-sites/stats/stats-purchase/stats-purchase-notice.jsx +++ b/client/my-sites/stats/stats-purchase/stats-purchase-notice.jsx @@ -16,15 +16,20 @@ import './styles.scss'; const getStatsPurchaseURL = ( siteId, productType = 'commercial' ) => `/stats/purchase/${ siteId }?productType=${ productType }`; -const handleUpgradeClick = ( event, upgradeUrl, isOdysseyStats ) => { +const handleUpgradeClick = ( event, upgradeUrl, isOdysseyStats, siteId ) => { event.preventDefault(); isOdysseyStats - ? recordTracksEvent( 'jetpack_odyssey_stats_purchase_summary_screen_upgrade_clicked' ) - : recordTracksEvent( 'calypso_stats_purchase_summary_screen_upgrade_clicked' ); + ? recordTracksEvent( 'jetpack_odyssey_stats_purchase_summary_screen_upgrade_clicked', { + blog_id: siteId, + } ) + : recordTracksEvent( 'calypso_stats_purchase_summary_screen_upgrade_clicked', { + blog_id: siteId, + } ); trackStatsAnalyticsEvent( 'stats_upgrade_clicked', { type: 'summary-screen', + blog_id: siteId, } ); setTimeout( () => page( upgradeUrl ), 250 ); @@ -94,7 +99,12 @@ const StatsPWYWOwnedNotice = ( { siteId, siteSlug } ) => {