Background
This is a follow-up task to T361047. In that task, a dialog informing users of the new dark-mode feature was created. There was some discussion about how to present that dialog according to the following requirements:
- Promotional notification shown as soon as possible to logged and logged out readers who enrol in night mode "automatically"
- Promotional notification shown on second page load in a session to logged in and logged out readers who have day mode devices
- Notification only appears once, and is not shown again after it has been dismissed, regardless of the logged in or out status of the reader.
It was determined that this behaviour could be achieved by running the promotional notification as a CentralNotice banner and campaign, using the "impression diet" feature. This task concerns creating and testing that centralNotice campaign.
User story
- As a reader with a device in dark mode, I want to know that night mode has been launched, so that I can change my dark mode settings if I wish.
- As a reader whose device is not in dark mode, I want to hear about night mode launching so that I can try it out if I want.
- As a Wikipedian, if I see this notice more than once, I will not be pleased.
Requirements
Create a centralNotice campaign that can show a banner like the following:
https://meta.wikimedia.org/wiki/Main_Page?banner=sgrabarczuk_test
The banner should be shown:
- On the users first pageview if they are in dark-mode
- On the users second pageview if they are in light-mode
- After the banner has been shown once, it should never be shown again.
Both the campaign configuration and the banner code should work together to achieve these goals.
Campaign configuration using "impression diet" feature
https://meta.wikimedia.org/w/index.php?title=Special:CentralNotice&subaction=noticeDetail¬ice=sgrabarczuk_test
Banner code (referencing "impression diet" key)
https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/sgrabarczuk_test
<script> const CNContext = mw.centralNotice.kvStore.contexts.GLOBAL; const CNBannerKey = 'impression_diet_minerva-dark-mode-banner'; const impressions = mw.centralNotice.kvStore.getItem( CNBannerKey, CNContext ) || {}; const matchMediaDark = window.matchMedia( '(prefers-color-scheme: dark)' ); const clientPrefDark = document.documentElement.classList.contains( 'skin-theme-clientpref-night' ); const clientPrefAuto = document.documentElement.classList.contains( 'skin-theme-clientpref-auto' ); const isPageInDarkMode = ( clientPrefDark || ( clientPrefAuto && matchMediaDark ) ); // Show banner for testing purposes when there's a query param of "banner" if ( window.location.search.match( 'banner' ) !== null ) { mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', function( require ) { require( 'skins.minerva.DarkModeLaunchBanner')(); } ); } // Show banner on first impression in dark-mode, or on second impression in light mode if ( ( isPageInDarkMode && impressions.seenCount === 1 ) || ( !isPageInDarkMode && impressions.seenCount === 2 ) ) { mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', function( require ) { require( 'skins.minerva.DarkModeLaunchBanner')(); } ); } </script>
Banner configuration
Dates: July 1 - July 15
Copy: Dark mode for reading is now available! Please go to menu > settings to turn it on.
BDD
Feature: Minerva Night Mode Launch Notification
Scenario: Display CentralNotice campaign for Night Mode launch
Given a user is visiting a Wikimedia project When the CentralNotice campaign is active Then the user should see a notification about the Minerva Night Mode launch
Test Steps
Test Case 1: Verify Notification Display
- Activate the CentralNotice campaign for Minerva Night Mode.
- Visit a Wikimedia project.
- ✅❓❌⬜ AC1: Confirm the notification about the Minerva Night Mode launch is displayed.
Design
Minerva notification on the left, Vector on the right
Minerva Copy:
Wikipedia’s new colors
Try dark mode today
Wikipedia is now available in dark mode. Try it out by tapping on “Settings” in the main menu.
Go to Settings
Vector copy:
Wikipedia’s new colors
Try dark mode today
Wikipedia is now available in dark mode. Try it out by clicking “Dark” in the “Color” section of the Appearance menu on the right.
Acceptance criteria
- The banner code has been reviewed.
- A CentralNotice campaign that can display the promotional notification per the requirements has been created.
- The campaign has been tested and confirmed that it only shows the banner once.
- We've determined the parameters of this campaign
- how long do we want this campaign to be active
- Who is the audience for this campaign (all users?)
- When do we want to launch this campaign (when we launch dark-mode generally? during beta phase,
when we switch the default to automatic?)
Communication criteria - does this need an announcement or discussion?
- A modal dialog can be disruptive to users, so some on-wiki discussion notifying users of this banner might be required.
Rollback plan
- The campaign can be disabled instantly.
This task was created by Version 1.0.0 of the Web team task template using phabulous
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T366296#9988564 |
