Plans overhaul: Add Google Analytics for Starter

[chriskmnds]

Changes proposed in this Pull Request

1. Adds the Google Analytics feature to the plans grid
2. Adds the Google Analytics feature block to plans/my-plan
3. Adds the Google Analytics feature block to the checkout thank-you page

(this will also be included in the about-to-be-obsolete "free vs pro" grid, but I guess that's fine - it will just be marked with "not included")

Media

start/plans

plans/my-plan

Testing instructions

• Go to /start/plans and select "show full plan comparison"
  • confirm feature is included in list as in media above
• Go to /plans/[SITE_ON_FREE_OR_STARTER] and select "show full plan comparison"
  • confirm feature is included in list as in media above
• Go to /plans/my-plan/[SITE_ON_STARTER] and confirm a GA block is there
  • Click on it and confirm the form that opens is working as expected (the backend parts should be in place)
• Go to /start/plans and purchase a Starter plan. Complete the checkout
  • Confirm the "thank you" page includes a block with GA info (same as with Pro)
• Disable the flag (e.g. /start/plans?flags=-plans/starter-plan) and ensure nothing breaks.
  • The GA feature should still be in the list, and marked as "not included" for the free plan. (assuming this is ok)

TODO

• Let's reorder the features list and make any other contextual updates to the list in this PR. Not sure if the final order has been settled yet. See Slack thread: p1652878563789739/1652865158.458459-slack-C031TFM2NKC
• Let's update the subtitle of the Starter plan also once it's finalized/settled. Same Slack thread: p1652878563789739/1652865158.458459-slack-C031TFM2NKC

Related to Automattic/martech#741
Fixes Automattic/martech#741

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

App Entrypoints (~93 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +482 B  (+0.0%)      +93 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~199 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
checkout                    +1344 B  (+0.1%)     +199 B  (+0.0%)
themes                      +1058 B  (+0.2%)     +170 B  (+0.1%)
settings-performance        +1058 B  (+0.2%)     +170 B  (+0.1%)
scan                        +1058 B  (+0.2%)     +170 B  (+0.1%)
plugins                     +1058 B  (+0.2%)     +170 B  (+0.1%)
plans                       +1058 B  (+0.1%)     +170 B  (+0.1%)
migrate                     +1058 B  (+0.3%)     +170 B  (+0.2%)
media                       +1058 B  (+0.1%)     +170 B  (+0.0%)
marketplace                 +1058 B  (+0.2%)     +170 B  (+0.1%)
hosting                     +1058 B  (+0.2%)     +170 B  (+0.1%)
home                        +1058 B  (+0.1%)     +170 B  (+0.1%)
earn                        +1058 B  (+0.2%)     +170 B  (+0.1%)
domains                     +1058 B  (+0.1%)     +170 B  (+0.0%)
backup                      +1058 B  (+0.1%)     +170 B  (+0.1%)
theme                        +482 B  (+0.1%)      +99 B  (+0.1%)
stats                        +482 B  (+0.1%)      +99 B  (+0.1%)
site-purchases               +482 B  (+0.0%)      +99 B  (+0.0%)
signup                       +482 B  (+0.1%)      +99 B  (+0.1%)
settings-writing             +482 B  (+0.1%)      +99 B  (+0.1%)
settings-security            +482 B  (+0.1%)      +99 B  (+0.1%)
settings                     +482 B  (+0.1%)      +99 B  (+0.1%)
purchases                    +482 B  (+0.0%)      +99 B  (+0.0%)
purchase-product             +482 B  (+0.3%)      +99 B  (+0.2%)
posts-custom                 +482 B  (+0.1%)      +99 B  (+0.1%)
posts                        +482 B  (+0.1%)      +99 B  (+0.1%)
people                       +482 B  (+0.1%)      +99 B  (+0.1%)
marketing                    +482 B  (+0.1%)      +99 B  (+0.1%)
jetpack-search               +482 B  (+0.1%)      +99 B  (+0.1%)
jetpack-connect              +482 B  (+0.0%)      +99 B  (+0.0%)
jetpack-cloud-settings       +482 B  (+0.1%)      +99 B  (+0.1%)
jetpack-cloud-pricing        +482 B  (+0.1%)      +99 B  (+0.1%)
help                         +482 B  (+0.1%)      +99 B  (+0.1%)
email                        +482 B  (+0.1%)      +99 B  (+0.1%)
activity                     +482 B  (+0.1%)      +99 B  (+0.1%)
accept-invite                +482 B  (+0.1%)      +99 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 (~174 bytes added 📈 [gzipped])

name                                                              parsed_size           gzip_size
async-load-design-blocks                                              +1058 B  (+0.0%)     +170 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal                     +1058 B  (+0.1%)     +170 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                       +1058 B  (+0.1%)     +170 B  (+0.1%)
async-load-signup-steps-plans                                          +576 B  (+0.2%)      +71 B  (+0.1%)
async-load-signup-steps-import-from-wordpress-import-everything        +576 B  (+0.2%)      +71 B  (+0.1%)
async-load-signup-steps-import-from-wordpress                          +576 B  (+0.0%)      +71 B  (+0.0%)
async-load-signup-steps-import-from                                    +576 B  (+0.0%)      +71 B  (+0.0%)
async-load-signup-steps-domains                                        +576 B  (+0.1%)      +71 B  (+0.1%)
async-load-calypso-post-editor-media-modal                             +576 B  (+0.0%)      +71 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                             +576 B  (+0.0%)      +71 B  (+0.0%)
async-load-masterbar-cart-masterbar-cart-wrapper                       +482 B  (+0.3%)      +99 B  (+0.2%)
async-load-design-playground                                           +482 B  (+0.0%)      +99 B  (+0.0%)
async-load-design                                                      +482 B  (+0.0%)      +99 B  (+0.0%)
async-load-calypso-reader-sidebar                                      +482 B  (+0.4%)      +99 B  (+0.3%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice       +482 B  (+0.7%)      +99 B  (+0.6%)
async-load-calypso-my-sites-current-site-notice                        +482 B  (+0.5%)      +99 B  (+0.4%)
async-load-calypso-layout-masterbar-checkout-tsx                       +482 B  (+0.1%)      +99 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout                           +482 B  (+0.1%)      +99 B  (+0.1%)
async-load-calypso-components-web-preview-component                    +482 B  (+0.1%)      +99 B  (+0.1%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                +482 B  (+0.6%)      +99 B  (+0.5%)
async-load-calypso-blocks-jitm-templates-notice                        +482 B  (+0.6%)      +99 B  (+0.5%)
async-load-calypso-blocks-jitm-templates-default                       +482 B  (+0.6%)      +99 B  (+0.5%)
async-load-calypso-blocks-inline-help-popover                          +482 B  (+0.1%)      +99 B  (+0.1%)
async-load-calypso-blocks-product-purchase-features-list                +29 B  (+0.1%)       +4 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.

[chriskmnds]

@claudiucelfilip @southp I'm guessing we'll do the recording and the Starter subtitle update in this PR (added to the TODO list).

[claudiucelfilip]

Works as described.
LGTM🚀

[southp]

The remaining updates are now consolidated in 747-gh-Automattic/martech. Please incorporate them into this PR 🙇🏼

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/plans-overhaul-starter-ga on your sandbox.

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

[claudiucelfilip]

The remaining updates are now consolidated in 747-gh-Automattic/martech. Please incorporate them into this PR 🙇🏼

@southp The changes are pushed to this PR.

[southp]

I've confirmed that the new order and the new plan description are implemented as expected. LGTM 🚢

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7320581

Thank you @chriskmnds for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.