The WMF are doing something cool with the banners on Vector:
- When a donor closes it a popup shows over the donate button to tell them where they can donate in the future.
- If possible we should track an event when the donor clicks
GIF:
Picture of the new feature:
Banner: https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/B2425_0131_mlWW_dsk_p1_lg_template
The code that shows the popup is:
frb.showDonateLinkTooltip = function ( content ) {
let TIME_TO_SHOW = 5000; // 5 seconds
try {
mw.loader.using( [ 'oojs-ui-core' ] ).done( function () {
let $donateLink = $( '#pt-sitesupport-2 a, #pt-sitesupport a, #n-sitesupport a, #p-donation a, .navigation-drawer .donate-banner a' );
$donateLink.attr( 'href', ( i, oldUrl ) => {
let url = new URL( oldUrl, 'https://donate.wikimedia.org' ); // base needed because some links are protocol relative
url.searchParams.delete( 'utm_source' ); // Until we have updated sidebar links
url.searchParams.set( 'wmf_source', 'tooltipOnBannerClose' );
return url.toString();
});
let popupOptions = {
$content: $( '<p>' + content + '</p>' ),
padded: true,
autoClose: true,
align: 'forwards',
autoFlip: false
};
if ( document.querySelector( '#p-donation a, .navigation-drawer .donate-banner a' ) ) {
// Minerva
popupOptions.$floatableContainer = $( '.navigation-drawer' );
popupOptions.position = 'below';
} else if ( $( '#pt-sitesupport-2 a:visible' ).length > 0 ) {
// Vector 2022 user tools
popupOptions.$floatableContainer = $( '#pt-sitesupport-2 a' );
popupOptions.position = 'below';
} else if ( document.querySelector( '#pt-sitesupport a' ) ) {
// Vector 2022 user tools collapsed in menu
popupOptions.$floatableContainer = $( '#vector-user-links-dropdown' );
popupOptions.position = 'below';
} else if ( document.querySelector( '#vector-main-menu-dropdown #n-sitesupport a') ) {
// Vector 2022 main menu (only when logged in, so mostly here for testing)
popupOptions.$floatableContainer = $( '#vector-main-menu-dropdown' );
popupOptions.position = 'below';
} else if ( document.querySelector( '#n-sitesupport a' ) ) {
// Legacy Vector (sidebar)
popupOptions.$floatableContainer = $( '#n-sitesupport a' );
popupOptions.position = 'after';
} else {
console.log('No donate link element found for tooltip');
return;
}
let popup = new OO.ui.PopupWidget( popupOptions );
popup.$element.css('z-index', 5); // Fix so it shows above header
$( document.body ).append( popup.$element );
popup.toggle( true );
setTimeout( () => {
popup.$element.fadeOut( frb.fadeDuration );
}, TIME_TO_SHOW );
} );
} catch (e) {
console.log('Problem showing banner close tooltip');
}
};