Page MenuHomePhabricator

🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 20th
Closed, ResolvedPublic2 Estimated Story Points

Description

The campaigns team wants to test the effect of displaying the banner form as a slide. The banners are based on the control banner of desktop-de-04.

Acceptance Criteria

  • The variant banner does not display the form on the right side.
  • Instead, the form is displayed as the last slide (see Design).
  • Clicking on the button in one of the text slides
    • displays the last slide.
    • logs an event passing the number of slides seen and the number of the slide that was displayed when clicking.
    • stops the auto-sliding.
  • Submitting the form logs an event passing the viewport dimensions.
  • Banner screenshots are taken and uploaded to Shutterbug.

Implementation Notes

  • Duplicate the form on the right side to maintain equal height.

Event Timeline

kai.nissen set the point value for this task to 8.
CorinnaHillebrand_WMDE renamed this task from 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 7th to 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 16th.Sep 3 2021, 9:26 AM

Thanks, @AbbanWMDE! I had a look at the banners on Chrome and Firefox and found some issues:

  • Control
    • When the control banner is loaded, a > is displayed until the banner scrolls in from the top.
  • Variant
    • The submit button of the donation form is cut off on the right side below a viewport width of 1285px.

screenshot-de.wikipedia.org-2021.09.07-10_47_50.png (109×412 px, 8 KB)

  • The cursor turns into a hand when hovering over elements that can't be interacted with.
  • The space between the radio button rows should not grow.

screenshot-de.wikipedia.org-2021.09.07-10_46_23.png (117×494 px, 7 KB)

  • The blue vertical dividers should be displayed between the first two rows.
  • Radio buttons should always be aligned in a grid.

screenshot-de.wikipedia.org-2021.09.07-10_50_38.png (89×241 px, 6 KB)

  • Radio buttons should not overlay other radio buttons' labels.

screenshot-de.wikipedia.org-2021.09.07-10_52_41.png (105×286 px, 6 KB)

Oh, and can you upload banner screenshots to Shutterbug?

kai.nissen changed the point value for this task from 8 to 2.

@kai.nissen Fixes are in, will do Shutterbug next

AbbanWMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2021-09-13 board.

@AbbanWMDE Changes look good to me. I just changed the start and end dates, also the campaign parameters of the banners in Central Notice. Can you apply the changed date (210917) to the banner code?

kai.nissen renamed this task from 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 16th to 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 17th.Sep 14 2021, 11:32 AM
kai.nissen renamed this task from 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 17th to 🎬️ desktop-de-05 | Show donation form in the last slide | ⏰ Sep 20th.Sep 17 2021, 7:57 AM

@AbbanWMDE Logging event data doesn't seem to be triggered when clicking the buttons in one of the first four slides. I couldn't reproduce the event to be triggered and there is no data in the database.

@kai.nissen Oops, I forgot to add the event to those buttons. Should be firing an event called slide-button-clicked now

@AbbanWMDE Events are triggered now. Thanks for fixing!