Page MenuHomePhabricator

Donor badge experiment: Setup donor badge
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

Before any B and C variant-specific work can start, we need the core badge infrastructure in place: the location and the component itself.

Both donor recognition variants share the same badge icon (small filled heart, Wikipedia "W", red, top-right toolbar). Variant-specific popover content, animation, and instrumentation are handled in other sub-tasks of the parent Epic.

Figma Designs of A/B/C variants treatment

Simple messageDelightful experience
Article.png (384×765 px, 136 KB)
Article 1.png (384×765 px, 134 KB)
Article 2.png (384×765 px, 126 KB)

Requirements

  • Experiment is enabled for JS only users.
  • Variant (A) must not load badge CSS or JS – confirm via network waterfall.
  • Badge must not shift the search icon or cause toolbar reflow. CSS scoped only to MinervaNeue. Badge container provided in MN skin in T425445.
  • Hide the badge state persists T427311.
  • Heart badge has been provided in assets task T425444.

Acceptance Criteria for Done

  • Badge component exists and renders correctly for variants B and C; nothing renders for control A.
  • Control A does not load badge JS or CSS (verified via network tab).
  • No header bar reflow or CLS from badge mount (Lighthouse CLS delta < 0.1).

Event Timeline

Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E set the point value for this task to 3.
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)

Change #1287492 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge: Add files and hook handler for donor badge experiment

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

idk if it is documented anywhere? but to get this to work:

Set centralnotice cookie:

mw.cookie.set(
  'centralnotice_hide_fundraising',
  JSON.stringify( { created: Math.floor( Date.now() / 1000 ) } ),
  { path: '/', expires: 7 }
);

minerva-badge client preference:

mw.user.clientPrefs.set( 'minerva-badge', '1' );

also, per usual, setup experiment in my local test kitchen and set experiment override in the browser console:

mw.testKitchen.overrideExperimentGroup('donor-delight-badge', 'treatment-b-simple');

or:

mw.testKitchen.overrideExperimentGroup('donor-delight-badge', 'treatment-c-delightful');

Change #1287492 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge: Add files and hook handler for donor badge experiment

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

Change #1290931 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/WikimediaCustomizations@master] Donor badge style followup

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

Change #1290931 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] Donor badge style followup

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

Assuming this task is about the WikimediaCustomizations code project, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects or looking at workboards. Please set appropriate project tags when possible. Thanks!

[saved as draft comment] We will limit this experiment to JavaScript only users, given the experiment character.

Jdlrobson-WMF added subscribers: bwang, Jdlrobson-WMF.

@bwang @Volker_E

In treatment-simple the popup appears on every page load. I think it should only show on the first display? Can you please fix? This seems like it would break the A/B test as people would be motivated to click hide.

$.cookie( 'centralnotice_hide_fundraising', '{"v":1,"created":1779379520,"reason":"donate"}', { path: '/' } );
mw.testKitchen.overrideExperimentGroup('donor-delight-badge', 'treatment-b-simple');

What was before only mentioned in 1:1s before my vacation, the way of current Minerva header layout – compacting the on left/start position after logo search input, to a right/end position in header search icon-only button – does only work with one element.
This still ended up as an issue: T427407: Search icon appears on the left on mobile while logged out on certain wikis, with the fix we have limited the new Flexbox treatment only to experiment selectors.

Change #1296524 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/WikimediaCustomizations@master] docs, tokens: Bring documentation to consistent state, also use 1 token

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

Change #1296524 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] docs, tokens: Bring documentation to consistent state, also use 1 token

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

@bwang @Volker_E

In treatment-simple the popup appears on every page load. I think it should only show on the first display? Can you please fix? This seems like it would break the A/B test as people would be motivated to click hide.

$.cookie( 'centralnotice_hide_fundraising', '{"v":1,"created":1779379520,"reason":"donate"}', { path: '/' } );
mw.testKitchen.overrideExperimentGroup('donor-delight-badge', 'treatment-b-simple');

Moved to T425450

Please fold this into the QA task you are creating and resolve it when that's done.

Thank you, @aude for the minerva-badge client preference and experiment overrides!

Checked in enwiki beta - added a comment with found issues - https://phabricator.wikimedia.org/T427313#12012838

All ACs seem to be in place.

treatment-b-simpletreatment-c-delightful
Screenshot 2026-06-11 at 7.24.30 PM.png (762×1,468 px, 111 KB)
Screenshot 2026-06-11 at 7.24.43 PM.png (924×1,460 px, 178 KB)
Screenshot 2026-06-11 at 7.58.37 PM.png (912×1,510 px, 125 KB)
Screenshot 2026-06-11 at 8.00.17 PM.png (916×1,188 px, 161 KB)
Screenshot 2026-06-11 at 8.00.36 PM.png (908×1,658 px, 169 KB)
Currently: no popover is displayed, so the badge cannot be dismissed for C treatment group (mentioned it also in https://phabricator.wikimedia.org/T427313#12012838. Click on the gifs:
heart yellow_animation.gif (448×787 px, 1 MB)
heart yellow dark _animation.gif (448×787 px, 1 MB)
Jdlrobson-WMF updated the task description. (Show Details)