Adds route & sales page for Ultimate Traffic Guide #48154

aneeshd16 · 2020-12-09T04:51:27Z

Changes proposed in this Pull Request

Adds a new card to the Marketing Tools tab
Clicking on the CTA in the card should navigate to the sales page for the Ultimate Traffic Guide

Testing instructions

Marketing tools card

Go to My Site -> Tools -> Marketing
Confirm that the card is visible only if the locale is English.
If the user has purchased the traffic guide, the CTA should be "Download now". If not, it should be "Learn more".

Sales page

Click on the CTA on the Marketing tools card.
Ensure that the sales page renders correctly and the copy is correct.
Image Link: https://d.pr/i/jOxhOq
Switch to treatment for the traffic_guide_copy_test experiment. The alternate copy should be shown. ~~(This is currently broken)~~ (works now)

Checkout

Clicking on the CTA should lead to the checkout page with the product added in cart
Image Link: https://d.pr/i/S5o3ta
Once the purchase is complete, it should show a thank you page with a link to download
Image Link: https://d.pr/i/Ognmt4
Clicking on the download CTA should download the file.

Download Page

Accessing the Traffic Guide page through the card should now show a Download page instead of the Sales page
Image Link: https://d.pr/i/0ZR8sv
Clicking on the download CTA should download the file.
The purchase is per-user, so this behaviour should remain consistent irrespective of the site chosen.

matticbot · 2020-12-09T04:51:28Z

Test live: https://calypso.live/?branch=add/ultimate-traffic-guide

a8ci18n · 2020-12-09T04:59:48Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+				</strong>
+				<br></br>
+				{ translate(
+					'It’s so effective you don’t even have to come close to a “perfect” site before you launch… even the ugliest site can drive an endless stream of business if you get this right!'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( 'How to build a simple “traffic magnet” to instantly attract the right audience to your site and convert them to raving fans (It’s so effective you don’t even have to come close to a “perfect” site before you launch... even the ugliest site can drive an endless stream of business if you get this right!)' ) ES Score: 8

matticbot · 2020-12-09T05:04:28Z

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

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

name        parsed_size           gzip_size
entry-main       +631 B  (+0.0%)     +159 B  (+0.0%)

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

Sections (~6382 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
marketing                 +11455 B  (+2.1%)    +3245 B  (+2.3%)
checkout                  +10410 B  (+0.7%)    +3122 B  (+0.9%)
woocommerce                 +467 B  (+0.0%)      +50 B  (+0.0%)
site-purchases              +467 B  (+0.0%)      +41 B  (+0.0%)
signup                      +467 B  (+0.1%)      +42 B  (+0.0%)
purchases                   +467 B  (+0.0%)      +42 B  (+0.0%)
plans                       +467 B  (+0.1%)      +42 B  (+0.0%)
export                      +467 B  (+0.2%)      +42 B  (+0.1%)
email                       +467 B  (+0.1%)      +42 B  (+0.0%)
domains                     +467 B  (+0.0%)      +44 B  (+0.0%)
customize                   +467 B  (+0.2%)      +42 B  (+0.1%)
themes                      +466 B  (+0.1%)      +41 B  (+0.0%)
theme                       +466 B  (+0.1%)      +41 B  (+0.0%)
settings-writing            +466 B  (+0.1%)      +41 B  (+0.0%)
settings-security           +466 B  (+0.1%)      +41 B  (+0.0%)
settings-performance        +466 B  (+0.1%)      +41 B  (+0.0%)
settings-jetpack            +466 B  (+0.2%)      +41 B  (+0.1%)
settings-discussion         +466 B  (+0.2%)      +41 B  (+0.1%)
settings                    +466 B  (+0.1%)      +41 B  (+0.0%)
jetpack-search              +466 B  (+0.3%)      +41 B  (+0.1%)
jetpack-connect             +466 B  (+0.1%)      +41 B  (+0.0%)
jetpack-cloud-pricing       +466 B  (+0.1%)      +44 B  (+0.0%)
home                        +466 B  (+0.1%)      +41 B  (+0.0%)
help                        +466 B  (+0.1%)      +41 B  (+0.0%)
activity                    +466 B  (+0.1%)      +41 B  (+0.0%)
account-close               +466 B  (+0.1%)      +41 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.

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

name                                                              parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal                        +505 B  (+0.0%)      +59 B  (+0.0%)
async-load-design-blocks                                               +466 B  (+0.0%)      +60 B  (+0.0%)
async-load-design                                                      +466 B  (+0.0%)      +41 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice       +466 B  (+1.0%)      +41 B  (+0.4%)
async-load-calypso-blocks-inline-help-popover                          +466 B  (+0.1%)      +41 B  (+0.0%)
async-load-calypso-blocks-inline-help                                   +52 B  (+0.0%)      +19 B  (+0.0%)

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.

a8ci18n · 2020-12-10T10:46:23Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+			</p>
+			<p>
+				{ translate(
+					'The Ultimate Traffic GuideThis is a goldmine of traffic tips and how-tos that reveals the exact “Breakthrough Traffic” process we’ve developed over the past decade.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 17 times:
translate( 'The Ultimate Traffic Guide is a goldmine of traffic tips and how-tos that reveals the exact “Breakthrough Traffic” process we’ve developed over the past decade.' ) ES Score: 12
See 2 additional suggestions in the PR translation status page

a8ci18n · 2020-12-10T10:46:24Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+			</p>
+			<p>
+				<Button onClick={ handleDownloadPageButtonClick } primary>
+					{ translate( 'Click here to download your copy now!' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Click here to download your copy now.' ) ES Score: 10

matticbot · 2020-12-11T07:04:11Z

Caution: This PR affects files in the Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D54155-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing the Editing Toolkit Plugin for more info: PCYsg-ly5-p2

aneeshd16 · 2020-12-11T07:10:02Z

Rebased and forgot to push, fixing this branch 🤯
Edit: Fixed.

a8ci18n · 2020-12-17T06:44:21Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+			</ul>
+			<p>
+				{ translate(
+					'You’re going to want to print out all 96 pages of the Ultimate Traffic Guide and keep it by your desk, because you’re going to consult this guide often.'


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 19 times:
translate( 'Print it out and keep it by your desk, because you’re going to consult this guide often.' ) ES Score: 6

aneeshd16 · 2020-12-17T11:38:34Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+export const WPCOM_TRAFFIC_GUIDE = 'traffic-guide';
+
+export const hasTrafficGuidePurchase = ( purchases ) =>
+	!! (
+		purchases && purchases.find( ( purchase ) => WPCOM_TRAFFIC_GUIDE === purchase.productSlug )
+	);
+
+export const downloadTrafficGuide = () => {
+	window.location.href = 'https://public-api.wordpress.com/wpcom/v2/traffic-guide-download';
+};


Not sure if this is the best place for these exported consts.

The main problem is with the WPCOM_TRAFFIC_GUIDE constant - it looks like Calypso doesn't have a centralized place or a unified standard for naming such constants. For example, the plans slugs are in lib/plans/constants.js and transfers are in lib/domains/constants. Jetpack products are in lib/products-values/constants.js

Should you create lib/ebooks/constants for this specific constant? Not sure. Maybe. An alternative would be to simply hardcode the product slug instead of use a constant, like the Concierge Session does.

If it was me, I'd probably use the constant and put it where the Jetpack constants are. Looks like Jetpack folks tried to create a unified place but stopped after adding their constants and nobody else picked it up.

sirbrillig · 2020-12-17T17:21:27Z

client/my-sites/checkout/composite-checkout/test/composite-checkout-thank-you.js

@@ -721,4 +721,21 @@ describe( 'getThankYouPageUrl', () => {
 		} );
 		expect( url ).toBe( '/checkout/thank-you/foo.bar/1234abcd' );
 	} );
+
+	it( 'redirects to thank you page (with traffic guide display mode) if traffic guide is in cart', () => {


Thank you for adding a test! ❤️

dzver

It works well for me. Left a few notes.

client/my-sites/marketing/ultimate-traffic-guide/index.js

dzver · 2020-12-18T08:31:14Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+export const WPCOM_TRAFFIC_GUIDE = 'traffic-guide';
+
+export const hasTrafficGuidePurchase = ( purchases ) =>
+	!! (
+		purchases && purchases.find( ( purchase ) => WPCOM_TRAFFIC_GUIDE === purchase.productSlug )
+	);
+
+export const downloadTrafficGuide = () => {
+	window.location.href = 'https://public-api.wordpress.com/wpcom/v2/traffic-guide-download';
+};


The main problem is with the WPCOM_TRAFFIC_GUIDE constant - it looks like Calypso doesn't have a centralized place or a unified standard for naming such constants. For example, the plans slugs are in lib/plans/constants.js and transfers are in lib/domains/constants. Jetpack products are in lib/products-values/constants.js

Should you create lib/ebooks/constants for this specific constant? Not sure. Maybe. An alternative would be to simply hardcode the product slug instead of use a constant, like the Concierge Session does.

If it was me, I'd probably use the constant and put it where the Jetpack constants are. Looks like Jetpack folks tried to create a unified place but stopped after adding their constants and nobody else picked it up.

dzver · 2020-12-18T08:32:40Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+			</h2>
+			<p>
+				{ translate(
+					'We developed this 96 page guide to teach you every modern website traffic trick you need to know in 2020 and beyond.'


It will soon become 2021. Do you think we should make the year dynamic?

Good catch! Made this dynamic.

dzver

I think it's good to go but it can't be merged just yet, we need the tax code diffs to be merged first.

client/my-sites/checkout/checkout/index.jsx

a8ci18n · 2020-12-21T08:50:28Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+	const defaultVariation = () => (
+		<>
+			<h1 className="ultimate-traffic-guide__header">
+				{ translate( 'Introducing the WordPress.com Ultimate Traffic Guide' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 1 times:
translate( 'Introducing The Ultimate Traffic Guide' ) ES Score: 8

a8ci18n · 2020-12-21T08:50:29Z

client/my-sites/marketing/ultimate-traffic-guide/index.js

+				) }
+			</h1>
+			<h2 className="ultimate-traffic-guide__sub-header">
+				{ translate( 'Claim your copy of the Ultimate Traffic Guide today' ) }


ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 1 times:
translate( 'Claim your copy of the Ultimate Traffic Guide' ) ES Score: 7

dzver

LGTM

Depends on D54575-code to be reviewed and launched before merging or may cause Payments Admin issues

* Adds sales and download page for Traffic Guide * Adds thank you page * Fixed placeholder class name * Adds test for checkout thank you page * Adds alt copy for AB test * Show the marketing card only for English locales * Updates logo and copy of card * Adds alternate copy for experiment * Adds download link to checkout thank you page * Fixes incorrect import of the Experiment component * Moves traffic guide traffic constant to lib * Makes the year dynamic * Adds reference cost calculation * Use native Date instead of moment * Removes logic from old getCheckoutCompleteRedirectPath

aneeshd16 added the [Status] In Progress label Dec 9, 2020

a8ci18n reviewed Dec 9, 2020

View reviewed changes

a8ci18n reviewed Dec 10, 2020

View reviewed changes

aneeshd16 force-pushed the add/ultimate-traffic-guide branch from e639c97 to 0a8524b Compare December 11, 2020 07:16

a8ci18n reviewed Dec 17, 2020

View reviewed changes

aneeshd16 marked this pull request as ready for review December 17, 2020 11:37

aneeshd16 requested a review from a team as a code owner December 17, 2020 11:37

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

aneeshd16 removed the [Status] In Progress label Dec 17, 2020

aneeshd16 commented Dec 17, 2020

View reviewed changes

aneeshd16 changed the title ~~WIP: Adds route & sales page for Ultimate Traffic Guide~~ Adds route & sales page for Ultimate Traffic Guide Dec 17, 2020

sirbrillig reviewed Dec 17, 2020

View reviewed changes

dzver reviewed Dec 18, 2020

View reviewed changes

sirbrillig reviewed Dec 18, 2020

View reviewed changes

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

aneeshd16 added 10 commits December 21, 2020 14:02

Adds sales and download page for Traffic Guide

490f051

Adds thank you page

1d8eb97

Fixed placeholder class name

0929d9d

Adds test for checkout thank you page

ef6d2c6

Adds alt copy for AB test

d724f0f

Show the marketing card only for English locales

58f7455

Updates logo and copy of card

c950d92

Adds alternate copy for experiment

e5e5fc0

Adds download link to checkout thank you page

7f220e7

Fixes incorrect import of the Experiment component

8b2d414

aneeshd16 added 4 commits December 21, 2020 14:03

Moves traffic guide traffic constant to lib

059b87e

Makes the year dynamic

3365229

Adds reference cost calculation

ecf8a5d

Use native Date instead of moment

0039609

aneeshd16 force-pushed the add/ultimate-traffic-guide branch from 6a84407 to 0039609 Compare December 21, 2020 08:37

a8ci18n reviewed Dec 21, 2020

View reviewed changes

Removes logic from old getCheckoutCompleteRedirectPath

cfb0a38

dzver approved these changes Dec 21, 2020

View reviewed changes

aneeshd16 merged commit f355bdc into trunk Dec 21, 2020

aneeshd16 deleted the add/ultimate-traffic-guide branch December 21, 2020 14:02

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds route & sales page for Ultimate Traffic Guide #48154

Adds route & sales page for Ultimate Traffic Guide #48154

aneeshd16 commented Dec 9, 2020 •

edited

Loading

matticbot commented Dec 9, 2020

a8ci18n Dec 9, 2020

matticbot commented Dec 9, 2020 •

edited

Loading

a8ci18n Dec 10, 2020

a8ci18n Dec 10, 2020

matticbot commented Dec 11, 2020

aneeshd16 commented Dec 11, 2020 •

edited

Loading

a8ci18n Dec 17, 2020

aneeshd16 Dec 17, 2020 •

edited

Loading

dzver Dec 18, 2020

sirbrillig Dec 17, 2020

dzver left a comment

dzver Dec 18, 2020

dzver Dec 18, 2020

aneeshd16 Dec 18, 2020

dzver left a comment

a8ci18n Dec 21, 2020

a8ci18n Dec 21, 2020

dzver left a comment

Adds route & sales page for Ultimate Traffic Guide #48154

Adds route & sales page for Ultimate Traffic Guide #48154

Conversation

aneeshd16 commented Dec 9, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

Marketing tools card

Sales page

Checkout

Download Page

matticbot commented Dec 9, 2020

Choose a reason for hiding this comment

matticbot commented Dec 9, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matticbot commented Dec 11, 2020

aneeshd16 commented Dec 11, 2020 • edited Loading

Choose a reason for hiding this comment

aneeshd16 Dec 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dzver left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dzver left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dzver left a comment

Choose a reason for hiding this comment

aneeshd16 commented Dec 9, 2020 •

edited

Loading

matticbot commented Dec 9, 2020 •

edited

Loading

aneeshd16 commented Dec 11, 2020 •

edited

Loading

aneeshd16 Dec 17, 2020 •

edited

Loading