feat(metrics): emit view, engage and submit events for CWTS

packages/fxa-content-server/app/scripts/templates/choose_what_to_sync.mustache

@@ -47,7 +47,7 @@
         {{/isTrailhead}}
         </div>
       <div class="links">
-        <a href="#" id="back">{{#t}}Back{{/t}}</a>
+        <a href="#" id="back" data-flow-event="back">{{#t}}Back{{/t}}</a>
       </div>
     </form>
   </section>

packages/fxa-content-server/app/scripts/views/choose_what_to_sync.js

@@ -6,6 +6,7 @@ import _ from 'underscore';
 import $ from 'jquery';
 import BackMixin from './mixins/back-mixin';
 import Cocktail from 'cocktail';
+import FlowEventsMixin from './mixins/flow-events-mixin';
 import FormView from './form';
 import SessionVerificationPollMixin from './mixins/session-verification-poll-mixin';
 import Template from 'templates/choose_what_to_sync.mustache';
@@ -154,6 +155,7 @@ const View = FormView.extend({
 Cocktail.mixin(
   View,
   BackMixin,
+  FlowEventsMixin,
   SessionVerificationPollMixin
 );
 

packages/fxa-content-server/app/tests/spec/views/choose_what_to_sync.js

@@ -7,10 +7,11 @@ import Account from 'models/account';
 import { assert } from 'chai';
 import Backbone from 'backbone';
 import Broker from 'models/auth_brokers/base';
+import { CHOOSE_WHAT_TO_SYNC } from '../../../../tests/functional/lib/selectors';
 import Metrics from 'lib/metrics';
 import Notifier from 'lib/channels/notifier';
 import sinon from 'sinon';
-import { CHOOSE_WHAT_TO_SYNC } from '../../../../tests/functional/lib/selectors';
+import SentryMetrics from 'lib/sentry';
 import SessionVerificationPoll from 'models/polls/session-verification';
 import SyncEngines from 'models/sync-engines';
 import TestHelpers from '../../lib/helpers';
@@ -58,7 +59,7 @@ describe('views/choose_what_to_sync', () => {
     email = TestHelpers.createEmail();
     model = new Backbone.Model();
     notifier = new Notifier();
-    metrics = new Metrics({ notifier });
+    metrics = new Metrics({ notifier, sentryMetrics: new SentryMetrics() });
     onSubmitComplete = sinon.spy();
     user = new User({});
 
@@ -107,6 +108,17 @@ describe('views/choose_what_to_sync', () => {
     return view.render();
   }
 
+  it('registers for the expected events', () => {
+    return initView()
+      .then(() => {
+        assert.isFunction(view.events['click a']);
+        assert.isFunction(view.events['click input']);
+        assert.isFunction(view.events['input input']);
+        assert.isFunction(view.events['keyup input']);
+        assert.isFunction(view.events['submit']);
+      });
+  });
+
   describe('renders', () => {
     it('coming from sign up, redirects to /signup when email accound data missing', () => {
       account.clear('email');

packages/fxa-content-server/server/lib/amplitude.js

@@ -34,6 +34,18 @@ const EVENTS = {
     group: GROUPS.login,
     event: 'forgot_submit'
   },
+  'flow.choose-what-to-sync.back': {
+    group: GROUPS.registration,
+    event: 'cwts_back'
+  },
+  'flow.choose-what-to-sync.engage': {
+    group: GROUPS.registration,
+    event: 'cwts_engage'
+  },
+  'flow.choose-what-to-sync.submit': {
+    group: GROUPS.registration,
+    event: 'cwts_submit'
+  },
   'flow.update-firefox.engage': {
     group: GROUPS.notify,
     event: 'update_firefox_engage'
@@ -42,6 +54,10 @@ const EVENTS = {
     group: GROUPS.notify,
     event: 'update_firefox_view'
   },
+  'screen.choose-what-to-sync': {
+    group: GROUPS.registration,
+    event: 'cwts_view'
+  },
   'settings.change-password.success': {
     group: GROUPS.settings,
     event: 'password'

packages/fxa-content-server/tests/server/amplitude.js

@@ -375,6 +375,25 @@ registerSuite('amplitude', {
       assert.equal(logger.info.args[0][1].event_type, 'fxa_reg - password_blocked');
     },
 
+    'flow.choose-what-to-sync.engage': () => {
+      amplitude({
+        time: 'a',
+        type: 'flow.choose-what-to-sync.engage'
+      }, {
+        connection: {},
+        headers: {
+          'x-forwarded-for': '63.245.221.32'
+        }
+      }, {
+        flowBeginTime: 'b',
+        flowId: 'c',
+        uid: 'd'
+      });
+
+      assert.equal(logger.info.callCount, 1);
+      assert.equal(logger.info.args[0][1].event_type, 'fxa_reg - cwts_engage');
+    },
+
     'flow.enter-email.engage': () => {
       amplitude({
         time: 'a',
@@ -615,6 +634,26 @@ registerSuite('amplitude', {
       assert.equal(arg.event_properties.connect_device_os, 'foo');
     },
 
+    'flow.choose-what-to-sync.back': () => {
+      amplitude({
+        time: 'a',
+        type: 'flow.choose-what-to-sync.back'
+      }, {
+        connection: {},
+        headers: {
+          'x-forwarded-for': '63.245.221.32'
+        }
+      }, {
+        flowBeginTime: 'b',
+        flowId: 'c',
+        uid: 'd'
+      });
+
+      assert.equal(logger.info.callCount, 1);
+      const arg = logger.info.args[0][1];
+      assert.equal(arg.event_type, 'fxa_reg - cwts_back');
+    },
+
     'flow.signin.forgot-password': () => {
       amplitude({
         time: 'a',
@@ -653,6 +692,25 @@ registerSuite('amplitude', {
       assert.equal(logger.info.args[0][1].event_type, 'fxa_reg - have_account');
     },
 
+    'flow.choose-what-to-sync.submit': () => {
+      amplitude({
+        time: 'a',
+        type: 'flow.choose-what-to-sync.submit'
+      }, {
+        connection: {},
+        headers: {
+          'x-forwarded-for': '63.245.221.32'
+        }
+      }, {
+        flowBeginTime: 'b',
+        flowId: 'c',
+        uid: 'd'
+      });
+
+      assert.equal(logger.info.callCount, 1);
+      assert.equal(logger.info.args[0][1].event_type, 'fxa_reg - cwts_submit');
+    },
+
     'flow.enter-email.submit': () => {
       amplitude({
         time: 'a',
@@ -787,6 +845,25 @@ registerSuite('amplitude', {
       assert.equal(logger.info.callCount, 0);
     },
 
+    'screen.choose-what-to-sync': () => {
+      amplitude({
+        time: 'a',
+        type: 'screen.choose-what-to-sync'
+      }, {
+        connection: {},
+        headers: {
+          'x-forwarded-for': '63.245.221.32'
+        }
+      }, {
+        flowBeginTime: 'b',
+        flowId: 'c',
+        uid: 'd'
+      });
+
+      assert.equal(logger.info.callCount, 1);
+      assert.equal(logger.info.args[0][1].event_type, 'fxa_reg - cwts_view');
+    },
+
     'screen.enter-email': () => {
       amplitude({
         time: 'a',