Add clickthrough eventlogging to Echo

Change-Id: I3d05d1aeca92f9a0265a522cc5027ae18394c5b4

Echo.php

@@ -530,7 +530,7 @@ $wgDefaultUserOptions['echo-subscriptions-web-article-linked'] = false;
 
 // Echo Configuration for EventLogging
 $wgEchoConfig = array(
-	'version' => '1.3',
+	'version' => '1.4',
 	// default all eventlogging off, overwrite them in site configuration
 	'eventlogging' => array (
 		'Echo' => array (
@@ -545,5 +545,9 @@ $wgEchoConfig = array(
 			'enabled' => false,
 			'revision' => 5488876
 		),
+		'EchoInteraction' => array (
+			'enabled' => false,
+			'revision' => 5539940
+		),
 	)
 );

Hooks.php

@@ -670,7 +670,7 @@ class EchoHooks {
 	 * @return bool true in all cases
 	 */
 	public static function makeGlobalVariablesScript( &$vars, OutputPage $outputPage ) {
-		global $wgEchoHelpPage, $wgEchoMaxNotificationCount;
+		global $wgEchoHelpPage, $wgEchoMaxNotificationCount, $wgEchoConfig;
 		$user = $outputPage->getUser();
 
 		// Provide info for the Overlay
@@ -682,6 +682,7 @@ class EchoHooks {
 				'max-notification-count' => $wgEchoMaxNotificationCount,
 			);
 			$vars['wgEchoHelpPage'] = $wgEchoHelpPage;
+			$vars['wgEchoConfig'] = $wgEchoConfig;
 		}
 
 		return true;

modules/base/ext.echo.base.js

@@ -8,6 +8,60 @@
 
 		'dismissOutputFormats': ['web', 'email'],
 
+		'clickThroughEnabled': mw.config.get( 'wgEchoConfig' ).eventlogging.EchoInteraction.enabled,
+
+		/**
+		 * Set up event logging for individual notification
+		 * @param {JQuery} notification JQuery representing a single notification
+		 * @param {string} context 'flyout'/'archive'
+		 */
+		'setupNotificationLogging': function ( notification, context ) {
+			var eventId = +notification.attr( 'data-notification-event' ),
+				eventType = notification.attr( 'data-notification-type' );
+
+			// Check if Schema:EchoInteraction is enabled
+			if ( !mw.echo.clickThroughEnabled ) {
+				return;
+			}
+			// Log the impression
+			mw.echo.logInteraction( 'notification-impression', context, eventId, eventType );
+			// Set up logging for clickthrough
+			notification.find( 'a' ).click( function() {
+				mw.echo.logInteraction( 'notification-link-click', context, eventId, eventType );
+			} );
+		},
+
+		/**
+		 * Log all Echo interaction related events
+		 * @param {string} clickAction The interaction
+		 * @param {string} context 'flyout'/'archive' or undefined for the badge
+		 * @param {int} eventId Notification event id
+		 * @param {string} eventType notification type
+		 */
+		'logInteraction': function( action, context, eventId, eventType ) {
+			// Check if Schema:EchoInteraction is enabled
+			if ( !mw.echo.clickThroughEnabled ) {
+				return;
+			}
+
+			var myEvt = {
+				action: action
+			};
+
+			// All the three fields below are optional
+			if ( context ) {
+				myEvt.context = context;
+			}
+			if ( eventId ) {
+				myEvt.eventId = eventId;
+			}
+			if ( eventType ) {
+				myEvt.notificationType = eventType;
+			}
+
+			mw.eventLog.logEvent( 'EchoInteraction', myEvt );
+		},
+
 		/**
 		 * Change the user's preferences related to this notification type and
 		 * reload the page.
@@ -59,15 +113,13 @@
 		 * First we have to retrieve the options token.
 		 */
 		'setOptionsToken': function( callback, notification ) {
-			var tokenRequest,
-				_this = this;
-
-			tokenRequest = {
+			var tokenRequest = {
 				'action': 'tokens',
 				'type' : 'options',
 				'format': 'json'
 			};
-			if ( this.optionsToken ) {
+
+			if ( mw.echo.optionsToken ) {
 				callback( notification );
 			} else {
 				$.ajax( {
@@ -79,7 +131,7 @@
 						if ( data.tokens.optionstoken === undefined ) {
 							alert( mw.msg( 'echo-error-token' ) );
 						} else {
-							_this.optionsToken = data.tokens.optionstoken;
+							mw.echo.optionsToken = data.tokens.optionstoken;
 							callback( notification );
 						}
 					},
@@ -114,7 +166,6 @@
 			var $dismissButton,
 				$cancelButton,
 				$closebox,
-				_this = this,
 				$notification = $( notification );
 
 			// Add dismiss box
@@ -122,7 +173,7 @@
 				.addClass( 'mw-echo-close-box' )
 				.css( 'display', 'none' )
 				.click( function() {
-					_this.showDismissOption( this );
+					mw.echo.showDismissOption( this );
 				} );
 			$notification.append( $closebox );
 
@@ -135,7 +186,7 @@
 					icons: { primary: 'ui-icon-closethick' }
 				} )
 				.click( function () {
-					_this.setOptionsToken( _this.dismiss, $notification );
+					mw.echo.setOptionsToken( mw.echo.dismiss, $notification );
 				} );
 			$cancelButton = $( '<a/>' )
 				.text( mw.msg( 'cancel' ) )
@@ -166,4 +217,12 @@
 		}
 
 	};
+
+	if ( mw.echo.clickThroughEnabled ) {
+		mw.eventLog.setDefaults( 'EchoInteraction', {
+			version: mw.config.get( 'wgEchoConfig' ).version,
+			userId: +mw.config.get( 'wgUserId' ),
+			editCount: +mw.config.get( 'wgUserEditCount' )
+		} );
+	}
 } )( jQuery, mediaWiki );

modules/overlay/ext.echo.overlay.js

@@ -60,11 +60,17 @@
 						$li = $( '<li></li>' )
 							.data( 'details', data )
 							.data( 'id', id )
-							.attr( 'data-notification-category', data.category )
+							.attr( {
+								'data-notification-category': data.category,
+								'data-notification-event': data.id,
+								'data-notification-type': data.type
+							} )
 							.addClass( 'mw-echo-notification' )
 							.append( data['*'] )
 							.appendTo( $ul );
 
+					mw.echo.setupNotificationLogging( $li, 'flyout' );
+
 					if ( !data.read ) {
 						$li.addClass( 'mw-echo-unread' );
 						unread.push( id );
@@ -142,6 +148,9 @@
 					.attr( 'title', mw.msg( 'echo-more-info' ) )
 					.attr( 'id', 'mw-echo-overlay-moreinfo-link' )
 					.attr( 'target', '_blank' )
+					.click( function() {
+						mw.echo.logInteraction( 'ui-help-click', 'flyout' );
+					} )
 					.appendTo( $title );
 
 				// Insert the title area into the overlay
@@ -160,6 +169,9 @@
 						.attr( 'id', 'mw-echo-overlay-link' )
 						.attr( 'href', mw.util.wikiGetlink( 'Special:Notifications' ) )
 						.text( mw.msg( 'echo-overlay-link' ) )
+						.click( function() {
+							mw.echo.logInteraction( 'ui-archive-link-click', 'flyout' );
+						} )
 				);
 
 				// add link to notification preferences
@@ -168,6 +180,9 @@
 						.clone()
 						.attr( 'id', 'mw-echo-overlay-pref-link' )
 						.attr( 'href', $prefLink.attr( 'href' ) + '#mw-prefsection-echo' )
+						.click( function() {
+							mw.echo.logInteraction( 'ui-prefs-click', 'flyout' );
+						} )
 				);
 
 				$overlay.append( $overlayFooter );
@@ -204,6 +219,10 @@
 			var $target, $overlay;
 
 			e.preventDefault();
+
+			// log the badge click
+			mw.echo.logInteraction( 'ui-badge-link-click' );
+
 			$target = $( e.target );
 			// If the user clicked on the overlay or any child,
 			//  ignore the click

modules/special/ext.echo.special.js

@@ -31,14 +31,22 @@
 			_this.notcontinue = mw.config.get( 'wgEchoNextContinue' );
 			_this.header = mw.config.get( 'wgEchoDateHeader' );
 
-			// Set up each individual notification with a close box and dismiss
-			// interface if it is dismissable.
+			// Set up each individual notification with eventlogging, a close
+			// box and dismiss interface if it is dismissable.
 			$( '.mw-echo-notification' ).each( function() {
+				mw.echo.setupNotificationLogging( $( this ), 'archive' );
 				if ( $( this ).find( '.mw-echo-dismiss' ).length ) {
 					mw.echo.setUpDismissability( this );
 				}
 			} );
 
+			$( '#mw-echo-moreinfo-link' ).click( function() {
+				mw.echo.logInteraction( 'ui-help-click', 'archive' );
+			} );
+			$( '#mw-echo-pref-link' ).click( function() {
+				mw.echo.logInteraction( 'ui-prefs-click', 'archive' );
+			} );
+
 			// Apply custom header styling for vector and monobook skins
 			if ( skin === 'vector' || skin === 'monobook' ) {
 				$( '#firstHeading' )
@@ -87,7 +95,11 @@
 								.data( 'details', data )
 								.data( 'id', id )
 								.addClass( 'mw-echo-notification' )
-								.attr( 'data-notification-category', data.category )
+								.attr( {
+									'data-notification-category': data.category,
+									'data-notification-event': data.id,
+									'data-notification-type': data.type
+								} )
 								.append( data['*'] )
 								.appendTo( container );
 
@@ -96,6 +108,8 @@
 								unread.push( id );
 							}
 
+							mw.echo.setupNotificationLogging( $li, 'archive' );
+
 							if ( $li.find( '.mw-echo-dismiss' ).length ) {
 								mw.echo.setUpDismissability( $li );
 							}

special/SpecialNotifications.php

@@ -64,7 +64,16 @@ class SpecialNotifications extends SpecialPage {
 				$class .= ' mw-echo-unread';
 				$unread[] = $row['id'];
 			}
-			$notices .= Html::rawElement( 'li', array( 'class' => $class, 'data-notification-category' => $row['category'] ), $row['*'] );
+			$notices .= Html::rawElement(
+				'li',
+				array(
+					'class' => $class,
+					'data-notification-category' => $row['category'],
+					'data-notification-event' => $row['id'],
+					'data-notification-type' => $row['type']
+				),
+				$row['*']
+			);
 		}
 		$html = Html::rawElement( 'ul', array( 'id' => 'mw-echo-special-container' ), $notices );