[Live Preview in Premium/Woo themes] Add tracking events

[okmttdhr]

Related to #79223

Proposed Changes

This PR adds tracking events for "Live Preview in Premium/Woo themes". I added the following events;

• calypso_block_theme_live_preview_upgrade_modal_open
  • This event is fired when users open the upgrade modal either by clicking the button or using the shortcut (cmd+S).
    
    
• calypso_block_theme_live_preview_click_upgrade -> calypso_block_theme_live_preview_upgrade_modal_upgrade
  • This event is fired when users click the upgrade button on the modal.
    
• calypso_block_theme_live_preview_upgrade_modal_close
  • This event is fired when the modal is closed for any reason.

We can include the wpcom_product_purchase event (for checkout completion) and the wpcom_block_editor_save_click event (for theme activation) in funnels.

Testing Instructions

Please Test it on https://horizon.wordpress.com/.

• Sandbox your site and widgets.wp.com.
• Run install-plugin.sh wpcom-block-editor add/live-preview-track-event on your sandbox.
• Go to the Theme Showcase page and pick a Premium or Woo theme.
• Click the Upgrade now button.
• Verify the event is fired.
  • When you click the button on the header in the edit mode.
    
  • When you click the button on the sidebar.
    
  • When you use the shortcut.
    
• Verify the event is fired when you close the modal by
  • Clicking the close icon
    
  • Clicking the Cancel button
    
  • Clicking the overlay or typing the escape key
    
• Click the Upgrade plan button on the modal.
• Verify the event is fired.
  

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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 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 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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/live-preview-track-event on your sandbox.

[matticbot]

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

Sections (~20 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
import-flow        +72 B  (+0.0%)      +20 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.

[taipeicoder]

Using the shortcut returns canvas_mode: view while in edit mode:

[taipeicoder]

We could also track when upgrade modal is closed via user-interaction:

• Clicking the Cancel button.
• Clicking the Close button.
• Clicking the backdrop or pressing the Esc button.

WDYT? @okmttdhr @autumnfjeld

[autumnfjeld]

calypso_block_theme_live_preview_click_upgrade
This event is fired when users click the upgrade button on the modal.

This event should include the word modal, maybe: calypso_block_theme_live_preview_upgrade_modal_upgradeclick
or
calypso_block_theme_live_preview_upgrade_modal_upgrade_click

or
calypso_block_theme_live_preview_upgrade_modal_button_click)
with prop action=upgrade

You can see other modal events by searching for "modal" in tracks events.

[autumnfjeld]

We could also track when upgrade modal is closed via user-interaction:

• Clicking the Cancel button.
• Clicking the Close button.
• Clicking the backdrop or pressing the Esc button.

WDYT? @okmttdhr @autumnfjeld

That could be interesting, like a measure of curiosity about upgrading.

calypso_block_theme_live_preview_upgrade_modal_closeclick , should be consistent naming as with my comment above. :)

[arthur791004]

The code looks good 👍

[okmttdhr]

@taipeicoder @autumnfjeld

Using the shortcut returns canvas_mode: view while in edit mode:

I addressed this. Thank you for pointing this out!

We could also track when upgrade modal is closed via user-interaction:
This event should include the word modal, maybe: calypso_block_theme_live_preview_upgrade_modal_upgradeclick

I added calypso_block_theme_live_preview_upgrade_modal_close with closed_by='close_icon' | 'cancel_button' | 'dialog_action', and renamed calypso_block_theme_live_preview_click_upgrade to calypso_block_theme_live_preview_upgrade_modal_upgrade, aligning with calypso_block_theme_live_preview_upgrade_modal_close. 🙂

[taipeicoder]

LGTM 🙂