Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ExPlat experiment: Payments task onboarding flow skips Connect page #9383

Conversation

vladolaru
Copy link
Contributor

@vladolaru vladolaru commented Sep 4, 2024

Fixes #9382

Changes proposed in this Pull Request

We introduce the changes needed to point merchants starting their WooPayments onboarding flow from the WooCommerce Payments task (labeled "Get paid with WooPayments") directly to the Jetpack connection flow and/or WooPayments onboarding wizard (MOX), thus skipping the Connect page, if they are in the treatment variation of the experiment.
The experiment control group will continue going to the Connect page after clicking the "Get paid with WooPayments" task list item.

Additionally, we include props about the active AB test and variation for certain onboarding Tracks events, for treatment users. Tracks events for control users will not have those props. (no longer the case)

Testing instructions

Pre-testing setup

  1. Checkout the PR's branch on your local WooPayments installation and build the client assets with npm run build:client
  2. Make sure there are no other payment gateways enabled in WooCommerce > Settings > Payments
  3. Make sure your WooCommerce store base location country is a WooPayments-eligible country (e.g., pick US)
  4. Make sure you don't have a connected WooPayments account (i.e., when you click on the Payments main menu item, you are presented with the Connect page):
    neTuxj.png
  5. Access your local installation through a tunnel (npm run tube:start) so you will be able to set up your Jetpack connection
  6. Make sure you have the Jetpack Debug Helper plugin installed and activated, with the "Broken token Utilities" enabled:
    m7pTZH.png
  7. Make sure you have the Tracks Vigilante (p7H4VZ-3cB-p2) browser extension installed and set up. Open up the Tracks Vigilante browser extension and put it in standalone mode (click on the "Standalone popup" button).

Testing the control scenario

  1. Modify the code and add a return false; line at the beginning of the WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode() method to treat users as being in the control group.
  2. If your store already has a working Jetpack connection, break it by going to Jetpack Debug > Broken Token and:
  • Click on "Store these options" to save your current connection details
  • Click on "Clear blog token"
  • Click on "Clear user token (current user)"
  • Click on "Clear the Primary user"
  • click on "Clear the Blog ID"
  1. Go to WooCommerce > Home and click on the "Get paid with WooPayments":
    GQzNrw.png
  2. You should be directed to the Payments Connect page with the page URL containing from=WCADMIN_PAYMENT_TASK:
    xTzsXo.png
  3. Click on "Connect your store" and you should be redirected to the WPCOM connection flow:
    jRtmh0.png
  4. Approve the connection, and you should be redirected to the WooPayments onboarding wizard (MOX) with the page URL containing source=wcadmin-payment-task&from=WPCOM_CONNECTION:
    zW0zxa.png
  5. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_started event with the following props (notice the source prop):
    Ha55zE.png
  6. Exit the MOX by clicking the X in the upper left corner
  7. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_exited event with the following props (notice the source prop):
    zFudDh.png
  8. Go to WooCommerce > Home and click on the "Get paid with WooPayments"
  9. You should be directed to the Payments Connect page with the page URL containing from=WCADMIN_PAYMENT_TASK:
    P1g0go.png
  10. Click on "Verify business details", and you should be directed to the MOX.
  11. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_started event with the following props:
    Ha55zE.png
  12. Complete the MOX and you should be redirected to the Stripe KYC
  13. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_redirected event with the following props (notice the source prop):
    0bM7oO.png

Testing the treatment scenario

  1. Modify the code and add a return true; line at the beginning of the WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode() method to treat users as being in the treatment group.
  2. If your store already has a working Jetpack connection, break it by going to Jetpack Debug > Broken Token and:
  • Click on "Store these options" to save your current connection details
  • Click on "Clear blog token"
  • Click on "Clear user token (current user)"
  • Click on "Clear the Primary user"
  • click on "Clear the Blog ID"
  1. Go to WooCommerce > Home and click on the "Get paid with WooPayments":
    GQzNrw.png
  2. You should be redirected to the WPCOM connection setup screens:
    jRtmh0.png
  3. Approve the connection, and you should be redirected to the WooPayments onboarding wizard (MOX) with the page URL containing source=wcadmin-payment-task&abt=cptof_2024_v1&abt_v=treatment&from=WPCOM_CONNECTION:
    zW0zxa.png
  4. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_started event with the following props (notice the source prop):
    UvCuhe.png
  5. Exit the MOX by clicking the X in the upper left corner
  6. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_exited event with the following props (notice the source prop):
    sHD46x.png
  7. Go to WooCommerce > Home and click on the "Get paid with WooPayments"
  8. You should be directed to the MOX with the page URL containing source=wcadmin-payment-task&abt=cptof_2024_v1&abt_v=treatment&from=WCADMIN_PAYMENT_TASK
  9. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_started event with the following props (notice the source prop):
    UvCuhe.png
  10. Complete the MOX and you should be redirected to the Stripe KYC
  11. Check the Track Vigilante popup and you should have a wcadmin_wcpay_onboarding_flow_redirected event with the following props (notice the source prop):
    Wf5wv3.png
  12. Complete the Stripe KYC and make sure you end up with a connected account.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@vladolaru vladolaru self-assigned this Sep 4, 2024
@botwoo
Copy link
Collaborator

botwoo commented Sep 4, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9383 or branch name add/9382-explat-experiment-payments-task-onboarding-flow-skips-connect-page in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 4ce95fb
  • Build time: 2024-09-06 21:53:50 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Sep 4, 2024

Size Change: +5 B (0%)

Total Size: 1.33 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 302 kB +5 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.52 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.52 kB
release/woocommerce-payments/dist/blocks-checkout.js 66.1 kB
release/woocommerce-payments/dist/cart-block.js 16.3 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 927 B
release/woocommerce-payments/dist/checkout.css 927 B
release/woocommerce-payments/dist/checkout.js 32.5 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 240 B
release/woocommerce-payments/dist/express-checkout.css 240 B
release/woocommerce-payments/dist/express-checkout.js 14.1 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/index.css 39.2 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.5 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 39.2 kB
release/woocommerce-payments/dist/payment-request-rtl.css 240 B
release/woocommerce-payments/dist/payment-request.css 240 B
release/woocommerce-payments/dist/payment-request.js 13.7 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 11.5 kB
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/settings.js 224 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 240 B
release/woocommerce-payments/dist/tokenized-payment-request.css 240 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button.js 24 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.54 kB
release/woocommerce-payments/dist/woopay.css 4.51 kB
release/woocommerce-payments/dist/woopay.js 71.3 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 735 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 553 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 621 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

@vladolaru vladolaru requested review from dmallory42 and a team September 5, 2024 11:24
Copy link
Contributor

@dmallory42 dmallory42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great! Tested and works exactly as expected. Nice work, @vladolaru!

Copy link

@necronet necronet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that we're using the _GET session object for knowing if we're on treatment or control. Instead we should rely on the call already made for WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode().

includes/class-wc-payments-utils.php Show resolved Hide resolved
includes/class-wc-payments-account.php Outdated Show resolved Hide resolved
Copy link
Member

@aaronyan aaronyan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

abt and abt_v

We generally don't encourage keeping track of variations and analyzing the data outside of ExPlat, since it's difficult to do correctly and we don't want a12s making decisions with bad data.

Instead, I'd recommend adding metrics in ExPlat (PCYsg-Fq6-p2) and then adding those metrics to your experiment. You get the benefit of all of our data cleaning, health checks, automated analysis, and statistical tests to determine uncertainty.

As an example of how to misinterpret the data, I see that the variation is set to control for many reasons (assigned control, user does not give tracking consent, user is ineligible, if there was an error getting variation, etc). So when the variation is saved inabt_v, it is saving what the user experienced not what they were assigned or if the user was eligible or not.

@vladolaru
Copy link
Contributor Author

Thank you for reviewing this, @aaronyan!

We generally don't encourage keeping track of variations and analyzing the data outside of ExPlat, since it's difficult to do correctly and we don't want a12s making decisions with bad data.

You are probably right. I intended those Tracks props to be a safety insurance of sorts to potentially allow us to ascertain onboarded accounts beyond Tracks (like account Risk approval rates). But, let's keep it simple. I removed the experiment-related Tracks props.

@vladolaru
Copy link
Contributor Author

Thank you for reviewing this, @necronet!

I see that we're using the _GET session object for knowing if we're on treatment or control. Instead we should rely on the call already made for WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode().

That use of _GET params was only for tracking purposes (which is gone now). For behavior change, we rely on WC_Payments_Utils::is_in_core_payments_task_onboarding_flow_treatment_mode().

Copy link

@necronet necronet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ExPlat Approved!

includes/class-wc-payments-utils.php Show resolved Hide resolved
@vladolaru vladolaru added this pull request to the merge queue Sep 6, 2024
Merged via the queue into develop with commit 9e95662 Sep 6, 2024
25 checks passed
@vladolaru vladolaru deleted the add/9382-explat-experiment-payments-task-onboarding-flow-skips-connect-page branch September 6, 2024 22:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Experiment: A/B test the onboarding flow originating from the core Payments task
5 participants