[NTP4] Track the position of each app that's launched.

chrome/browser/resources/ntp4/apps_page.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 457 matching lines @@
      */
     onClick_: function(e) {
       var is_promo = this.appsPromoExtras_ &&
           window.getComputedStyle(this.appsPromoExtras_).display != 'none';
       var url = !this.appData_.is_webstore ? '' :
           is_promo ? this.appsPromoLink_.href :
                      appendParam(this.appData_.url,
                                  'utm_source',
                                  'chrome-ntp-icon');
 
+      this.recordAppClickIndex_(this.tile.index);
       chrome.send('launchApp',
                   [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, url,
                    e.button, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey]);
 
       // Don't allow the click to trigger a link or anything
       e.preventDefault();
     },
 
     /**
      * Invoked when the user presses a key while the app is focused.
      * @param {Event} e The key event.
      * @private
      */
     onKeydown_: function(e) {
       if (e.keyIdentifier == 'Enter') {
+        this.recordAppClickIndex_(this.tile.index);
         chrome.send('launchApp',
                     [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, '',
                      0, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey]);
         e.preventDefault();
         e.stopPropagation();
       }
     },
 
     /**
+     * Record app position "clicked" (or when a user presses Enter on an app

[kmadhusu, 2012/01/19 18:29:03]

nit: "Enter"

[Dan Beam, 2012/01/19 19:47:24]

Why double quotes (from style guide: Use single quotes instead of double quotes
for all strings.,
http://www.chromium.org/developers/web-development-style-guide) and why quotes
at all?

[kmadhusu, 2012/01/19 20:27:21]

I thought it would be a good idea to emphasis on "Enter" key. That's why I
suggested quotes. Single or double quotes (whatever matches our coding style
guidelines).

[Dan Beam, 2012/01/19 22:29:21]

Done. (was just wondering why, :)

+     * using keyboard nav).
+     * @param {number} index The clicked index to record.

[kmadhusu, 2012/01/19 18:29:03]

nit: @private

[Dan Beam, 2012/01/19 19:47:24]

Done.

+     */
+    recordAppClickIndex_: function(index) {
+      chrome.send('metricsHandler:recordInHistogram',
+                  ['NewTabPage.AppClickIndex', index + 1, 100]);

[Dan Beam, 2012/01/19 08:18:14]

^ I just put 100 as a semi-arbitrary number, though in reality I'll bet nobody
(but possibly QA) has more than 100 apps on a page.

[kmadhusu, 2012/01/19 18:29:03]

Add this comment in the code for future references.

[kmadhusu, 2012/01/19 18:29:03]

Can you declare a constant for this magic number?

[kmadhusu, 2012/01/19 18:29:03]

Why do you want to record the app clicked position? (We just want to track all
the clicks right, can you just do the following:

chrome.send('NewTabPageAppClickedRecordInHistogram');

and in C++
 just do:

++current_app_click_count_;
UMA_HISTOGRAM_COUNTS("NewTabPage.AppClicked",                     
current_app_click_count_);

)

[Dan Beam, 2012/01/19 19:47:24]

Done.

[Dan Beam, 2012/01/19 19:47:24]

Done.

[Dan Beam, 2012/01/19 19:47:24]

From the bug:
Ideally segmented by position (similar to the NewTabPage.MostVisited histogram).
(http://crbug.com/106575)

Later in the bug:
Re 4, I'd like to understand the effect of icon position on CTR.  Is there a way
to add clicks by index position just as there is for "Most Visited"
(http://crbug.com/106575#c7)

+    },
+
+    /**
      * Adds a node to the list of targets that will launch the app. This list
      * is also used in onMousedown to determine whether the app contents should
      * be shown as active (if we don't do this, then clicking anywhere in
      * appContents, even a part that is outside the ideally clickable region,
      * will cause the app icon to look active).
      * @param {HTMLElement} node The node that should be clickable.
      */
     addLaunchClickTarget_: function(node) {
       node.classList.add('launch-click-target');
       node.addEventListener('click', this.onClick_.bind(this));
@@ skipping 366 matching lines @@
     appNotificationChanged: appNotificationChanged,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var appNotificationChanged = ntp4.appNotificationChanged;
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;