Add tracks events to Jetpack logged-out checkout. #53678

elliottprogrammer · 2021-06-14T21:24:07Z

Changes proposed in this Pull Request

This PR adds tracks events to the Jetpack logged-out checkout flow. More specifically it adds events & properties for the purpose of being able to measure the number of new account signups vs existing account logins during the logged-out(site-only) checkout flow.

Asana Task: 1189109545411729-as-1199371465586276

Implementation notes:

Adds a checkout_flow property to the calypso_checkout_page_view event. This checkout_flow property value will be one of:
- wpcom_checkout
- jetpack_checkout
- Jetpack_site_only
- jetpack_site_only_coming_from_login
- wpcom_registrationless
Adds the checkout_flow property to the calypso_checkout_composite_payment_complete event.
Adds a calypso_checkout_wpcom_email_exists event that occurs when the user enters an email that is already associated with a WordPress.com account.
Adds a calypso_checkout_composite_login_click event that occurs when the user clicks the link to log into their existing account.

Testing instructions

Download this PR.
Start Calypso Blue with yarn start.
Create a JN site.
Connect the site (site-connected only - logged out of wordpress.com).
On the Pricing page, select a Jetpack product.
On the Checkout page, replace wordpress.com with calypso.localhost:3000 leaving the rest of the URL intact.
Open Chrome developer tools and enter into the console, localStorage.debug='calypso:analytics*'; Make sure you have the Preserve Log option selected.
Refresh the checkout page and to ensure you are receiving the Tracks events output in the console.
Verify that you receive the calypso_checkout_page_view event and that it contains the checkout_flow property with the value jetpack_site_only.
Enter an email address that is linked to a WP.com account (you can use your A8c account). Enter your zipcode and country, and click "Continue".
Here at this step you may see Invalid prop type warnings in the console.. These existed previously and are unrelated to the changes in this PR. I will fix it in a following PR, so please disregard the warning for now, if you don't mind..
Verify that you receive the calypso_checkout_wpcom_email_exists event with props, email and checkout_flow.
Under the Email field, click the "Please log in" link.
Verify that you receive the calypso_checkout_composite_login_click event with props, email and checkout_flow.
Login with your WP.com account.
Once redirected to the Checkout page again, check the calypso_checkout_page_view event again and verify that it contains the checkout_flow property with the value jetpack_site_only_coming_from_login.
Complete the purchase.
Verify you receive the calypso_checkout_composite_payment_complete event and that it contains the prop checkout_flow and it's value is jetpack_site_only_coming_from_login;

If you feel so inclined, to be thorough, you can create another JN site and complete these steps again, except instead of entering an email address that is already linked to an existing WordPress.com account, you can enter an email that is not associated to any WordPress.com account, and complete the purchase. (To do this you'll need to add, define( 'USE_STORE_SANDBOX', true ); into /wp-content/mu-plugins/0-sandbox.php in your sandbox. And point public-api.wordpress.com to your sandbox IP (in your hosts file). This is so we can use checkout with a test credit card. See p1HpG7-c5P-p2 for instructions on testing out the logged-out visitor checkout flow using a test credit card.)
When testing this flow, in the final calypso_checkout_composite_payment_complete event, verify that it contains the prop checkout_flow and it's value is jetpack_site_only;

matticbot · 2021-06-14T21:24:49Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~253 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout       +818 B  (+0.1%)     +253 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~231 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal       +734 B  (+0.1%)     +231 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

client/my-sites/checkout/composite-checkout/record-analytics.js

matticbot · 2021-06-15T13:51:41Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-8211
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-8211&env=jetpack

matticbot · 2021-06-15T13:52:57Z

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor add/logged-out-checkout-tracks-events on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

client/my-sites/checkout/composite-checkout/composite-checkout.tsx

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx

client/my-sites/checkout/controller.jsx

monsieur-z · 2021-06-16T13:04:47Z

client/my-sites/checkout/composite-checkout/composite-checkout.tsx

+			if ( isJetpackCheckout ) {
+				return isUserComingFromLoginForm
+					? 'jetpack_site_only_coming_from_login'
+					: 'Jetpack_site_only';


Tiny consistency issue: the first letter is uppercase here.

Oh yes, good catch! Thank you!

monsieur-z

Everything tested well with a WordPress.com account, and code looks good.

The only blocker as far as I'm concerned is the case typo in Jetpack_site_only, since it can skew later data readings.

elliottprogrammer · 2021-06-16T15:40:48Z

Thank you both for your thorough review. Sorry about all the little mistakes. 🤦‍♂️ 😊

sirbrillig

Thanks! Code looks good to me. I didn't test it since the changes but I trust the review of @monsieur-z and the e2es.

rcanepa · 2021-06-23T22:49:16Z

@elliottprogrammer, we didn't merge this one because of the problem with the redirect after the login step, is that right? If so, and since we know the bug only happens when we are behind the proxy, I could test this without the proxy to see if everything works as expected. If it does, you could safely merge it. What do you think?

elliottprogrammer · 2021-06-24T12:10:35Z

@elliottprogrammer, we didn't merge this one because of the problem with the redirect after the login step, is that right? If so, and since we know the bug only happens when we are behind the proxy, I could test this without the proxy to see if everything works as expected. If it does, you could safely merge it. What do you think?

Yes exactly, the redirect after login step bug was preventing us from being able to test this PR fully, but you're right, since now we know the bug only happens behind the proxy, we could test this PR proxy disabled, and that would allow us test all aspects of this PR so we can safely merge. Great idea!

rcanepa

LGTM!

I ran the instructions with the proxy disabled, and everything worked as expected.

sirbrillig · 2021-06-28T19:53:01Z

client/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback.tsx

@@ -71,7 +72,8 @@ export default function useCreatePaymentCompleteCallback( {
 	isComingFromUpsell?: boolean;
 	isFocusedLaunch?: boolean;
 	siteSlug: string | undefined;
-	isJetpackCheckout?: boolean;
+	isJetpackCheckout: boolean;
+	checkoutFlow: string;


I missed this in my review, but this adds a new required argument to useCreatePaymentCompleteCallback, but doesn't change all the instances where that function is used. Notably:

wp-calypso/client/my-sites/checkout/upsell-nudge/purchase-modal/index.tsx

Line 75 in 58592f2

const onComplete = useCreatePaymentCompleteCallback( {

Yes, thank you for spotting this @sirbrillig. I don't see why these 2 arguments, isJetpackCheckout and checkoutFlow need to be required.

I created PR #54116 to make them optional args. If you don't mind, could you give it a review? 🙂

Add tracks events to Jetpack logged-out checkout.

655cddc

elliottprogrammer self-assigned this Jun 14, 2021

elliottprogrammer requested a review from a team as a code owner June 14, 2021 21:24

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 14, 2021

elliottprogrammer requested a review from a team June 14, 2021 21:40

sirbrillig reviewed Jun 14, 2021

View reviewed changes

client/my-sites/checkout/composite-checkout/record-analytics.js Outdated Show resolved Hide resolved

Move Tracks events out of record-analytics.js handler.

370e2bd

elliottprogrammer requested a review from sirbrillig June 15, 2021 15:53

sirbrillig reviewed Jun 15, 2021

View reviewed changes

client/my-sites/checkout/composite-checkout/composite-checkout.tsx Outdated Show resolved Hide resolved

Move 'checkoutFlow' logic into it's own function.

8cb2143

sirbrillig reviewed Jun 15, 2021

View reviewed changes

client/my-sites/checkout/composite-checkout/components/wp-checkout.tsx Outdated Show resolved Hide resolved

client/my-sites/checkout/controller.jsx Outdated Show resolved Hide resolved

monsieur-z reviewed Jun 16, 2021

View reviewed changes

monsieur-z requested changes Jun 16, 2021

View reviewed changes

elliottprogrammer added 3 commits June 16, 2021 10:29

Remove unnecessary nullish coalescing operator.

42ca766

Fix uppercase letter in checkoutFlow value.

0581c2c

Use redux version of recordTracksEvent.

aefd864

elliottprogrammer requested review from monsieur-z and sirbrillig June 16, 2021 15:40

sirbrillig approved these changes Jun 16, 2021

View reviewed changes

rcanepa approved these changes Jun 24, 2021

View reviewed changes

elliottprogrammer merged commit e449bef into trunk Jun 24, 2021

elliottprogrammer deleted the add/logged-out-checkout-tracks-events branch June 24, 2021 14:03

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 24, 2021

sirbrillig reviewed Jun 28, 2021

View reviewed changes

elliottprogrammer mentioned this pull request Jun 29, 2021

Fix useCreatePaymentCompleteCallback arguments #54116

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tracks events to Jetpack logged-out checkout. #53678

Add tracks events to Jetpack logged-out checkout. #53678

elliottprogrammer commented Jun 14, 2021 •

edited

Loading

matticbot commented Jun 14, 2021 •

edited

Loading

matticbot commented Jun 15, 2021 •

edited

Loading

matticbot commented Jun 15, 2021

monsieur-z Jun 16, 2021

elliottprogrammer Jun 16, 2021

monsieur-z left a comment

elliottprogrammer commented Jun 16, 2021

sirbrillig left a comment

rcanepa commented Jun 23, 2021

elliottprogrammer commented Jun 24, 2021

rcanepa left a comment

sirbrillig Jun 28, 2021

elliottprogrammer Jun 29, 2021

Add tracks events to Jetpack logged-out checkout. #53678

Add tracks events to Jetpack logged-out checkout. #53678

Conversation

elliottprogrammer commented Jun 14, 2021 • edited Loading

Changes proposed in this Pull Request

Implementation notes:

Testing instructions

matticbot commented Jun 14, 2021 • edited Loading

matticbot commented Jun 15, 2021 • edited Loading

matticbot commented Jun 15, 2021

monsieur-z Jun 16, 2021

Choose a reason for hiding this comment

elliottprogrammer Jun 16, 2021

Choose a reason for hiding this comment

monsieur-z left a comment

Choose a reason for hiding this comment

elliottprogrammer commented Jun 16, 2021

sirbrillig left a comment

Choose a reason for hiding this comment

rcanepa commented Jun 23, 2021

elliottprogrammer commented Jun 24, 2021

rcanepa left a comment

Choose a reason for hiding this comment

sirbrillig Jun 28, 2021

Choose a reason for hiding this comment

elliottprogrammer Jun 29, 2021

Choose a reason for hiding this comment

elliottprogrammer commented Jun 14, 2021 •

edited

Loading

matticbot commented Jun 14, 2021 •

edited

Loading

matticbot commented Jun 15, 2021 •

edited

Loading