diff --git a/changelog/add-place-order-tracks b/changelog/add-place-order-tracks new file mode 100644 index 00000000000..450859bad49 --- /dev/null +++ b/changelog/add-place-order-tracks @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Place order button Tracks diff --git a/client/checkout/blocks/index.js b/client/checkout/blocks/index.js index deed017c0d9..0ce235a0086 100644 --- a/client/checkout/blocks/index.js +++ b/client/checkout/blocks/index.js @@ -34,6 +34,7 @@ import { } from '../constants.js'; import { getDeferredIntentCreationUPEFields } from './payment-elements'; import { handleWooPayEmailInput } from '../woopay/email-input-iframe'; +import wcpayTracks from 'tracks'; import wooPayExpressCheckoutPaymentMethod from '../woopay/express-button/woopay-express-checkout-payment-method'; import { isPreviewing } from '../preview'; @@ -113,6 +114,24 @@ Object.entries( enabledPaymentMethodsConfig ) } ); } ); +const addCheckoutTracking = () => { + const placeOrderButton = document.getElementsByClassName( + 'wc-block-components-checkout-place-order-button' + ); + if ( placeOrderButton.length ) { + placeOrderButton[ 0 ].addEventListener( 'click', () => { + const blocksCheckbox = document.getElementById( + 'radio-control-wc-payment-method-options-woocommerce_payments' + ); + if ( ! blocksCheckbox?.checked ) { + return; + } + + wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK ); + } ); + } +}; + // Call handleWooPayEmailInput if woopay is enabled and this is the checkout page. if ( getUPEConfig( 'isWooPayEnabled' ) ) { if ( @@ -131,4 +150,5 @@ if ( getUPEConfig( 'isWooPayEnabled' ) ) { registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) ); window.addEventListener( 'load', () => { enqueueFraudScripts( getUPEConfig( 'fraudServices' ) ); + addCheckoutTracking(); } ); diff --git a/client/checkout/classic/event-handlers.js b/client/checkout/classic/event-handlers.js index 00a2581b8a9..584495518be 100644 --- a/client/checkout/classic/event-handlers.js +++ b/client/checkout/classic/event-handlers.js @@ -26,6 +26,7 @@ import WCPayAPI from 'wcpay/checkout/api'; import apiRequest from '../utils/request'; import { handleWooPayEmailInput } from 'wcpay/checkout/woopay/email-input-iframe'; import { isPreviewing } from 'wcpay/checkout/preview'; +import wcpayTracks from 'tracks'; jQuery( function ( $ ) { enqueueFraudScripts( getUPEConfig( 'fraudServices' ) ); @@ -58,6 +59,18 @@ jQuery( function ( $ ) { return processPaymentIfNotUsingSavedMethod( $( this ) ); } ); + $( 'form.checkout' ).on( 'click', '#place_order', function () { + const isWCPay = document.getElementById( + 'payment_method_woocommerce_payments' + ).checked; + + if ( ! isWCPay ) { + return; + } + + wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK ); + } ); + window.addEventListener( 'hashchange', () => { if ( window.location.hash.startsWith( '#wcpay-confirm-' ) ) { showAuthenticationModalIfRequired( api ); diff --git a/client/tracks/index.js b/client/tracks/index.js index fa94e5d32bc..4690919650d 100644 --- a/client/tracks/index.js +++ b/client/tracks/index.js @@ -92,6 +92,7 @@ const events = { MULTI_CURRENCY_ENABLED_CURRENCIES_UPDATED: 'wcpay_multi_currency_enabled_currencies_updated', PAYMENT_REQUEST_SETTINGS_CHANGE: 'wcpay_payment_request_settings_change', + PLACE_ORDER_CLICK: 'checkout_place_order_button_click', // WCPay Subscriptions empty state - prompts to connect to WCPay or create product. SUBSCRIPTIONS_EMPTY_STATE_VIEW: 'wcpay_subscriptions_empty_state_view', SUBSCRIPTIONS_EMPTY_STATE_FINISH_SETUP: