Page MenuHomePhabricator

Mobile web donate link
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
spatton
Apr 1 2019, 3:42 PM
Tokens
"Love" token, awarded by spatton.

Description

Problem

In 2018, around 5 million people donated to support Wikipedia and the Wikimedia Foundation. Donating is a popular and necessary way for readers to contributor back to the movement; not everyone who cares about Wikipedia can be an editor. The online fundraising team has put considerable time into optimizing our campaign-focused banner appeals, but these typically run for only around 6 weeks out of the year. Many readers do not see these banners. There is currently no permanent link to donate to WMF on the mobile website.

Please figure out a persistence way for people to support our mission thru monetary means, reducing the dependency on banner campaigns in the long run.

Developer notes

  • Wikimedia UI has a "heart" icon glyph. Use that for the item
  • The URL should use the message sitesupport-url and append the query string parameter utm_medium=mobileSidebar
  • If sitesupport-url is not defined no donate menu item is added
  • The new link should be feature flagged to allow us to roll back (base,amc, logged out users). Suggested: wgMinervaDonateLink

Initial concept

Online fundraising wants to test a "donate to Wikipedia" link in the mobile drawer. Here's a quick mockup for reference:

image.png (687×375 px, 58 KB)

Acceptance criteria

  • Add donate link to main menu on mobile for all users (AMC included)

Developer notes

The online fundraising team can probably deploy this via CentralNotice for the purpose of initial testing. We'll coordinate that and communicate target dates, geography, etc. to y'all.

Design notes

  • the intention here is to add the button to the menu permanently (it is not a temporary "campaign" style change)
  • @alexhollender, could you please remind me: is design approval from your team a prerequisite before testing? If so, should we do the mocks entirely on our side or would you want a more collaborative process?

QA Results - Beta

ACStatusDetails
1T219793#6268319

QA Results - Prod

ACStatusDetails
1T219793#6275276

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

The online fundraising team can probably deploy this via CentralNotice for the purpose of initial testing

Regarding the implementation details. it's worth noting that the main menu is generated client-side, so if CentralNotice were to add a menu item, it would have to do so after the menu is generated.

The JSON-blob from which the menu is constructed and rendered by the client is generated in PHP in the MinervaNeue skin.

I can see two ways of adding the menu item in a fixed location/treatment for the foreseeable future. The choice between the two boils down to "Who wants to own the code?"

1. In CentralNotice

While the JSON-blob is being generated, the MobileMenu hook is emitted after a group of items is added. If the design for the donate link hasn't changed, then the group that the donate item should be added to is the "discovery" group. Fortunately, the MobileMenu hook is run with the name of the group as an argument. With this in mind, here's a sketch of what the hook handler in CentralNotice would look like:

includes/DonateLink/HookHandler.php
namespace CentralNotice\DonateLink;

use MediaWiki\Minerva\Menu\Group;
use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;

class HookHandler {
  const TARGET_GROUP_NAME = 'discovery';

  public function onMobileMenu( $groupName, Group $group ) {
    if ( $groupName === self::TARGET_GROUP_NAME ) {
      $url = "...";

      $group->insertEntry( SingleMenuEntry::create(
        'donate',
        wfMessage( 'centralnotice-mobile-menu-donate' )->text(),
	$url
      );
    }
  }
}

2. In MinervaNeue

The discovery group is generated by MediaWiki\Minerva\Menu\Main\BuilderUtils::getDiscoveryTools, which collaborates with the MediaWiki\Minerva\Menu\Definitions class. Both classes would have to be modified as follows:

includes/Menu/Main/BuilderUtils.php
public static function getDiscoveryTools( Definitions $definitions ) {
  $group = new Group( 'p-navigation' );

  $definitions->insertHomeItem( $group );
  $definitions->insertRandomItem( $group );
  $definitions->insertNearbyIfSupported( $group );

  // Add a donate link (see https://phabricator.wikimedia.org/T219793)
  $definitions->insertDonateItem( $group ); 

  // Allow other extensions to add or override tools
  Hooks::run( 'MobileMenu', [ 'discovery', &$group ] );
  return $group;
}
includes/Menu/Definitions.php
namespace MediaWiki\Minerva\Menu;

use MediaWiki\Minerva\Menu\Entries\SingleMenuEntry;

class Definitions {
    public function insertDonateLink( Group $group ) {
      $url = "...";

      $group->insertEntry( SingleMenuEntry::create(
        'donate',
        wfMessage( 'centralnotice-mobile-menu-donate' )->text(),
	$url
      );
    }
}

Ideally this would be in one of the fundraising extensions to give fundraising tech the ability to turn this on or off. Would Central Notice be a good fit?

I'm a little behind on this topic. Has this already been tested? CentralNotice could help A/B this but there could be performance issues.

It would definitely not be a good idea to manage this through CentralNotice.

Beyond that, we don't control much else on production in the reading experience. We never thought we'd get the ability to implement an on/off switch for this link. We will have to discuss that and get back to you.

@DStrine - any updates from your side? In terms of testing - since there's no "before" for this one, perhaps we can go directly to the deployment itself and then monitor donations coming from mobile from that point forward?

When do you need a decision on this? We need to do a bunch of coordination with @Ppena @jrobell @MeganHernandez_WMF and probably @spatton. They are the stakeholders for where and how this is displayed. Fr-tech might have feedback on how to enable/disable but at the moments, fr-tech doesn't have access or approval to edit the current sidebar. I'm happy to discuss this but it's kind of new territory for us.

@DStrine - The initial request from @spatton was that we try to get this in by the end of June. In terms of instrumentation, @Pcoombe confirmed that the no instrumentation is needed, only the url parameter

Thanks. I heard this from @spatton a few days ago offline. @spatton and @Pcoombe can help with the url parameters.

@alexhollender or @Volker_E could you confirm the asset - I think that's all that's needed here to work on this:
https://en.wikipedia.org/w/resources/lib/ooui/themes/wikimediaui/images/icons/heart.png

It looks like for URL english wikipedia uses https://en.wikipedia.org/wiki/MediaWiki:Sitesupport-url as defined in https://en.wikipedia.org/wiki/MediaWiki:Sidebar
That page looks mobile friendly, so I'd suggest we use sitesupport-url just like we did in AMC.

@alexhollender or @Volker_E could you confirm the asset - I think that's all that's needed here to work on this:
https://en.wikipedia.org/w/resources/lib/ooui/themes/wikimediaui/images/icons/heart.png

@Jdlrobson yes that's correct

Thanks for the quick reply. This is ready for estimation then!

I know @Jdlrobson is clear on what to use, but also for the non-code experts, we'll rely on standard 'heart' icon from OOUI, which is an SVG (with currently a PNG fallback).

If it's possible to change the URL in some way to distinguish it from the desktop sidebar link, that would be really helpful for our analysis. e.g. changing to utm_medium=mobileSidebar

ovasileva raised the priority of this task from Medium to High.Jun 10 2020, 5:06 PM
ovasileva set the point value for this task to 3.Jun 10 2020, 5:23 PM
Niedzielski subscribed.

@vas, I'm assigning this task to you and moving to doing to clarify who is working on it

Change 606232 had a related patch set uploaded (by Vas Yaremchuk; owner: Vas Yaremchuk):
[mediawiki/skins/MinervaNeue@master] Mobile web donate link

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

Jon,

please review my patch.

I have several questions:

  1. see includes/Menu/Definitions.php line 383

Is it possible to get it form settings?

  1. see includes/Menu/Definitions.php line 395

What's the best way to add target="_blank" for that link?
does it make sense?

  1. see includes/Menu/Main/BuilderUtil.php line 50

I can't figure out how to get access to $wgMinervaDonateLink.
When I tried
$skin = new SkinMinerva();
I got
Fatal error: Cannot declare class SkinMinerva...

vas reassigned this task from vas to Jdlrobson.EditedJun 19 2020, 2:26 PM

Hi Jon,

please check my patch again.

I can see only one issue:
I can get value of 'sitesupport-url'.

The page http://localhost:8000/index.php/Wiki/MediaWiki:Sitesupport-url
was added locally https://monosnap.com/file/5bpDwKRdW5G4ZLkzDUwq6XyHvuZHwo

But the donate URL is 'http://localhost:8000/index.php/%E2%A7%BCsitesupport-url%E2%A7%BD'

Where am I wrong?

The message is not being picked up because you created it at "Wiki/MediaWiki:Sitesupport-url" instead of "MediaWiki:Sitesupport-url". The namespace and exact title are very important.

Hi Jon,

I didn't find existing sitesupport message,
so I have used a new one.

Please review my patch again.

Hi Jon,

I didn't find existing sitesupport message,
so I have used a new one.

You'll not see it because the message is defined by another extension, but still you should use it.

Hi Jon,

please review my patch again.

Change 606232 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Mobile web donate link

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Edtadros.

after design review with Alex - it's in the wrong place.

Change 607884 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Donate link should be in a separate group in main menu

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

If it's possible to change the URL in some way to distinguish it from the desktop sidebar link, that would be really helpful for our analysis. e.g. changing to utm_medium=mobileSidebar

hey we're running into some complications here because https://en.wikipedia.org/wiki/MediaWiki:Sitesupport-url already has utm_medium=sidebar in it... Mobile sets the new parameter but its in addition to this other parameter. Could that parameter be moved out of the message into somewhere more suitable or could we rethink this requirement? For example relying on utm_medium=sidebar for all skins but also adding utm_skin=minerva ?

Not really, because then I don't know how we would re-add that parameter for the desktop link. And utm_skin won't be picked up by our analytics system.

You could add utm_key=minerva_1, that will work although it needs a little bit more work on the Fundraising side to parse out those results.

(In the longer term I think we should probably move away from using sitesupport-url for both desktop and mobile, and instead have the base URL in server config with the site name and language dynamically added. There's no real reason these links need to be editable on-site. But let's get this link added first, and follow up on that later.)

I think we can replace &utm_medium=sidebar with &utm_medium=mobileSidebar in the link generated by Minerva. Maybe that could work in the short term?

Change 607884 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Donate link should be in a separate group in main menu

https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/ /607884

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhone 11 Pro Max

Test Artifact(s):

QA steps

✅ AC1: Add donate link to main menu on mobile for all users (AMC included)

AnonAMC OffAMC On
en.m.wikipedia.beta.wmflabs.org_wiki_Main_Page(iPhone 11 Pro Max).png (2×1 px, 193 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileOptions&success(iPhone 11 Pro Max).png (2×1 px, 171 KB)
en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileOptions&success(iPhone 11 Pro Max) (1).png (2×1 px, 175 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhone 11 Pro Max

Test Artifact(s):

QA steps

✅ AC1: Add donate link to main menu on mobile for all users (AMC included)

AnonAMC OffAMC On
en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png (2×1 px, 277 KB)
en.m.wikipedia.org_w_index.php_title=Special_MobileOptions&success(iPhone 11 Pro Max).png (2×1 px, 169 KB)
en.m.wikipedia.org_w_index.php_title=Special_MobileOptions&success(iPhone 11 Pro Max) (1).png (2×1 px, 170 KB)

@ovasileva The Donate link only says Donate even in Wikipedia. This is different from Beta, so I thought I'd highlight it.

Now live on production. Thanks all!

This is a milestone and I appreciate everyone who worked on it.