search

woocommerce / google-listings-and-ads

Sync your store with Google to list products for free, run paid ads, and track performance straight from your store dashboard.
https://woo.com/products/google-listings-and-ads/
GNU General Public License v3.0
45 stars 21 forks source link

Campaign Creation: Add coupon banner to the top of the page #2499

Open joemcgill opened 1 month ago

joemcgill commented 1 month ago

Part of https://github.com/woocommerce/google-listings-and-ads/issues/2459

Image

In order to bring more prominence to the $500 ads credit that is available for new accounts, we'll make the offer more prominent on the campaign creation step of the onboarding flow.

Acceptance Criteria

Implementation Brief

A component for this banner is already part of the SetupAccounts step for the ads setup stepper (js/src/setup-ads/ads-stepper/setup-accounts/index.js). This component can be moved to the top-level js/src/components directory and used in both the current SetupAccounts component and imported into the SetupPaidAds component in js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js. This should use the same useFreeAdCredit() hook to determine whether it is displayed.

Test Coverage

  1. E2E tests in tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js should be updated to add a test that confirms the banner is shown
  2. Ensure E2E tests for the ads stepper are updated if needed.
joemcgill commented 1 month ago

@fblascogarma:

https://github.com/woocommerce/google-listings-and-ads/issues/2459 includes a prototype that shows the banner across the entire top of the page. For consistency, can we show this within the StepContent component above the PaidAdsFeaturesSection component?

Would you be ok with us taking this approach rather than needing to create updated designs for this issue?

fblascogarma commented 1 month ago

@joemcgill which one is the StepContent and PaidAdsFeaturesSection? Is the StepContent the progression tracker that shows the steps of the onboarding flow? And is the PaidAdsFeaturesSection the card with title "Drive more sales blablalba..."?

joemcgill commented 1 month ago

@fblascogarma the StepContent component is what shows the content for a specific step and the PaidAdsFeatureSection is the top section of that page this is shown currently with the information about the PMax campaign in the left column and the "Drive more sales" card in the right column. Here's a quick example of what I'm proposing so it's easier to visualize.

image
fblascogarma commented 1 month ago

Thank you for visualizing your proposal, @joemcgill ! I'm okay with it. But should Michael the designer validate it just in case?

joemcgill commented 4 weeks ago

@michaeleleder is going to look into this and provide some UX feedback based on the usage of this component in the Woo design system.

michaeleleder commented 4 weeks ago

@joemcgill Seems like nowhere it explicitly says the Inline Notice component has to be on certain background so if making any changes means significant effort, technically it doesn't break any rule and doesn't seem to cause any accessibility issues.

That said, it is clear that this component is always used on a white background in both the design systems and WordPress Developer Resources (except for the white one, which is used on a grey background), so if we want to keep it consistent, we should place it on a white background.

Image

Most logical adjustment would be adding the component to the white card, also because the card already mentiones the $500 credit making this duplicite. That said, I'm not aware or all the potential implications, for example how does it affect the layout when the component isn't shown (when an Ads account is not eligible).

joemcgill commented 3 weeks ago

Thanks @michaeleleder this makes sense to me. Here's a quick example of what I think that would look like.

Image

joemcgill commented 2 weeks ago

For posterity, the previous design mockup above was approved via a Slack conversation.

joemcgill commented 2 weeks ago

@ankitguptaindia this is ready for QA. Note that the original requirements are a bit vague, as they read "When an Ads account is eligible for a free Ads credit..." However, what the requirements are for eligibility was not clearly defined. Currently, the $500 credit text is always shown when you get to the fourth step of onboarding based on a Google Ads account being connected. We're using the same logic to display this banner instead, which is the expected behavior that should be tested.

joemcgill commented 1 week ago

@asvinb some additional feedback to address here when you have a chance.