Add CES prompts for initial setup and campaign creation #1152

ianlin · 2021-12-13T10:02:46Z

Changes proposed in this Pull Request:

Closes #882.

This PR implements two CES prompts that will displayed when the user

Prompt 1: successfully completes initial setup flow and enters the product feed page for the first time
Prompt 2: successfully completes Ads creation flow and clicks "Got it" in the success modal.

Implementation Details

Prompt 1

This can be split into two requirements:

Display it when the user enters product feed for the first time after setting up
Don't display it unless the success modal is not shown. I.e. dismiss the success modal will display the CES prompt

When the user sees the success modal, there are different paths that they can go:

Dismiss the success modal by clicking X button, clicking anywhere outside of the modal, or clicking Maybe later button.
Go to the product feed page in a new tab by clicking Manage and edit your product feed in WooCommerce.
Go to the page to create paid campaign, and they will be redirected to the dashboard after finish creating campaign.
a. Eventually the user will go to the product feed page by clicking it, so the behaviour will be just like the point 2 above

In oder to fulfil the requirements above, we need to store a flag gla-can-onboarding-setup-ces-prompt-open in the local storage to help us to decide when can we display the CES prompt. The flows will be like this:

Flow 1 (Video 1)

User sees the success modal
At the mean time the CES prompt will not be displayed since the success modal is shown
The success modal set gla-can-onboarding-setup-ces-prompt-open to true (actually any value is fine)
User dismisses the success modal, then the CES prompt is shown
The CES prompt will delete the flag gla-can-onboarding-setup-ces-prompt-open from the local storage

Flow 2 (Video 2)

User sees the success modal
The success modal set gla-can-onboarding-setup-ces-prompt-open to true
User go to the product feed page in a new tab
In the new tab there are no success modal and the flag is in the local storage, the CES prompt is shown
The CES prompt deletes gla-can-onboarding-setup-ces-prompt-open

Prompt 2

Prompt 2 is simpler, the prompt will only be shown when the user clicks on "Got it" of the campaign creation success modal, so we don't need the flag in local storage.

(Video 3)
(Video 4)

Screenshots:

Video 1 - Dismiss success modal and show the CES prompt

ces-dismiss-success-modal.mov

Video 2 - Go to product feed in a new tab

ces-product-feed-new-tab.mov

Video 3 - Click "Got it" on the campaign creation success modal and show the CES

ces-campaign-got-it.mov

Video 4 - Dismiss the campaign creation success modal and the CES won't show

ces-campaign-dismiss.mov

Detailed test instructions:

Prompt 1, Flow 1

Go to the product feed page with the success modal opened: /wp-admin/admin.php?page=wc-admin&path=/google/product-feed&guide=submission-success
Enable event debugging by typing localStorage.setItem('debug', 'wc-admin*') in your web's dev console
Dismiss the success modal
Check if the CES prompt is shown
Check if the events are sent correctly from the dev console

Prompt 1, Flow 2

~~Follow the first three steps above~~ Follow the first two steps above (thanks @puntope)
Go to the product feed page in a new tab by click Manage and edit your product feed in WooCommerce
Check if the CES prompt is shown
Check if the events are sent correctly from the dev console
Go back to the original tab and dismiss the success modal, the CES prompt should not be shown

Prompt 2

Go to the GLA dashboard page with the campaign creation modal opened: /wp-admin/admin.php?page=wc-admin&path=/google/dashboard&guide=campaign-creation-success
Check if the CES prompt is shown if clicking "Got it"
Check if the CES prompt is not shown if dismissing the success modal
Check if the events are sent correctly from the dev console

Changelog entry

Add - CES prompts for initial setup and campaign creation.

ecgan · 2021-12-13T10:48:38Z

@ianlin , I converted your PR to draft, since it is still "work in progress". You can create a draft PR without needing to specify "WIP" in the PR title. When the PR is ready for review, just add the reviewers and click on the "Ready for review" button. 🙂

ianlin · 2021-12-14T02:44:50Z

@ecgan TIL, thank you! 😄

Since this logic will also be used for the CES prompt component in the upcoming implementaion.

Requirement: 1. Display it when the user enters product feed for the first time after setting up 2. However, don't display it unless the success modal is not shown. I.e. dismiss the success modal will display the CES prompt Displaying Logic: - When the user finishes setting up, they will be in the product feed page and the success modal is shown - There are 2 scenarios: - If the user dismiss the success modal, the CES prmopt will be displayed - If the user clicks "Manage and edit your product feed in WooCommerce" and goes to the product feed page in a new tab, the CES prompt will be displayed in the new tab - If the user dismisses the CES prompt or clicks "Give feedback" on the prompt, the CES prompt in the original tab will not be shown when the success modal is dismissed - But if the user does not dismiss the CES prompt or clicks "Give feedback" on the prompt in the new tab, the CES prompt in the original tab will be shown when the success modal is dismissed

- DB options: woocommerce_allow_tracking - wp-admin settings: WooCommerce -> Settings -> Advanced -> WooCommerce.com -> Enable tracking - Frontend checks `window.wcTracks.isEnabled`

Note: CES = Customer Effort Score

And make it more general so it can be a shared component

This is rather simple. This prompt should appear immediately after user successfully completes Ads creation flow and clicks "Got it" in the success modal.

This reverts commit 8ac7159.

This reverts commit c101d69.

js/src/components/customer-effort-score-prompt/index.js

puntope · 2021-12-17T11:29:07Z

js/src/dashboard/campaign-creation-success-guide/index.js

+	const handleGotItClick = useCallback(
+		( e ) => {
+			handleCloseWithAction( e );
+			setCESPromptOpen( true );
+		},
+		[ setCESPromptOpen ]
+	);


❓ / 💅

What i the rationale behind using handleGotItClick separated. Instead of adding

if ( action === CTA_CREATE_ANOTHER_CAMPAIGN ) { getHistory().push( getCreateCampaignUrl() ); } if ( action === CTA_CONFIRM) { setCESPromptOpen( true ); }

I guess is something related to the UseCallback? Not sure.

I think originally my thought was: the handleCloseWithAction is defined outside of the component GuideImplementation, we will need to pass the function prop setCESPromptOpen() to it and I think it could be inflexible if we have more custom actions. But I agree with you that using handleCloseWithAction to handle multiple actions would be better than using a separated handleGotItClick. What do you think if we move handleCloseWithAction inside the component so it can use the function prop setCESPromptOpen() directly?

Ohhh, understood, didn't show that one. Thanks for the explanation.

What do you think if we move handleCloseWithAction inside the component

Would be interesting to know why it is outside, wondering if there is an important reason for it, maybe @eason9487 knows.

I would go ahead with your current solution and the maybe refactor after knowing that. It's 100% a non blocking issue. Since I don't want to block the PR I rely on you for the final decision regarding this. Again, looks good now as it's.

Those click handlers were not dependent on props and states, so to avoid their references changing all the time, I put them outside then. It's ok to move them inside the component.

💅
BTW, I'd suggest adding a callback prop, such as onGuideRequestClose( action ), to this component and moving the process of handleCloseWithAction handler to the upper component. Therefore, it could decouple the <CustomerEffortScorePrompt> from this guide, and the logic of the opening/closing this guide could also be centralized on the outside. In this way, as with product feed index, the similar logic is implemented at dashboard index.

@eason9487 Great suggestion. Added in ~~bc3aaef~~ 739e897.

js/src/components/customer-effort-score-prompt/index.js

puntope · 2021-12-17T13:58:49Z

Prompt 1, Flow 1 ✅

Going to the page /wp-admin/admin.php?page=wc-admin&path=/google/product-feed&guide=submission-success

Behaviour and visual testing these for now and looks good ✅

When modal is visible, then CES isn't ✅
Dismiss the modal with X (CES shows and records event) ✅
Dismiss the modal with Cancel button (CES shows and records event) ✅
Dismiss the modal with MaybeLater button (CES shows and records event) ✅
Disable "Allow tracking" in Settings (CES not showing up) ✅
Reproduced video expected behaviour ✅

puntope · 2021-12-17T15:18:31Z

Prompt 1 Flow 2

🚧

I could not complete the test instructions successfully (I take as granted that Follow the first three steps above means Follow the first two steps above because I'm not able to click the new tab with the modal dismissed)

Followed steps:

Go to the product feed page with the success modal opened: /wp-admin/admin.php?page=wc-admin&path=/google/product-feed&guide=submission-success
Enable event debugging by typing localStorage.setItem('debug', 'wc-admin*') in your web's dev console
Go to the product feed page in a new tab by click Manage and edit your product feed in WooCommerce
I see the CES prompt and the recordEvent ✅
Go back to the original tab and dismiss the success modal, the CES is there ❌

Screen.Recording.2021-12-17.at.16.19.15.mov

puntope · 2021-12-17T15:32:01Z

Prompt 2 ✅

Went to /wp-admin/admin.php?page=wc-admin&path=/google/dashboard&guide=campaign-creation-success
Clicked on "Got it"
CES was shown, event was tracked ✅
Repeated 1
Dismissed modal
CES was not shown ✅
With Allow tracking unchecked CES was not shown ✅

puntope · 2021-12-17T15:42:26Z

CES Events 🚧 /❓

When I click on feedback, it records wcadmin_gla_ces_modal_open ✅
When I send feedback, it records wcadmin_gla_ces_feedbackwith the right score and empty comments.✅
When I close CES, it records wcadmin_gla_ces_snackbar_closed ✅
When CES shows, it records wcadmin_gla_ces_snackbar_open ✅

🚧 /❓

In product feed, context was gla-setup ✅ but parent modal and other tracks shows submission-success as context in the same scope.

In campaigns setup, context was create-ad-campaign but the parent modal context was campaign-creation-success

I guess we should maintain consistency between them. Since it's exactly the same context. Thoughts?

js/src/product-feed/index.js

Ref: p1639742969012200-slack-CK365S85V

ianlin · 2021-12-20T04:59:32Z

@puntope

I guess we should maintain consistency between them. Since it's exactly the same context. Thoughts?

Good catch! I have no idea why I created a different context.. thanks! Added in 3c9b2f6

findingsimple · 2021-12-20T05:19:28Z

Nice work @ianlin ❤️

Reason to change: There was a bug - Success modal is displayed, CES prompt is not shown - Open a new tab to the product feed page, CES prompt is shown - Go back to the original tab and dismiss the success modal, the CES prmopt is shown, which is what we don't want. To solve it, moving `removeCESPromptFlagFromLocal` from `onNoticeDismissed` and `onModalShown` to only `onNoticeShown` is not enough, as it leads to another problem: - Success modal is displayed, CES prompt is not shown - Open a new tab to the product feed page, CES prompt is shown - Click `Give feedback` but the CES modal is not displayed This is because we change to remove the CES flag from local storage when the CES prompt is shown. When it happens the ProductFeed will re-render and the CES prmopt will not be rendered because the flag was removed. Then clicking `Give feedback` won't render the modal. To solve this we add a component state `canCESPromptOpen` in ProductFeed component, rather than check the local storage flag directly. Then we add the logic to update the `canCESPromptOpen` state only when its value is false.

ianlin · 2021-12-20T10:08:09Z

@puntope

Go back to the original tab and dismiss the success modal, the CES is there ❌

Good catch as well! I have updated this in 07d85e4.

To explain this:

Originally the removeCESPromptFlagFromLocal function is called when the CES modal is shown or is dismissed. Moving removeCESPromptFlagFromLocal from onNoticeDismissed, onModalShown to only onNoticeShown solves the problem, but it leads to another problem:

Success modal is displayed, CES prompt is not shown
Open a new tab to the product feed page, CES prompt is shown
Still in the new tab, clicking Give feedback but the CES modal is not displayed

This is because we change to remove the CES flag from local storage when the CES prompt is shown. When it happens the ProductFeed will re-render and the CES prmopt will not be rendered because the flag was removed. Then clicking Give feedback won't render the modal.

To solve this we add a component state canCESPromptOpen in ProductFeed component, rather than check the local storage flag directly. Then we add the logic to update the canCESPromptOpen state only when its value is false, and it solves the problem and everything works as expected now.

Here's the video to demonstrate the fixed behaviour:

Screen.Recording.2021-12-20.at.18.04.59.mov

puntope · 2021-12-20T12:56:31Z

js/src/components/customer-effort-score-prompt/index.js

+ * @param {string} props.label Text to be displayed in the CES notice and modal.
+ * @return {JSX.Element} Rendered element.
+ */
+const CustomerEffortScorePrompt = ( { eventContext, label } ) => {


💅 Non blocking

I guess we can add here

if ( ! isWCTracksEnabled() ) return null; Since it is a common check for all the prompts, right?

And then remove them in js/src/dashboard/campaign-creation-success-guide/index.js and js/src/product-feed/index.js

puntope · 2021-12-20T12:58:50Z

js/src/components/customer-effort-score-prompt/index.js

+/**
+ * CES feedback recorded
+ *
+ * @event gla_ces_feedback


Suggested change

* @event gla_ces_feedback

* @event gla_ces_feedback

* @property {number} score The provided feedback score.

* @property {string} comments If a comment is provided.

puntope · 2021-12-20T13:08:06Z

js/src/dashboard/campaign-creation-success-guide/index.js

+				isOpen={ isOpen }
+				setCESPromptOpen={ setCESPromptOpen }
+			/>
+			{ isCESPromptOpen && wcTracksEnabled && (


💅

See my previous comment regarding isWCTracksEnabled();

puntope · 2021-12-20T13:09:05Z

js/src/product-feed/index.js

+
+	const wcTracksEnabled = isWCTracksEnabled();


💅

See comment regarding isWCTracksEnabled();

puntope · 2021-12-20T14:21:39Z

js/src/utils/localStorage.js

+
+const localStorage = {
+	get( key ) {
+		return localStorageExists ? window.localStorage.getItem( key ) : null;


💅 What do you think about...

return window?.localStorage?.getItem( key ) or return window?.localStorage?.getItem( key ) ?? null (in case we need null as return for a reason).

That way we can remove both conditionals and the localStorageExists computed function

puntope · 2021-12-20T14:32:07Z

js/src/product-feed/index.test.js

+			} );
+		} );
+
+		describe( 'And both canCESPromptOpenLocal and wcTracksEnabled are true', () => {


💅

RE- comments regarding isWCTracksEnabled

It will also simplify the test. We can have a separated test for the CESPrompt checking that and here only test LocalStorage / SubmissionSuccessGuide

puntope

✅ LGTM. Good work!

All the blocking issues were addressed and this PR looks good for me

Prompt 1 test ✅
Prompt 1.2 test ✅
Prompt 2 thank test ✅
Unit tests ✅

💅 Just a few pending comments out there

Ref: woocommerce/woocommerce-admin#7810

ianlin self-assigned this Dec 13, 2021

ecgan marked this pull request as draft December 13, 2021 10:18

ianlin added 5 commits December 15, 2021 11:13

Add @woocommerce/customer-effort-score module

36ce432

Move checking qs "guide" from SubmissionSuccessGuide to its parent

de2d18e

Since this logic will also be used for the CES prompt component in the upcoming implementaion.

Use the guide name defined in the constants

05c5459

Add a wrapper for window.localStorage

e8ef37c

ianlin force-pushed the feature/882-add-ces-prompts branch from 5772004 to 0ff1b0f Compare December 15, 2021 03:13

ianlin added 5 commits December 15, 2021 11:28

Send CES feedback using event tracking

83ed21c

Only display CES prompts when WC tracking is enabled

346880a

- DB options: woocommerce_allow_tracking - wp-admin settings: WooCommerce -> Settings -> Advanced -> WooCommerce.com -> Enable tracking - Frontend checks `window.wcTracks.isEnabled`

Replace Ces with CES

70e8d5a

Note: CES = Customer Effort Score

Move CustomerEffortScorePrompt from product-feed/ to components/

bd41bcf

And make it more general so it can be a shared component

Display Ads campaign creation CES prompt

9b6a811

This is rather simple. This prompt should appear immediately after user successfully completes Ads creation flow and clicks "Got it" in the success modal.

ianlin force-pushed the feature/882-add-ces-prompts branch from f6ff5ee to 9b6a811 Compare December 15, 2021 07:47

ianlin added 5 commits December 16, 2021 21:06

Revert "Remove not used Svgr mock."

5e0fefb

This reverts commit 8ac7159.

Revert "Remove SVG module mapper,"

064000c

This reverts commit c101d69.

Add tests for js/src/product-feed/index.js

388c8ec

Add doc to CustomerEffortScorePrompt component

74cc674

Add tests for js/src/dashboard/campaign-creation-success-guide

fd51468

ianlin changed the title ~~WIP: Add CES prompts~~ Add CES prompts for initial setup and campaign creation Dec 17, 2021

ianlin requested a review from a team December 17, 2021 10:20

ianlin marked this pull request as ready for review December 17, 2021 10:20

puntope reviewed Dec 17, 2021

View reviewed changes

js/src/components/customer-effort-score-prompt/index.js Outdated Show resolved Hide resolved

puntope reviewed Dec 17, 2021

View reviewed changes

js/src/components/customer-effort-score-prompt/index.js Outdated Show resolved Hide resolved

puntope reviewed Dec 17, 2021

View reviewed changes

js/src/product-feed/index.js Outdated Show resolved Hide resolved

ianlin added 4 commits December 20, 2021 11:34

Add docs for event records of CES prompts

2932545

Remove using PropTypes

006b2ac

Ref: p1639742969012200-slack-CK365S85V

Add optional chaining for getQuery()

19ff496

Update event context for CES prompts to match their parents' context

3c9b2f6

ianlin requested a review from puntope December 20, 2021 10:08

puntope reviewed Dec 20, 2021

View reviewed changes

puntope approved these changes Dec 20, 2021

View reviewed changes

ianlin added 3 commits December 24, 2021 18:04

Decouple CustomerEffortScorePrompt and the CampaignCreationSuccessGuide

739e897

Add @woocommerce/settings dependency (DEWP) in Jest config

ab165c7

Ref: woocommerce/woocommerce-admin#7810

Unit test on Dashboard rather than CampaignCreationSuccessGuide

bc62333

ianlin force-pushed the feature/882-add-ces-prompts branch from 624373a to bc62333 Compare December 24, 2021 10:05

ianlin merged commit 48df4fb into develop Dec 27, 2021

ianlin deleted the feature/882-add-ces-prompts branch December 27, 2021 06:15

ianlin mentioned this pull request Jun 2, 2022

Add useEffect to avoid multiple CES prompts on the Dashboard Page #1543

Open

Add CES prompts for initial setup and campaign creation #1152

Add CES prompts for initial setup and campaign creation #1152

Uh oh!

Conversation

ianlin commented Dec 13, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Implementation Details

Prompt 1

Prompt 2

Screenshots:

Video 1 - Dismiss success modal and show the CES prompt

Video 2 - Go to product feed in a new tab

Video 3 - Click "Got it" on the campaign creation success modal and show the CES

Video 4 - Dismiss the campaign creation success modal and the CES won't show

Detailed test instructions:

Prompt 1, Flow 1

Prompt 1, Flow 2

Prompt 2

Changelog entry

Uh oh!

ecgan commented Dec 13, 2021

Uh oh!

ianlin commented Dec 14, 2021

Uh oh!

Uh oh!

puntope Dec 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ianlin Dec 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eason9487 Dec 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ianlin Dec 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

puntope commented Dec 17, 2021

Uh oh!

puntope commented Dec 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

puntope commented Dec 17, 2021

Uh oh!

puntope commented Dec 17, 2021

Uh oh!

Uh oh!

ianlin commented Dec 20, 2021

Uh oh!

findingsimple commented Dec 20, 2021

Uh oh!

ianlin commented Dec 20, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

puntope left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ianlin commented Dec 13, 2021 •

edited

Loading

puntope Dec 17, 2021 •

edited

Loading

ianlin Dec 20, 2021 •

edited

Loading

eason9487 Dec 20, 2021 •

edited

Loading

ianlin Dec 24, 2021 •

edited

Loading

puntope commented Dec 17, 2021 •

edited

Loading