fix(metrics): Ensure a screen's name is logged before any of it's events.

Screen names were only logged after their render function completed. If any
events were logged during render, those events would show up in the metrics
before the screen name, possibly causing confusion during manual metrics
analysis.

This updates to log the screen name before the render function is called.

fixes #2856

app/scripts/router.js

@@ -244,6 +244,8 @@ function (
       // rendered for any reason, including if the view was
       // automatically redirected.
       var self = this;
+
+      viewToShow.logScreen();
       return viewToShow.render()
         .then(function (isShown) {
           if (! isShown) {
@@ -255,8 +257,6 @@ function (
           $('#stage').html(viewToShow.el).addClass('fade-in-forward').css('opacity', 1);
           viewToShow.afterVisible();
 
-          viewToShow.logScreen();
-
           // The user may be scrolled part way down the page
           // on screen transition. Force them to the top of the page.
           self.window.scrollTo(0, 0);

app/tests/lib/helpers.js

@@ -88,17 +88,21 @@ define([
     return email.split('@')[0];
   }
 
-  function isEventLogged(metrics, eventName) {
+  function indexOfEvent(metrics, eventName) {
     var events = metrics.getFilteredData().events;
 
     for (var i = 0; i < events.length; ++i) {
       var event = events[i];
       if (event.type === eventName) {
-        return true;
+        return i;
       }
     }
 
-    return false;
+    return -1;
+  }
+
+  function isEventLogged(metrics, eventName) {
+    return indexOfEvent(metrics, eventName) !== -1;
   }
 
   function isErrorLogged(metrics, error) {
@@ -140,6 +144,7 @@ define([
     createRandomHexString: createRandomHexString,
     createEmail: createEmail,
     emailToUser: emailToUser,
+    indexOfEvent: indexOfEvent,
     isEventLogged: isEventLogged,
     isErrorLogged: isErrorLogged,
     isScreenLogged: isScreenLogged,

app/tests/spec/lib/router.js

@@ -193,6 +193,28 @@ function (chai, sinon, Backbone, Router, SignInView, SignUpView, ReadyView,
             });
       });
 
+      it('logs events from the view\'s render function after the view name', function () {
+        sinon.stub(signUpView, 'render', function () {
+          var self = this;
+          return p().then(function () {
+            self.logScreenEvent('an_event_name');
+            return true;
+          });
+        });
+
+        return router.showView(signUpView)
+          .then(function () {
+            var screenNameIndex = TestHelpers.indexOfEvent(metrics, 'screen.signup');
+            var screenEventIndex = TestHelpers.indexOfEvent(metrics, 'signup.an_event_name');
+
+            assert.isNumber(screenNameIndex);
+            assert.notEqual(screenNameIndex, -1);
+            assert.isNumber(screenEventIndex);
+            assert.notEqual(screenEventIndex, -1);
+            assert.isTrue(screenNameIndex < screenEventIndex);
+          });
+      });
+
       it('calls broker.afterLoaded only after initial view', function () {
         sinon.stub(broker, 'afterLoaded', function () {
         });