jenkins-bot has submitted this change and it was merged. Change subject: Track more metrics ......................................................................
Track more metrics - About page - Discuss page - Help page - Location page - Uploader page - Download, share and embed tabs in detail (each clickable element) - "Use this file" closed (previous was counted as open event) Change-Id: I1ebcb39049ad9b521968eb2024be9b86a49e5b0c Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/851 --- M MultimediaViewer.php M resources/mmv/logging/mmv.logging.ActionLogger.js M resources/mmv/ui/mmv.ui.canvas.js M resources/mmv/ui/mmv.ui.js M resources/mmv/ui/mmv.ui.metadataPanel.js M resources/mmv/ui/mmv.ui.reuse.dialog.js M resources/mmv/ui/mmv.ui.reuse.download.js M resources/mmv/ui/mmv.ui.reuse.embed.js M resources/mmv/ui/mmv.ui.reuse.share.js 9 files changed, 134 insertions(+), 39 deletions(-) Approvals: MarkTraceur: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index a5de6e6..dc90ef0 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -331,6 +331,7 @@ 'dependencies' => array( 'mmv.base', + 'mmv.logging.ActionLogger', ), ), @@ -657,6 +658,7 @@ 'mmv.routing', 'oojs', 'oojs-ui', + 'mmv.logging.ActionLogger', ), 'messages' => array( @@ -687,6 +689,7 @@ 'oojs-ui', 'mmv.model.EmbedFileInfo', 'mmv.embedFileFormatter', + 'mmv.logging.ActionLogger', ), 'messages' => array( @@ -725,6 +728,7 @@ 'mmv.ui.reuse.tab', 'mmv.ui.reuse.utils', 'mmv.embedFileFormatter', + 'mmv.logging.ActionLogger', ), 'messages' => array( @@ -943,7 +947,7 @@ global $wgResourceModules, $wgEventLoggingSchemas; if ( isset( $wgResourceModules['ext.eventLogging'] ) ) { - $wgEventLoggingSchemas[ 'MediaViewer' ] = 8935662; + $wgEventLoggingSchemas[ 'MediaViewer' ] = 9792855; $wgEventLoggingSchemas[ 'MultimediaViewerNetworkPerformance' ] = 7917896; $wgEventLoggingSchemas[ 'MultimediaViewerDuration' ] = 8572641; $wgEventLoggingSchemas[ 'MultimediaViewerAttribution' ] = 9758179; diff --git a/resources/mmv/logging/mmv.logging.ActionLogger.js b/resources/mmv/logging/mmv.logging.ActionLogger.js index afe4336..c3cb408 100644 --- a/resources/mmv/logging/mmv.logging.ActionLogger.js +++ b/resources/mmv/logging/mmv.logging.ActionLogger.js @@ -81,7 +81,33 @@ 'optout-loggedin': 'opt-out (via quick link at bottom of metadata panel) by logged-in user', 'optout-anon': 'opt-out by anonymous user', 'optin-loggedin': 'opt-in (via quick link at bottom of metadata panel) by logged-in user', - 'optin-anon': 'opt-in by anonymous user' + 'optin-anon': 'opt-in by anonymous user', + 'about-page': 'User opened the about page.', + 'discuss-page': 'User opened the discuss page.', + 'help-page': 'User opened the help page.', + 'location-page': 'User opened the location page.', + 'uploader-page': 'User opened the uploader page.', + 'download-select-menu-original': 'User selected the original size in the download dropdown menu.', + 'download-select-menu-small': 'User selected the small size in the download dropdown menu.', + 'download-select-menu-medium': 'User selected the medium size in the download dropdown menu.', + 'download-select-menu-large': 'User selected the large size in the download dropdown menu.', + 'download': 'User clicked on the button to download a file.', + 'download-view-in-browser': 'User clicked on the link to view the image in the browser in the download tab.', + 'share-page': 'User opened the link to the current image.', + 'share-link-copied': 'User copied the share link.', + 'embed-html-copied': 'User copied the HTML embed code.', + 'embed-wikitext-copied': 'User copied the wikitext embed code.', + 'embed-switched-to-html': 'User switched to the HTML embed code.', + 'embed-switched-to-wikitext': 'User switched to the wikitext embed code.', + 'embed-select-menu-wikitext-default': 'User switched to the default thumbnail size on wikitext.', + 'embed-select-menu-wikitext-small': 'User switched to the small thumbnail size on wikitext.', + 'embed-select-menu-wikitext-medium': 'User switched to the medium thumbnail size on wikitext.', + 'embed-select-menu-wikitext-large': 'User switched to the large thumbnail size on wikitext.', + 'embed-select-menu-html-original': 'User switched to the original thumbnail size on html.', + 'embed-select-menu-html-small': 'User switched to the small thumbnail size on html.', + 'embed-select-menu-html-medium': 'User switched to the medium thumbnail size on html.', + 'embed-select-menu-html-large': 'User switched to the large thumbnail size on html.', + 'use-this-file-close': 'User closed the dialog to use this file.' }; /** diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index cddfa3a..703182f 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/resources/mmv/ui/mmv.ui.canvas.js @@ -160,8 +160,9 @@ delayIn: tooltipDelay } ) .on( 'click.mmv-view-original', function () { - mw.mmv.actionLogger.log( 'view-original-file' ); - $( document ).trigger( 'mmv-viewfile' ); + mw.mmv.actionLogger.log( 'view-original-file' ).always( function() { + $( document ).trigger( 'mmv-viewfile' ); + } ); } ); }; diff --git a/resources/mmv/ui/mmv.ui.js b/resources/mmv/ui/mmv.ui.js index 28077c9..aae3222 100644 --- a/resources/mmv/ui/mmv.ui.js +++ b/resources/mmv/ui/mmv.ui.js @@ -195,6 +195,30 @@ } }; + /** + * Tracks a click on a link and lets the user navigate to it + * @param {string} action The action label to log. + * @param {jQuery.Event} e Click event object + */ + EP.trackLinkClick = function ( action, e ) { + var $link = $( this ); + + if ( e.altKey || e.shiftKey || e.ctrlKey || e.metaKey || e.button === 1 ) { + // They are likely opening the link in a new window or tab + mw.mmv.actionLogger.log( action ); + return; + } + + // If it's a plain click, we need to wait for the logging to + // be done before navigating to the desired page + e.preventDefault(); + + // We want to redirect anyway, whether logging worked or not + mw.mmv.actionLogger.log( action ).always( function () { + window.location.href = $link.prop( 'href' ); + } ); + }; + mw.mmv.ui = {}; mw.mmv.ui.reuse = {}; mw.mmv.ui.Element = Element; diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 3c01f03..7b7f372 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -165,14 +165,16 @@ * Initializes the title and credit elements. */ MPP.initializeTitleAndCredit = function () { + var self = this; + this.$titleAndCredit = $( '<div>' ) .addClass( 'mw-mmv-title-credit' ) // Since these elements are created dynamically, we listen this way for logging purposes - .on( 'click', '.mw-mmv-author a', function () { - mw.mmv.actionLogger.log( 'author-page' ); + .on( 'click', '.mw-mmv-author a', function ( e ) { + self.trackLinkClick.call( this, 'author-page', e ); } ) - .on( 'click', '.mw-mmv-source a', function () { - mw.mmv.actionLogger.log( 'source-page' ); + .on( 'click', '.mw-mmv-source a', function ( e ) { + self.trackLinkClick.call( this, 'source-page', e ); } ) .appendTo( this.$titleDiv ); @@ -240,8 +242,8 @@ .addClass( 'mw-mmv-license empty' ) .prop( 'href', '#' ) .appendTo( this.$titlePara ) - .on( 'click', function() { - mw.mmv.actionLogger.log( 'license-page' ); + .on( 'click', function( e ) { + panel.trackLinkClick.call( this, 'license-page', e ); } ); this.$permissionLink = $( '<span>' ) @@ -324,6 +326,8 @@ * Initializes the link to the uploader's file page. */ MPP.initializeUploader = function () { + var self = this; + this.$usernameLi = $( '<li>' ) .addClass( 'mw-mmv-username-li empty' ) .appendTo( this.$imageLinks ); @@ -331,20 +335,24 @@ this.$username = $( '<a>' ) .addClass( 'mw-mmv-username' ) .prop( 'href', '#' ) - .appendTo( this.$usernameLi ); + .appendTo( this.$usernameLi ) + .click( function( e ) { self.trackLinkClick.call( this, 'uploader-page', e ); } ); }; /** * Initializes the geolocation element. */ MPP.initializeLocation = function () { + var self = this; + this.$locationLi = $( '<li>' ) .addClass( 'mw-mmv-location-li empty' ) .appendTo( this.$imageLinks ); this.$location = $( '<a>' ) .addClass( 'mw-mmv-location' ) - .appendTo( this.$locationLi ); + .appendTo( this.$locationLi ) + .click( function( e ) { self.trackLinkClick.call( this, 'location-page', e ); } ); }; /** @@ -362,6 +370,8 @@ * Initializes the link to the file page on the (maybe remote) repository. */ MPP.initializeRepoLink = function () { + var self = this; + this.$repoLi = $( '<li>' ) .addClass( 'mw-mmv-repo-li empty' ) .appendTo( this.$imageLinks ); @@ -369,24 +379,7 @@ this.$repo = $( '<a>' ) .addClass( 'mw-mmv-repo' ) .prop( 'href', '#' ) - .click( function ( e ) { - var $link = $( this ); - - if ( e.altKey || e.shiftKey || e.ctrlKey || e.metaKey || e.button === 1 ) { - // They are likely opening the link in a new window or tab - mw.mmv.actionLogger.log( 'file-description-page' ); - return; - } - - // If it's a plain click, we need to wait for the logging to - // be done before navigating to the desired page - e.preventDefault(); - - // We want to redirect anyway, whether logging worked or not - mw.mmv.actionLogger.log( 'file-description-page' ).always( function () { - window.location.href = $link.prop( 'href' ); - } ); - } ) + .click( function( e ) { self.trackLinkClick.call( this, 'file-description-page', e ); } ) .appendTo( this.$repoLi ); this.$repoSubtitle = $( '<span>' ) @@ -398,22 +391,26 @@ * Initializes two about links at the bottom of the panel. */ MPP.initializeAboutLinks = function () { - var separator = ' | '; + var separator = ' | ', + self = this; this.$mmvAboutLink = $( '<a>' ) .prop( 'href', mw.config.get( 'wgMultimediaViewer' ).infoLink ) .text( mw.message( 'multimediaviewer-about-mmv' ).text() ) - .addClass( 'mw-mmv-about-link' ); + .addClass( 'mw-mmv-about-link' ) + .click( function( e ) { self.trackLinkClick.call( this, 'about-page', e ); } ); this.$mmvDiscussLink = $( '<a>' ) .prop( 'href', mw.config.get( 'wgMultimediaViewer' ).discussionLink ) .text( mw.message( 'multimediaviewer-discuss-mmv' ).text() ) - .addClass( 'mw-mmv-discuss-link' ); + .addClass( 'mw-mmv-discuss-link' ) + .click( function( e ) { self.trackLinkClick.call( this, 'discuss-page', e ); } ); this.$mmvHelpLink = $( '<a>' ) .prop( 'href', mw.config.get( 'wgMultimediaViewer' ).helpLink ) .text( mw.message( 'multimediaviewer-help-mmv' ).text() ) - .addClass( 'mw-mmv-help-link' ); + .addClass( 'mw-mmv-help-link' ) + .click( function( e ) { self.trackLinkClick.call( this, 'help-page', e ); } ); this.$mmvAboutLinks = $( '<div>' ) .addClass( 'mw-mmv-about-links' ) diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.js b/resources/mmv/ui/mmv.ui.reuse.dialog.js index ada89f4..3e5b6fb 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.js +++ b/resources/mmv/ui/mmv.ui.reuse.dialog.js @@ -123,8 +123,6 @@ var dialog = this, $deferred = $.Deferred(); - mw.mmv.actionLogger.log( 'use-this-file-open' ); - if ( this.tabs === null ) { // initTabs() needs to have these dependencies loaded in order to run mw.loader.using( [ 'mmv.ui.reuse.share', 'mmv.ui.reuse.embed', 'mmv.ui.reuse.download' ], function () { @@ -269,6 +267,8 @@ * Opens a dialog with information about file reuse. */ DP.openDialog = function () { + mw.mmv.actionLogger.log( 'use-this-file-open' ); + this.startListeningToOutsideClick(); this.$reuseDialog.show(); this.fixDownArrowPosition(); @@ -285,6 +285,8 @@ * Closes the reuse dialog. */ DP.closeDialog = function () { + mw.mmv.actionLogger.log( 'use-this-file-close' ); + this.stopListeningToOutsideClick(); this.$reuseDialog.hide(); $( document ).trigger( 'mmv-reuse-closed' ); diff --git a/resources/mmv/ui/mmv.ui.reuse.download.js b/resources/mmv/ui/mmv.ui.reuse.download.js index 704880d..805957b 100644 --- a/resources/mmv/ui/mmv.ui.reuse.download.js +++ b/resources/mmv/ui/mmv.ui.reuse.download.js @@ -68,11 +68,16 @@ * @param {jQuery} $container */ DP.createDownloadButton = function ( $container ) { + var self = this; + // TODO: Use oojs-ui constructive button widget instead this.$downloadButton = $( '<a>' ) .attr( 'target', '_blank' ) .attr( 'download', '' ) - .addClass( 'mw-ui-button mw-ui-constructive mw-mmv-download-button' ); + .addClass( 'mw-ui-button mw-ui-constructive mw-mmv-download-button' ) + .click( function ( e ) { + self.trackLinkClick.call( this, 'download', e ); + } ); this.$selectionArrow = $( '<span>' ) .addClass( 'mw-ui-button mw-mmv-download-select-menu' ) @@ -104,6 +109,10 @@ 'original' ); + this.downloadSizeMenu.onMenuSelect = function( item ) { + mw.mmv.actionLogger.log( 'download-select-menu-' + item.data.name ); + }; + $container.append( this.downloadSizeMenu.$element ); }; @@ -113,11 +122,16 @@ * @param {jQuery} $container */ DP.createPreviewLink = function ( $container ) { + var self = this; + this.$previewLink = $( '<a>' ) .attr( 'target', '_blank' ) .addClass( 'mw-mmv-download-preview-link' ) .text( mw.message( 'multimediaviewer-download-preview-link-title' ).text() ) - .appendTo( $container ); + .appendTo( $container ) + .click( function ( e ) { + self.trackLinkClick.call( this, 'download-view-in-browser', e ); + } ); }; DP.createAttributionButton = function ( $container ) { diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.js b/resources/mmv/ui/mmv.ui.reuse.embed.js index 91ed1ac..00d8707 100644 --- a/resources/mmv/ui/mmv.ui.reuse.embed.js +++ b/resources/mmv/ui/mmv.ui.reuse.embed.js @@ -120,6 +120,10 @@ this.embedTextHtml.$element.find( 'textarea' ) .prop( 'placeholder', mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() ); + this.embedTextHtml.$input.on( 'copy', function() { + mw.mmv.actionLogger.log( 'embed-html-copied' ); + } ); + this.embedTextWikitext = new oo.ui.TextInputWidget( { classes: wikitextClasses, multiline: true, @@ -128,6 +132,10 @@ this.embedTextWikitext.$element.find( 'textarea' ) .prop( 'placeholder', mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() ); + + this.embedTextWikitext.$input.on( 'copy', function() { + mw.mmv.actionLogger.log( 'embed-wikitext-copied' ); + } ); $( '<p>' ) .append( @@ -188,6 +196,10 @@ 'default' ); + this.embedSizeSwitchWikitext.onMenuSelect = function( item ) { + mw.mmv.actionLogger.log( 'embed-select-menu-wikitext-' + item.data.name ); + }; + // Html sizes pulldown menu this.embedSizeSwitchHtml = this.utils.createPulldownMenu( [ 'small', 'medium', 'large', 'original' ], @@ -195,6 +207,9 @@ 'original' ); + this.embedSizeSwitchHtml.onMenuSelect = function( item ) { + mw.mmv.actionLogger.log( 'embed-select-menu-html-' + item.data.name ); + }; $( '<p>' ) .append( @@ -263,6 +278,8 @@ EP.handleTypeSwitch = function ( item ) { var value = item.getData(); + mw.mmv.actionLogger.log( 'embed-switched-to-' + value ); + if ( value === 'html' ) { this.$currentMainEmbedText = this.embedTextHtml.$element; this.embedSizeSwitchWikitext.getMenu().toggle( false ); diff --git a/resources/mmv/ui/mmv.ui.reuse.share.js b/resources/mmv/ui/mmv.ui.reuse.share.js index a2c4746..b0ffcdb 100644 --- a/resources/mmv/ui/mmv.ui.reuse.share.js +++ b/resources/mmv/ui/mmv.ui.reuse.share.js @@ -39,6 +39,8 @@ SP = Share.prototype; SP.init = function () { + var self = this; + this.$pane.addClass( 'mw-mmv-share-pane' ) .appendTo( this.$container ); @@ -50,12 +52,20 @@ this.pageInput.$element.find( 'input' ) .prop( 'placeholder', mw.message( 'multimediaviewer-reuse-loading-placeholder' ).text() ); + this.pageInput.$input.on( 'copy', function() { + mw.mmv.actionLogger.log( 'share-link-copied' ); + } ); + + this.$pageLink = $( '<a>' ) .addClass( 'mw-mmv-share-page-link' ) .prop( 'alt', mw.message( 'multimediaviewer-link-to-page' ).text() ) .prop( 'target', '_blank' ) .html( ' ' ) - .appendTo( this.$pane ); + .appendTo( this.$pane ) + .click( function ( e ) { + self.trackLinkClick.call( this, 'share-page', e ); + } ); this.pageInput.$element.appendTo( this.$pane ); -- To view, visit https://gerrit.wikimedia.org/r/158614 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I1ebcb39049ad9b521968eb2024be9b86a49e5b0c Gerrit-PatchSet: 7 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: MarkTraceur <mtrac...@member.fsf.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
