Track user viewport and url when using WooPay (#5453)

* Track user viewport and url when using WooPay

* Add changelog entry

* Remove console.log

* Add tracking data on express checkout

* Fix white space

Author: alefesouza

changelog/fix-5452-track-user-viewport-and-url-when-using-woopay

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Track user viewport and url when using WooPay

client/checkout/platform-checkout/email-input-iframe.js

@@ -231,6 +231,9 @@ export const handlePlatformCheckoutEmailInput = async (
 			return;
 		}
 
+		const viewportWidth = window.document.documentElement.clientWidth;
+		const viewportHeight = window.document.documentElement.clientHeight;
+
 		const urlParams = new URLSearchParams();
 		urlParams.append( 'email', email );
 		urlParams.append( 'testMode', getConfig( 'testMode' ) );
@@ -239,6 +242,12 @@ export const handlePlatformCheckoutEmailInput = async (
 			fullScreenModalBreakpoint > window.innerWidth
 		);
 		urlParams.append( 'wcpayVersion', getConfig( 'wcpayVersionNumber' ) );
+		urlParams.append( 'is_blocks', isBlocksCheckout ? 'true' : 'false' );
+		urlParams.append( 'source_url', window.location.href );
+		urlParams.append(
+			'viewport',
+			`${ viewportWidth }x${ viewportHeight }`
+		);
 
 		iframe.src = `${ getConfig(
 			'platformCheckoutHost'

client/checkout/platform-checkout/express-button/express-checkout-iframe.js

@@ -165,6 +165,9 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 			return;
 		}
 
+		const viewportWidth = window.document.documentElement.clientWidth;
+		const viewportHeight = window.document.documentElement.clientHeight;
+
 		const urlParams = new URLSearchParams();
 		urlParams.append( 'testMode', getConfig( 'testMode' ) );
 		urlParams.append(
@@ -177,6 +180,14 @@ export const expressCheckoutIframe = async ( api, context, emailSelector ) => {
 			userEmail = email;
 			urlParams.append( 'email', email );
 		}
+		urlParams.append( 'is_blocks', !! wcSettings.wcBlocksConfig );
+		urlParams.append( 'is_express', 'true' );
+		urlParams.append( 'express_context', context );
+		urlParams.append( 'source_url', window.location.href );
+		urlParams.append(
+			'viewport',
+			`${ viewportWidth }x${ viewportHeight }`
+		);
 
 		iframe.src = `${ getConfig(
 			'platformCheckoutHost'

client/components/platform-checkout/save-user/checkout-page-save-user.js

@@ -44,6 +44,8 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		isBlocksCheckout
 	);
 	const cart = useDispatch( WC_STORE_CART );
+	const viewportWidth = window.document.documentElement.clientWidth;
+	const viewportHeight = window.document.documentElement.clientHeight;
 
 	const getPhoneFieldValue = () => {
 		let phoneFieldValue = '';
@@ -73,6 +75,9 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 				? {}
 				: {
 						save_user_in_platform_checkout: isSaveDetailsChecked,
+						platform_checkout_source_url: window.location.href,
+						platform_checkout_is_blocks: true,
+						platform_checkout_viewport: `${ viewportWidth }x${ viewportHeight }`,
 						platform_checkout_user_phone_field: {
 							full: phoneNumber,
 						},
@@ -93,7 +98,13 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 				} );
 			} );
 		},
-		[ isSaveDetailsChecked, phoneNumber, cart ]
+		[
+			isSaveDetailsChecked,
+			phoneNumber,
+			cart,
+			viewportWidth,
+			viewportHeight,
+		]
 	);
 
 	const handleCheckboxClick = ( e ) => {
@@ -268,6 +279,16 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 						className="save-details-form form-row"
 						data-testid="save-user-form"
 					>
+						<input
+							type="hidden"
+							name="platform_checkout_source_url"
+							value={ window.location.href }
+						/>
+						<input
+							type="hidden"
+							name="platform_checkout_viewport"
+							value={ `${ viewportWidth }x${ viewportHeight }` }
+						/>
 						<PhoneNumberInput
 							value={
 								null === phoneNumber

client/components/platform-checkout/save-user/test/checkout-page-save-user.test.js

@@ -186,6 +186,9 @@ describe( 'CheckoutPageSaveUser', () => {
 				namespace: 'platform-checkout',
 				data: {
 					save_user_in_platform_checkout: true,
+					platform_checkout_source_url: 'http://localhost/',
+					platform_checkout_is_blocks: true,
+					platform_checkout_viewport: '0x0',
 					platform_checkout_user_phone_field: {
 						full: '+12015555555',
 					},

includes/platform-checkout-user/class-platform-checkout-save-user.php

@@ -83,6 +83,10 @@ public function maybe_add_userdata_to_metadata( $metadata, $order ) {
 		$platform_checkout_phone       = $this->platform_checkout_util->get_platform_checkout_phone();
 
 		if ( $should_save_platform_customer && $platform_checkout_phone ) {
+			$platform_checkout_source_url = $this->platform_checkout_util->get_platform_checkout_source_url();
+			$platform_checkout_is_blocks  = $this->platform_checkout_util->get_platform_checkout_is_blocks();
+			$platform_checkout_viewport   = $this->platform_checkout_util->get_platform_checkout_viewport();
+
 			// Add the metadata.
 			$metadata['platform_checkout_primary_first_name']   = wc_clean( $order->get_billing_first_name() );
 			$metadata['platform_checkout_primary_last_name']    = wc_clean( $order->get_billing_last_name() );
@@ -93,6 +97,9 @@ public function maybe_add_userdata_to_metadata( $metadata, $order ) {
 			$metadata['platform_checkout_secondary_phone']      = wc_clean( $order->get_shipping_phone() );
 			$metadata['platform_checkout_secondary_company']    = wc_clean( $order->get_shipping_company() );
 			$metadata['platform_checkout_phone']                = $platform_checkout_phone;
+			$metadata['platform_checkout_source_url']           = $platform_checkout_source_url;
+			$metadata['platform_checkout_is_blocks']            = $platform_checkout_is_blocks;
+			$metadata['platform_checkout_viewport']             = $platform_checkout_viewport;
 		}
 
 		return $metadata;

includes/platform-checkout/class-platform-checkout-utilities.php

@@ -151,4 +151,49 @@ public function get_platform_checkout_phone() {
 
 		return '';
 	}
+
+	/**
+	 * Get the url marketing where the user have chosen marketing options.
+	 *
+	 * @return mixed|string
+	 */
+	public function get_platform_checkout_source_url() {
+		$session_data = WC()->session->get( Platform_Checkout_Extension::PLATFORM_CHECKOUT_SESSION_KEY );
+
+		if ( ! empty( $_POST['platform_checkout_source_url'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+			return wc_clean( wp_unslash( $_POST['platform_checkout_source_url'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+		} elseif ( ! empty( $session_data['platform_checkout_source_url'] ) ) {
+			return $session_data['platform_checkout_source_url'];
+		}
+
+		return '';
+	}
+
+	/**
+	 * Get if the request comes from blocks checkout.
+	 *
+	 * @return boolean
+	 */
+	public function get_platform_checkout_is_blocks() {
+		$session_data = WC()->session->get( Platform_Checkout_Extension::PLATFORM_CHECKOUT_SESSION_KEY );
+
+		return ( isset( $_POST['platform_checkout_is_blocks'] ) && filter_var( wp_unslash( $_POST['platform_checkout_is_blocks'] ), FILTER_VALIDATE_BOOLEAN ) ) || ( isset( $session_data['platform_checkout_is_blocks'] ) && filter_var( $session_data['platform_checkout_is_blocks'], FILTER_VALIDATE_BOOLEAN ) ); // phpcs:ignore WordPress.Security.NonceVerification
+	}
+
+	/**
+	 * Get the user viewport.
+	 *
+	 * @return mixed|string
+	 */
+	public function get_platform_checkout_viewport() {
+		$session_data = WC()->session->get( Platform_Checkout_Extension::PLATFORM_CHECKOUT_SESSION_KEY );
+
+		if ( ! empty( $_POST['platform_checkout_viewport'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+			return wc_clean( wp_unslash( $_POST['platform_checkout_viewport'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+		} elseif ( ! empty( $session_data['platform_checkout_viewport'] ) ) {
+			return $session_data['platform_checkout_viewport'];
+		}
+
+		return '';
+	}
 }