[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_(e.clientX, e.clientY);
       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') {
+        var rect = this.getBoundingClientRect();
+        this.recordAppClickIndex_(rect.left + rect.width/2,

[Evan Stade, 2012/01/21 00:44:23]

spaces around operators

[Dan Beam, 2012/01/21 01:49:50]

Done.

+                                  rect.top + rect.height/2);
         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
+     * using keyboard nav).
+     * @param {number} x The client X at which the app was clicked.

[Evan Stade, 2012/01/21 00:44:23]

you don't specify what units x is in, but it looks like pixels. Why are you
tracking pixels?

[Dan Beam, 2012/01/21 01:49:24]

Done.
So we're able to track where people click more accurately than just which tile. 
The goal is to understand how position affects the NTP's CTR, so it didn't seem
to hurt (nor add much code complexity, as we'd still have to do these tricks
with app indices to get % x/y measurements).

+     * @param {number} y The client Y at which the app was clicked.
+     * @private
+     */
+    recordAppClickIndex_: function(x, y) {
+      var tilePage = this.tile.tilePage;
+      var gridRect = tilePage.tileGrid.getBoundingClientRect();
+
+      var maxWidth = gridRect.width;
+      if (tilePage.tileCount < tilePage.layoutValues.numRowTiles) {
+          var lastTile = tilePage.tiles[tilePage.tiles.length - 1];
+          maxWidth =
+              lastTile.firstChild.getBoundingClientRect().right - gridRect.left;
+      }
+
+      var lastApp = tilePage.tiles[tilePage.tiles.length - 1].firstChild;
+      var maxHeight = lastApp.getBoundingClientRect().bottom - gridRect.top;
+
+      chrome.send('metricsHandler:recordInHistogram',
+          ['NewTabPage.AppClick_X', (x - gridRect.left) / maxWidth * 100, 100]);
+      chrome.send('metricsHandler:recordInHistogram',
+          ['NewTabPage.AppClick_Y', (y - gridRect.top) / maxHeight * 100, 100]);
+    },
+
+    /**
      * 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 382 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;