diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
index ffd6a68c7c79b..700f6b31b3a57 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -16,7 +16,7 @@ import {
 import { useConnectionErrorNotice, ConnectionError } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useLayoutEffect, useState } from 'react';
 /*
  * Internal dependencies
  */
@@ -98,7 +98,9 @@ export default function MyJetpackScreen() {
 	const { recordEvent } = useAnalytics();
 	const [ reloading, setReloading ] = useState( false );
 
-	useEffect( () => {
+	// useLayoutEffect gets called before useEffect.
+	// We are using it here to ensure the `page_view` event gets triggered first.
+	useLayoutEffect( () => {
 		recordEvent( 'jetpack_myjetpack_page_view', {
 			red_bubble_alerts: Object.keys( redBubbleAlerts ).join( ',' ),
 		} );
diff --git a/projects/packages/my-jetpack/changelog/fix-product-card-tracks-loading-issue b/projects/packages/my-jetpack/changelog/fix-product-card-tracks-loading-issue
new file mode 100644
index 0000000000000..1e3702108310c
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/fix-product-card-tracks-loading-issue
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Ensure page_view gets loaded before product_card_loaded