Page MenuHomePhabricator

AMC Outreach - contextual hooks via new Drawer (showing AMC optin drawer within workflows)
Closed, ResolvedPublic5 Story Points

Description

User story

As an advanced contributor, I would like to know when my workflows can be simplified

Designs

taps on Talk (or History, Desktop, etc.)page transitions, drawer appears, taps on "Enable..."advanced mode enabled, toast displays

This flow needs to be discussed with engineering. The main questions are:

  1. is it possible to limit the amount of times we show these to people? I think the ideal logic would be that it happens the first time you tap any of the given button/hooks. Example: you tap "Talk" (for the first time since this has been enabled), the drawer appears, you press "No thanks". Next time you tap "Talk" the drawer would not appear, however if you tapped "History" it would.
  2. is it possible to turn the setting on without going to the settings page?
    • If so, can we have a custom toast message, (e.g. "Advanced contributions mode is now enabled. You can turn it off in your settings.") rather than the generic "Settings were saved." message.?
  3. should the drawer/dialog should appear before or after the page transitions to the intended destination (e.g. the Talk or History page)? We discussed at our offsite that appearing after you've arrived at your destination might be less intrusive/disruptive, however if we can ensure that it will only appear once it might be more effective if it appears before the page transitions (in the case of a user tapping on the "Desktop" link this would be necessary).
    • is it possible to show this drawer without dimming the screen and blocking other clicks? More like an optional little panel than a blocking dialog/modal.

Acceptance Criteria

  • Display toast/modal when user performs any of the following actions on the mobile site: selecting talk link at the bottom of the page, selecting the history page link, selecting the desktop link
  • Toast/modal must only display once
  • Nice to have: we still show the toast that says where you can try it out/how to turn it off
  • Selecting "Enable advanced mode" will turn on AMC (without requiring user to go to the settings page)
  • Desktop link:
  • Selecting "Enable advanced mode" will turn on AMC. It will not open the desktop version of the site
  • Selecting "no thanks" will turn on the desktop version of the site
  • Talk link:
  • Selecting "Enable advanced mode" will turn on AMC. It will then load the talk modal
  • Selecting "no thanks" will load the talk modal
  • History link:
  • Selecting "Enable advanced mode" will turn on AMC. It will then load the AMC history page
  • Selecting "no thanks" will load the mobile history page

Open questions/concerns

  • We currently lazy load the drawer. When the user selects a link and is eligible to see the drawer, what should we do while the drawer is loading?
    • Do nothing?
    • Show the drawer immediately and make use of the promisedView pattern?
    • Remove the lazy loading and eager load the drawer (will add to the initial JS payload)?
  • Currently when the user selects "No thanks", the drawer will simply hide. For this task, we need the drawer to hide and also perform an action (e.g. load the talk modal). This could be relatively easy to do by adding a onHide callback param to the showIfEligible method and having the client pass in that param. Something similar could be done with the "Enable advanced mode" button to perform an action, however that AC is much tricker to fulfill because of the page redirection that happens and the fact that that redirection only currently supports redirecting to page titles (hash/query params are not currently supported). I have a patch that would add support for this, but I'm not sure how robust it is.

Dev notes

The general code needed to show the drawer for a given action will probably look something like this:

  1. Add new action to ACTIONS object in mobile.startup/amcOutreach/amcOutreach.js. The onLoad action has already been added here. It can be anything, but make sure the key and value are the same.
  2. Export mobile.startup/amcOutreach/amcOutreach.js in mobile.startup.js so that Minerva can access it
  3. When something triggers an action in Minerva (e.g. talk overlay shows), the following code will be needed:
var mobile = M.require( 'mobile.startup' );
var promoCampaign = mobile.amcOutreach.loadCampaign();
promoCampaign.showIfEligible( mobile.amcOutreach.ACTIONS.whateverNewAction );

You can check out the onLoad action in mobile.init as an example.

QA steps (ready now)

This is now on the beta cluster and enables all logged in users with >= 0 edits to see the drawer (the # of edits is configurable and was set to 0 to make testing easier).

This is a bit of a pain to test multiple times because the drawer should only show once per browser/action/device combo. A way to get around this is to use a new incognito mode window in chrome (iOS Safari has their own version of that at https://support.apple.com/en-us/HT203036) every time you want to see the drawer:

  1. If you have enabled AMC at https://en.m.wikipedia.beta.wmflabs.org, turn it off
  2. Close all previous incognito windows, launch a new incognito window, and login to https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain

Alternatively, if you are on a laptop on chrome, you can open up dev tools and in the console execute localStorage.clear(). This saves you from having to open/close tabs and log in/log out.

When user is logged in with AMC turned off, user clicks desktop link, and then dismisses it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
  • Assert that the drawer remains visible when attempting to scroll.
  • Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the desktop page loads.
  • Go back to the mobile site by clicking the "Mobile view" link in the footer. Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

When user is logged in with AMC turned off, user clicks desktop link, and then enables it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
  • Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads. The desktop site should NOT load.
  • Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

When user is logged in with AMC turned off, user clicks talk button, and then dismisses it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
  • Assert that the drawer remains visible when attempting to scroll.
  • Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the talk overlay appears.
  • Close the talk overlay and click the "Discussion button" again and assert that the drawer does NOT show but the talk overlay appears.

When user is logged in with AMC turned off, user clicks talk button, and then enables it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
  • Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads and the talk overlay appears.
  • Close talk overlay, click the talk button again, and assert that the drawer does NOT show but the talk overlay appears.

When user is logged in with AMC turned off, user clicks history link, and then dismisses it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
  • Assert that the drawer remains visible when attempting to scroll.
  • Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the non-amc history page loads.
  • Go back to previous page and click history link again. Assert that the drawer does NOT show but the history page loads again.

When user is logged in with AMC turned off, user clicks history link, and then enables it

  • Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
  • Enable amc mode by tapping "Enable advanced mode" button. Assert that the amc history page loads
  • Go back to previous page and click history link again. Assert that the drawer does NOT show but the amc history page loads.

QA Results

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterRemove AMC Outreach lazy loading
mediawiki/skins/MinervaNeue : masterTrigger AmcOutreach on History, Talk, and Desktop links
mediawiki/extensions/MobileFrontend : masterMake amcOutreach/promoCampaign support more workflows

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva raised the priority of this task from Medium to High.Jun 26 2019, 5:13 PM
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson renamed this task from AMC Outreach - contextual hooks to AMC Outreach - contextual hooks via new Drawer.Jul 15 2019, 8:50 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
Jdlrobson renamed this task from AMC Outreach - contextual hooks via new Drawer to AMC Outreach - contextual hooks via new Drawer (showing AMC optin drawer within workflows).Jul 17 2019, 4:56 PM

@ovasileva thinking about this acceptance criteria some more:

  • Toast/modal must only display once per action

I wonder if it will be annoying to potentially see the drawer up to four times?

  1. when you load the site (T226068)
  2. if you tap on the desktop link
  3. if you tap on the talk button
  4. if you tap on the history button

We could consider changing the criteria here to "Toast/modal should display the first time you tap one of the three triggers (history, desktop, or talk), and then not again"

Quiddity removed a subscriber: Quiddity.Jul 31 2019, 5:41 PM
nray updated the task description. (Show Details)Aug 13 2019, 7:51 PM
nray updated the task description. (Show Details)Aug 13 2019, 7:54 PM
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)Aug 13 2019, 7:56 PM
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)Aug 13 2019, 8:05 PM
nray updated the task description. (Show Details)Aug 13 2019, 8:11 PM
Jdlrobson added a subscriber: Jdlrobson.

Is this ready for estimation Nick?

nray added a comment.Aug 22 2019, 6:56 PM

Is this ready for estimation Nick?

@Jdlrobson I think it could be ready for estimation if https://phabricator.wikimedia.org/T226069#5380969 has been determined. If not, I'm not sure what actions we are targeting - @ovasileva do you know?

@ovasileva thinking about this acceptance criteria some more:

  • Toast/modal must only display once per action

I wonder if it will be annoying to potentially see the drawer up to four times?

  1. when you load the site (T226068)
  2. if you tap on the desktop link
  3. if you tap on the talk button
  4. if you tap on the history button

We could consider changing the criteria here to "Toast/modal should display the first time you tap one of the three triggers (history, desktop, or talk), and then not again"

Sorry I missed this ping. @alexhollender - I think I'm okay with showing it up to four times. What do you think?

Is this ready for estimation Nick?

@Jdlrobson I think it could be ready for estimation if https://phabricator.wikimedia.org/T226069#5380969 has been determined. If not, I'm not sure what actions we are targeting - @ovasileva do you know?

I think let's wait for @alexhollender to get back and discuss

@ovasileva I don't have a large concern and am fine either way.

nray added a comment.Aug 28 2019, 10:56 PM

@ovasileva @alexhollender If it helps sway the direction at all, I don't think there would be any more extra work to implement what alex suggested in https://phabricator.wikimedia.org/T226069#5380969) compared to having the drawer show once per action (once when tapping the desktop link, once when tapping the talk button, etc)

Jdlrobson reassigned this task from nray to ovasileva.Sep 5 2019, 8:03 PM
Jdlrobson added a subscriber: nray.
ovasileva updated the task description. (Show Details)Sep 10 2019, 4:55 PM
nray added a comment.Sep 10 2019, 5:46 PM

@ovasileva Can you also clarify what should happen when the user taps the black part of the overlay (area outside the drawer)? I'm assuming/hoping (in terms of work involved) that it should be the same behavior as when the user selects the "No thanks" button?

nray updated the task description. (Show Details)Sep 10 2019, 5:51 PM
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)

@ovasileva Can you also clarify what should happen when the user taps the black part of the overlay (area outside the drawer)? I'm assuming/hoping (in terms of work involved) that it should be the same behavior as when the user selects the "No thanks" button?

@nray - same behavior makes sense.

nray updated the task description. (Show Details)Sep 10 2019, 6:25 PM
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)Sep 10 2019, 6:28 PM
nray added a comment.Sep 10 2019, 6:39 PM

thanks @ovasileva . Also, sorry if this was already answered in grooming (I think Jon asked it in the chat), but I'm wondering what should happen if the user loads the talk modal from the url (e.g. user goes to https://en.m.wikipedia.org/wiki/Barack_Obama#/talk). Should we show the drawer or not?

nray updated the task description. (Show Details)Sep 10 2019, 6:40 PM

thanks @ovasileva . Also, sorry if this was already answered in grooming (I think Jon asked it in the chat), but I'm wondering what should happen if the user loads the talk modal from the url (e.g. user goes to https://en.m.wikipedia.org/wiki/Barack_Obama#/talk). Should we show the drawer or not?

We don't need to show it.

ovasileva updated the task description. (Show Details)Sep 11 2019, 5:14 PM
ovasileva updated the task description. (Show Details)
ovasileva set the point value for this task to 5.Sep 11 2019, 5:21 PM
ovasileva removed ovasileva as the assignee of this task.Sep 13 2019, 11:43 AM

Change 537665 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Add AmcOutreach Workflows feature

https://gerrit.wikimedia.org/r/537665

Change 537666 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Add AmcOutreach Workflows

https://gerrit.wikimedia.org/r/537666

Change 537742 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Remove AMC Outreach lazy loading

https://gerrit.wikimedia.org/r/537742

T233514 (replacing deprecated 'editToken' with 'csrfToken') conflicts with https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/537665/ and https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/537742/ (both related to this ticket). This will need to be resolved. Just letting you know as a heads up @nray . If there is anything that I can do to assist with resolving, please do let me know.

nray added a comment.Sep 25 2019, 6:34 PM

thanks for the heads up @TheSandDoctor! I've made the necessary changes to those patches and everything looks good now

nray claimed this task.Oct 1 2019, 9:10 PM

Change 537665 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Make amcOutreach/promoCampaign support more workflows

https://gerrit.wikimedia.org/r/537665

Change 537742 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove AMC Outreach lazy loading

https://gerrit.wikimedia.org/r/537742

I'm waiting for this to be on beta and then will add qa steps

Change 537666 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Trigger AmcOutreach on History, Talk, and Desktop links

https://gerrit.wikimedia.org/r/537666

nray reassigned this task from nray to Edtadros.Oct 3 2019, 4:36 PM
nray updated the task description. (Show Details)
Edtadros reassigned this task from Edtadros to ovasileva.Oct 9 2019, 4:45 AM
Edtadros added a subscriber: Edtadros.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps
  1. If you have enabled AMC at https://en.m.wikipedia.beta.wmflabs.org, turn it off
  2. Close all previous incognito windows, launch a new incognito window, and login to https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain

Alternatively, if you are on a laptop on chrome, you can open up dev tools and in the console execute localStorage.clear(). This saves you from having to open/close tabs and log in/log out.

AC1: When user is logged in with AMC turned off, user clicks desktop link, and then dismisses it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
  2. Assert that the drawer remains visible when attempting to scroll.
  3. Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the desktop page loads.
  4. Go back to the mobile site by clicking the "Mobile view" link in the footer. Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

@ovasileva Everything is fine with this except it doesn't allow me to scroll. I verified this on a physical device as well. I'm not sure this is a fail because the steps say "attempting to scroll". If a user is not supposed to be able to scroll then this is a Pass. If they should still be able to scroll then it's a Fail.

AC2: When user is logged in with AMC turned off, user clicks desktop link, and then enables it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Desktop" link in the footer
  2. Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads. The desktop site should NOT load.
  3. Click the desktop link in the footer again and assert that the drawer does NOT show but the desktop page loads. Click the mobile view link again to go back to the mobile site.

AC3: When user is logged in with AMC turned off, user clicks talk button, and then dismisses it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
  2. Assert that the drawer remains visible when attempting to scroll.
  3. Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the talk overlay appears.
  4. Close the talk overlay and click the "Discussion button" again and assert that the drawer does NOT show but the talk overlay appears.

@ovasileva see AC1.

AC4: When user is logged in with AMC turned off, user clicks talk button, and then enables it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Discussion" button at bottom of page
  2. Enable amc mode by tapping "Enable advanced mode" button. Assert that the page reloads and the talk overlay appears.
  3. Close talk overlay, click the talk button again, and assert that the drawer does NOT show but the talk overlay appears.

AC5: When user is logged in with AMC turned off, user clicks history link, and then dismisses it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
  2. Assert that the drawer remains visible when attempting to scroll.
  3. Dismiss the drawer by tapping the "No thanks" link or by tapping the black part of the overlay. Assert that the non-amc history page loads.
  4. Go back to previous page and click history link again. Assert that the drawer does NOT show but the history page loads again.

AC6: When user is logged in with AMC turned off, user clicks history link, and then enables it

  1. Follow steps 1 - 2 and assert you see the drawer when you click on "Last edited ...." link at bottom of page
  2. Enable amc mode by tapping "Enable advanced mode" button. Assert that the amc history page loads
  3. Go back to previous page and click history link again. Assert that the drawer does NOT show but the amc history page loads.

Edtadros updated the task description. (Show Details)Oct 9 2019, 4:47 AM
ovasileva closed this task as Resolved.Oct 9 2019, 11:34 AM

Looks good! Scrolling behavior is fine

Edtadros updated the task description. (Show Details)Oct 9 2019, 2:38 PM