Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Campaign Creation: Update Budget Setup Card #2502

Open
5 tasks
Tracked by #2459
joemcgill opened this issue Aug 6, 2024 · 9 comments · May be fixed by #2552
Open
5 tasks
Tracked by #2459

Campaign Creation: Update Budget Setup Card #2502

joemcgill opened this issue Aug 6, 2024 · 9 comments · May be fixed by #2552
Assignees
@asvinb

Comments

@joemcgill
Copy link
Collaborator

joemcgill commented Aug 6, 2024 •
edited by ankitguptaindia
Loading

Part of #2459

Image

For the Budget card, we want to explain to users that:

  1. They will be charged by clicks on ads and can pause the campaign whenever they want.
  2. We recommend running the campaign at least for 1 month because it uses AI to optimize the campaign to reach better results, so it takes time to learn the signals of what works for their business.

Also, the warning message of “With a budget lower than your competitor range, your campaign may not get noticeable results.” appears from the start, before putting any number. Merchants might not connect that warning message to the actual budget they’re putting afterwards.

To set proper expectations with users we will automatically start with a the input set at the minimum recommended value and hide the initial budget warning from this card.

We'll also update the copy in the blue box to read something like this:

“We recommend running campaigns at least 1 month so it can learn to optimize for your business. Tip: Most merchants targeting United States (US) set a daily budget of $15 USD.”

The recommendation amount will still be location-based as it is currently.

Acceptance Criteria

  • The budget warning message is no longer shown when the budget card first loads.
  • The Daily Average Cost input should be set to the minimum recommended value initially instead of 0.00
  • When the Daily Average Cost input is changed, the budget warning should be shown only if the number is lower than the recommended daily average.
  • The copy in the blue box should read We recommend running campaigns at least 1 month so it can learn to optimize for your business. Tip: Most merchants targeting United States (US) set a daily budget of $%d USD., where %d is replaced by the recommended daily budget.
  • When multiple target locations are selected, the location with the highest recommended daily budget is used (no change from current behavior)

Implementation Brief

The budget warning is already wired up so that it won't show if the daily average cost is higher than the recommended daily average, so the main thing to solve here is to ensure the initial form value is set to the recommended value.

The BudgetRecommendations component makes use of the useFetchBudgetRecommendationEffect() hook to fetch the current recommendations. This will need to be moved up to the PaidAdsSetupSections component. Currently the default amount for campaigns is set to 0 here. This can be set using the useFetchBudgetRecommendationEffect() value.

Note for testing: when this screen is loaded, the last value set gets stored in session storage in a gla-onboarding-paid-ads key. This will need to be cleared in order to see changes.

The budget recommendations copy for both the warning and the tip (blue box) can be edited in js/src/components/paid-ads/budget-section/budget-recommendation/index.js.

Test Coverage

E2E tests for tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js need to be updated to confirm the behavior of the initial value, the visibility of the budget warning, and any tests confirming the copy of the budget tip needs to be updated.
@joemcgill joemcgill mentioned this issue Aug 6, 2024
Open
12 tasks
@joemcgill joemcgill changed the title Update Budget Setup Card Campaign Creation: Update Budget Setup Card Aug 6, 2024
@joemcgill joemcgill assigned joemcgill, mikkamp and eason9487 and unassigned joemcgill Aug 6, 2024
@joemcgill joemcgill mentioned this issue Aug 8, 2024
Open
4 tasks
@eason9487
Copy link
Member

eason9487 commented Aug 8, 2024 •
edited
Loading

The BudgetRecommendations component makes use of the useFetchBudgetRecommendationEffect() hook to fetch the current recommendations. This will need to be moved up to the PaidAdsSetupSections component;

Adding a note for this solution. The initial budget for campaign creation also needs to be fetched for the CampaignAssetsForm component or the component consumers of CampaignAssetsForm:

  • js/src/pages/create-paid-ads-campaign/index.js
  • js/src/setup-ads/setup-ads-form.js

@joemcgill
Copy link
Collaborator Author

@eason9487 good note. I wonder if rather than trying to use useFetchBudgetRecommendationEffect() in components that are setting the initial form context, we just handle this directly in the BudgetSection component and use the recommended value any time the formProps.values.amount value is set to 0 here. This way the logic for recommended value is consistent anywhere the BudgetSection is displayed. What do you think?

@eason9487
Copy link
Member

I wonder if rather than trying to use useFetchBudgetRecommendationEffect() in components that are setting the initial form context, we just handle this directly in the BudgetSection component and use the recommended value any time the formProps.values.amount value is set to 0 here. This way the logic for recommended value is consistent anywhere the BudgetSection is displayed. What do you think?

Along with #2501, I expect this processing will be removed together as BudgetSection should no longer have a disabled prop. In addition, the processing is a workaround since we don't have the later-added AdaptiveForm to better handle this scenario of handling form states across multiple layers of components.

Therefore, I would suggest not adding additional logic to BudgetSection to observe and set the initial budget value of the form. When possible, it would be better to handle the initial values in or on top of the form component.

@joemcgill
Copy link
Collaborator Author

Along with #2501, I expect this processing will be removed together as BudgetSection should no longer have a disabled prop. In addition, the processing is a workaround since we don't have the later-added AdaptiveForm to better handle this scenario of handling form states across multiple layers of components.

👍🏻 Sounds good.

Therefore, I would suggest not adding additional logic to BudgetSection to observe and set the initial budget value of the form. When possible, it would be better to handle the initial values in or on top of the form component.

This was my initial instinct as well. The downside to this approach is that if there are different forms that include the BudgetSection component, we need to repeat the useFetchBudgetRecommendationEffect() logic in each form when the initial formValues are set, otherwise the behavior will be inconsistent.

@joemcgill joemcgill assigned joemcgill and unassigned mikkamp and eason9487 Aug 14, 2024
@joemcgill
Copy link
Collaborator Author

After further discussion, we'll only need to set an initial value when creating a campaign, and not when editing, so handling this in the form rather than the BudgetSection setting makes sense. Currently, we're using separate forms for setting up a campaign during onboarding vs setting up a campaign after onboarding (from the dashboard). However, we may consolidate that form in the future, so for now we'll only update this in the form used during onboarding. This currently happens here.

@joemcgill joemcgill removed their assignment Aug 16, 2024
@joemcgill joemcgill mentioned this issue Aug 16, 2024
Open
5 tasks
@asvinb asvinb assigned asvinb and ankitrox and unassigned asvinb Aug 21, 2024
@ankitrox ankitrox linked a pull request Aug 22, 2024 that will close this issue
Open
@ankitrox ankitrox removed their assignment Aug 22, 2024
@joemcgill joemcgill assigned joemcgill and ankitrox and unassigned joemcgill Aug 26, 2024
@asvinb
Copy link
Collaborator

asvinb commented Sep 11, 2024

@ankitrox #2551 has been merged in the feature branch. Can you kindly update your branch with the latest from feature/2459-campaign-creation-flow please?

@ankitrox ankitrox assigned asvinb and unassigned ankitrox Sep 12, 2024
@asvinb asvinb assigned ankitrox and unassigned asvinb Sep 12, 2024
@ankitrox ankitrox assigned asvinb and joemcgill and unassigned ankitrox Sep 16, 2024
@asvinb asvinb assigned ankitrox and unassigned asvinb Sep 17, 2024
@joemcgill joemcgill mentioned this issue Sep 26, 2024
Closed
@asvinb asvinb mentioned this issue Oct 2, 2024
Merged
@asvinb
Copy link
Collaborator

asvinb commented Oct 2, 2024

@joemcgill Can you kindly review PR please?
#2637

I fixed the merge conflicts after merging the update/2535-consolidate-ad-creation-ccf-merged branch and tweaked the implementation. You'll find a diff of the implementation changes here:
https://github.com/woocommerce/google-listings-and-ads/compare/update/2535-consoli[…]ion-ccf-merged...update/2502-budget-setup-card-updates?expand=1

@joemcgill joemcgill assigned asvinb and ankitrox and unassigned joemcgill and ankitrox Oct 2, 2024
@asvinb asvinb assigned ankitguptaindia and unassigned asvinb and ankitrox Oct 3, 2024
@asvinb asvinb assigned ankitguptaindia and unassigned asvinb and ankitrox Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@asvinb asvinb

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update Budget Setup Card. woocommerce/google-listings-and-ads
8 participants
@asvinb @joemcgill @ankitrox @ankitguptaindia @mikkamp @eason9487 @eclarke1 @macka61