Not empty banner. <button class="foobutt">Foo</button>

<script lang="javascript">
/**
 * Minimal banner code to report banner history information and associate with a click.
 * Requires that the containing campaign have "Banner history logging" enabled.
 *
 * If sampling the banner history logs, use parameter `?bannerHistoryLogRate=1` for debugging.
 */

$( function () {
  $( '.foobutt' ).click( function () {
    var bannerHistoryLoggingId,
        mixins = mw.centralNotice.getDataProperty( 'mixins' ),
        trackers = [];

    if ( mixins && mixins.bannerHistoryLogger ) {
      // Note that the logging ID is not uniquely-identifying for a given user, it is `mw.user.generateRandomSessionId()` and will change between requests.
      bannerHistoryLoggingId = mw.centralNotice.bannerHistoryLogger.id;
      trackers.push(
        // FIXME: this is really annoying, it can be omitted if you're okay with dropping browsers without beaconSend.
        mw.centralNotice.bannerHistoryLogger.ensureLogSent()
      );
    }

    Promise.all(trackers).then( function () {
      mw.track( 'event.WMDEBannerEvents', {
        bannerAction: 'mobile-mini-banner-expanded',
        // FIXME: logging ID would be passed in its own field, this was a workaround for EventLogging validation.
        bannerName: 'TestBanner, logging ID ' + bannerHistoryLoggingId,
        eventRate: 123
      } );
    } );
  } );
} );
</script>