Track share button usage

Use MobileWebShareButton schema to track interactions with

Additional changes: Fix how button is injected into page actions
bar as last AMC changes broke it.

Bug: T207280
Change-Id: Ie7d7ab6bc66df5ab30aaec77e2ee8583c69b8f48

resources/skins.minerva.options/share.js

@@ -1,5 +1,6 @@
 ( function ( M, config ) {
 	var shareIcon = M.require( 'skins.minerva.share/shareIcon' ),
+		trackShare = M.require( 'skins.minerva.share/track' ),
 		features = config.get( 'wgMinervaFeatures', {} );
 
 	/**
@@ -17,7 +18,11 @@
 		// DOM is reversed in the display. The watchstar is last in the DOM and
 		// left-most in the display. Since we want the download button to be to
 		// the left of the watchstar, we put it after it in the DOM.
-		shareIcon( navigator ).$el.insertAfter( '#ca-watch' );
+		$( '<li>' ).addClass( 'page-actions-menu__list-item' )
+			.append( shareIcon( navigator ).$el )
+			// eslint-disable-next-line jquery/no-global-selector
+			.insertAfter( $( '#ca-watch' ).parent() );
+		trackShare( 'shownShareButton' );
 	}
 
 }( mw.mobileFrontend, mw.config ) );

resources/skins.minerva.options/shareIcon.js

@@ -1,5 +1,6 @@
 ( function ( M, msg, config ) {
-	var Icon = M.require( 'mobile.startup' ).Icon;
+	var Icon = M.require( 'mobile.startup' ).Icon,
+		trackShare = M.require( 'skins.minerva.share/track' );
 
 	/**
 	 * Generate a mouse event that when run
@@ -12,10 +13,13 @@
 			var url = new URL( window.location.href );
 			url.searchParams.append( 'wprov', 'mfsw1' );
 			url.searchParams.delete( 'debug' );
+			trackShare( 'clickShareButton' );
 			navigator.share( {
 				title: config.get( 'wgTitle' ),
 				text: config.get( 'wgTitle' ),
 				url: url.toString()
+			} ).then( function () {
+				trackShare( 'SharedToApp' );
 			} );
 		};
 	}
@@ -28,7 +32,7 @@
 	 */
 	function shareIcon( navigator ) {
 		return new Icon( {
-			tagName: 'li',
+			tagName: 'button',
 			glyphPrefix: 'minerva',
 			title: msg( 'skin-minerva-share' ),
 			name: 'share',

resources/skins.minerva.options/trackShare.js

@@ -0,0 +1,18 @@
+( function ( M, track, user, config ) {
+	/**
+	 * Helper function to track share button usage
+	 *
+	 * @param {string} action - one of "shownShareButton", "clickShareButton", "SharedToApp"
+	 */
+	function trackShare( action ) {
+		track( 'event.MobileWebShareButton', {
+			pageTitle: config.get( 'wgTitle' ),
+			namespaceId: config.get( 'wgNamespaceNumber' ),
+			isAnon: user.isAnon(),
+			action: action,
+			pageToken: user.getPageviewToken()
+		} );
+	}
+
+	M.define( 'skins.minerva.share/track', trackShare );
+}( mw.mobileFrontend, mw.track, mw.user, mw.config ) );

skin.json

@@ -164,7 +164,8 @@
 		}
 	},
 	"EventLoggingSchemas": {
-		"WebClientError": 18340282
+		"WebClientError": 18340282,
+		"MobileWebShareButton": 18923688
 	},
 	"ResourceModules": {
 		"skins.minerva.base.styles": {
@@ -501,6 +502,7 @@
 				"resources/skins.minerva.options/BackToTopOverlay.js",
 				"resources/skins.minerva.options/backtotop.js",
 				"resources/skins.minerva.options/categories.js",
+				"resources/skins.minerva.options/trackShare.js",
 				"resources/skins.minerva.options/shareIcon.js",
 				"resources/skins.minerva.options/share.js"
 			]