send impression event only when button is visible

Automattic · Dec 10, 2024 · 64b4b3c · 64b4b3c
1 parent a075464
commit 64b4b3c
Showing 1 changed file with 13 additions and 17 deletions.
diff --git a/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
@@ -917,33 +917,29 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 		navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site?.ID }` );
 	}
 
-	const bigSkyButtons = (
+	const bigSkyButton = isBigSkyEligible && (
 		<>
+			<Button
+				onClick={ () => {
+					navigate( `/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site.ID }` );
+					recordTracksEvent(
+						'calypso_design_picker_big_sky_button_click',
+						bigSkyButtonEventProperties
+					);
+				} }
+			>
+				{ translate( 'Design with AI' ) }
+			</Button>
 			<TrackComponentView
 				eventName="calypso_design_picker_big_sky_button_impression"
 				eventProperties={ bigSkyButtonEventProperties }
 			/>
-			{ isBigSkyEligible && (
-				<Button
-					onClick={ () => {
-						navigate(
-							`/setup/site-setup/launch-big-sky?siteSlug=${ siteSlug }&siteId=${ site.ID }`
-						);
-						recordTracksEvent(
-							'calypso_design_picker_big_sky_button_click',
-							bigSkyButtonEventProperties
-						);
-					} }
-				>
-					{ translate( 'Design with AI' ) }
-				</Button>
-			) }
 		</>
 	);
 
 	const stepContent = (
 		<>
-			<div className="setup-container__big-sky-container">{ bigSkyButtons }</div>
+			<div className="setup-container__big-sky-container">{ bigSkyButton }</div>
 			<UnifiedDesignPicker
 				designs={ designs }
 				locale={ locale }