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

Fix tracks identity cookie cache #9249

Merged
merged 11 commits into from
Aug 19, 2024
Merged

Conversation

alefesouza
Copy link
Member

Fixes p1722880351733569-slack-C02CCT3F1QA

Changes proposed in this Pull Request

This PR uses the same approach introduced by #8185 to prevent breaking the cache for the products, cart and checkout pages.

Testing instructions

  • Access any product page while logged out.
  • Access the DevTools Application tab.
  • Open the Cookies section.
  • Delete the tk_ai cookie.
  • Reload the page.
  • Access the DevTools Network tab.
  • Look for the page request (usually the first one).
  • There should not be any Set-Cookie header (this breaks the cache).
  • Look for the /wp-admin/admin-ajax.php request.
  • There should be one with the get_identity action and the wcpay_product_page_view event.
  • Open the Cookies section.
  • There should be another tk_ai cookie added by the get_identity request.
  • Do the same steps accessing the cart and checkout pages, the tracks event should match the page you access.

  • 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

@alefesouza alefesouza requested review from a team and malithsen and removed request for a team August 13, 2024 01:15
@botwoo
Copy link
Collaborator

botwoo commented Aug 13, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9249 or branch name fix/wcpay-tracking-cookie-cache 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: 784b47f
  • Build time: 2024-08-19 14:44:31 UTC

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

Copy link
Contributor

github-actions bot commented Aug 13, 2024

Size Change: +844 B (0%)

Total Size: 1.32 MB

Filename Size Change
release/woocommerce-payments/dist/frontend-tracks.js 844 B +844 B (new file) 🆕
ℹ️ 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.36 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.36 kB
release/woocommerce-payments/dist/blocks-checkout.js 65.4 kB
release/woocommerce-payments/dist/cart-block.js 16.3 kB
release/woocommerce-payments/dist/cart.js 5.72 kB
release/woocommerce-payments/dist/checkout-rtl.css 708 B
release/woocommerce-payments/dist/checkout.css 710 B
release/woocommerce-payments/dist/checkout.js 32 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/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/index.css 39.2 kB
release/woocommerce-payments/dist/index.js 298 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.3 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.6 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.4 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.4 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.2 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/src/js/i18n-loader.js 1.02 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 20 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 20 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 392 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 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
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

Copy link
Member

@malithsen malithsen left a comment

Choose a reason for hiding this comment

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

Thanks for working on this @alefesouza
This is a creative approach. I've noted some concerns in the comments.

Primarily, I don't love the fact that we are recording events as a side effect of the getTracksIdentity call.

What do you think of, removing the backend tracking for page views and instead recording from frontend when the page has loaded, using recordUserEvent function?

includes/class-woopay-tracker.php Outdated Show resolved Hide resolved
client/tracks/index.ts Outdated Show resolved Hide resolved
includes/class-woopay-tracker.php Outdated Show resolved Hide resolved
@alefesouza alefesouza requested a review from malithsen August 14, 2024 02:08
Copy link
Member

@malithsen malithsen left a comment

Choose a reason for hiding this comment

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

Nice improvements!
Requesting changes as the events are no longer recorded when WooPay is disabled.

includes/class-woopay-tracker.php Outdated Show resolved Hide resolved
client/frontend-tracks/index.js Show resolved Hide resolved
@alefesouza alefesouza requested a review from malithsen August 16, 2024 18:02
Copy link
Member

@malithsen malithsen left a comment

Choose a reason for hiding this comment

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

Nice work so far Alefe.

woocommerce_after_main_content hook only runs on the product page. So with WooPay disabled, the page view events from the cart and the checkout pages are no longer recorded as the frontend script is not added.

Additionally, do you think we can use existing JS scripts to call the recordUserEvent function on page load instead of dynamically adding a new script? I haven't checked if this is possible, and the current approach is okay if that's not possible.

@alefesouza
Copy link
Member Author

woocommerce_after_main_content hook only runs on the product page.

@malithsen thanks, changed to wp_footer.

do you think we can use existing JS scripts to call the recordUserEvent function

I don't think so because this function comes from the tracks module, the current scripts added by WCPay are WooPay related ones and requires it to be enabled.

@alefesouza alefesouza requested a review from malithsen August 19, 2024 13:53
Copy link
Member

@malithsen malithsen left a comment

Choose a reason for hiding this comment

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

When placing an order using WooPayments, checkout_order_placed event is recorded via the checkout_order_processed function. This internally uses the maybe_record_wcpay_shopper_event function. Above event is no longer recorded. I haven't found why exactly but I am guessing because this event is emitted between page transitions, frontend scripts never gets a chance to be added on to the footer.

Sorry, I missed this earlier.

@alefesouza alefesouza requested a review from malithsen August 19, 2024 14:39
@alefesouza
Copy link
Member Author

@malithsen fixed on 784b47f.

Copy link
Member

@malithsen malithsen left a comment

Choose a reason for hiding this comment

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

Looks great now. Thanks for working on this Alefe!

  • Verified caching issue is fixed.
  • No regressions in Tracks.
  • Tracks user identity is preserved on page refreshes.

@alefesouza alefesouza added this pull request to the merge queue Aug 19, 2024
Merged via the queue into develop with commit a56d57a Aug 19, 2024
23 checks passed
@alefesouza alefesouza deleted the fix/wcpay-tracking-cookie-cache branch August 19, 2024 15:19
jessy-p pushed a commit that referenced this pull request Aug 19, 2024
jessy-p pushed a commit that referenced this pull request Aug 20, 2024
@jessy-p jessy-p mentioned this pull request Aug 20, 2024
6 tasks
@malithsen malithsen mentioned this pull request Aug 20, 2024
6 tasks
rafaelzaleski pushed a commit that referenced this pull request Aug 27, 2024
rafaelzaleski pushed a commit that referenced this pull request Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants