A4A > Marketplace: Add missing event tracking

[yashwin]

Resolves https://linear.app/a8c/issue/A4A-1844/tracks-events-add-the-ability-to-distinguish-between-agency-and

Proposed Changes

This PR adds missing event tracking to Marketplace, including:

• Copy link for Referrals
• Toggle referral mode
• Toggle cart

Also, updates all marketplace page views (Products, Hosting & Checkout) to include the purchase mode (referral or regular)

Why are these changes being made?

• To be able to track the events on the Marketplace better

Testing Instructions

• Open the A4A live link
• Open the network tab open > Filter by "t.gif"
• Go to Marketplace > Verify the "calypso_page_view" event trackings now includes "purchase_mode: regular"
• Click "Standard", "Premier", & "Enterprise" tabs > Verify the "calypso_page_view" event trackings now includes "purchase_mode: regular"
• Go to "Products" > Verify the "calypso_page_view" event trackings now includes "purchase_mode: regular"
• Toggle the refer mode on > Verify the event is tracked: calypso_a4a_marketplace_referral_toggle
• Visit "Hosting", and it's all tabs > Verify the "calypso_page_view" event trackings now includes "purchase_mode: referral"
• Go to "Products" > Verify the "calypso_page_view" event trackings now includes "purchase_mode: referral"
• Add/remove some products > Verify the event trackings now includes "purchase_mode: referral"
• Click the cart > Verify the event is tracked: calypso_a4a_marketplace_toggle_cart with "purchase_mode: referral"
• Go to checkout > Verify the "calypso_page_view" event trackings now includes "purchase_mode: referral"
• Click the "Copy referral link" button > Verify the event tracking name is "calypso_a4a_marketplace_referral_checkout_request_payment_copy_click"
• Repeat the step > click the "Send to client" button > Verify the event tracking name is "calypso_a4a_marketplace_referral_checkout_request_payment_click"

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163581

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163581&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163581&env=a8c-for-agencies

Dashboard live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-163581&env=dashboard

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a/marketplace/add-missing-event-tracking on your sandbox.

[matticbot]

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

Sections (~192 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
a8c-for-agencies-marketplace       +608 B  (+0.0%)     +160 B  (+0.0%)
a8c-for-agencies-client            +232 B  (+0.0%)      +32 B  (+0.0%)

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

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.