Merge pull request #6294 from edx/renzo/split-verification-analytics

Split payment/verification business intelligence analytics

lms/static/js/verify_student/models/verification_model.js

@@ -22,16 +22,21 @@
         },
 
         sync: function( method, model ) {
-            var headers = { 'X-CSRFToken': $.cookie('csrftoken') },
+            var headers = { 'X-CSRFToken': $.cookie( 'csrftoken' ) },
                 data = {
-                    face_image: model.get('faceImage'),
-                    photo_id_image: model.get('identificationImage')
+                    face_image: model.get( 'faceImage' ),
+                    photo_id_image: model.get( 'identificationImage' )
                 };
 
             // Full name is an optional parameter; if not provided,
             // it won't be changed.
-            if ( !_.isNull( model.get('fullName') ) ) {
-                data.full_name = model.get('fullName');
+            if ( !_.isEmpty( model.get( 'fullName' ) ) ) {
+                data.full_name = model.get( 'fullName' );
+
+                // Track the user's decision to change the name on their account
+                window.analytics.track( 'edx.bi.user.full_name.changed', {
+                    category: 'verification'
+                });
             }
 
             // Submit the request to the server,

lms/static/js/verify_student/views/face_photo_step_view.js

@@ -11,15 +11,22 @@ var edx = edx || {};
     edx.verify_student.FacePhotoStepView = edx.verify_student.StepView.extend({
 
         postRender: function() {
-            new edx.verify_student.WebcamPhotoView({
-                el: $("#facecam"),
+            var webcam = new edx.verify_student.WebcamPhotoView({
+                el: $( '#facecam' ),
                 model: this.model,
                 modelAttribute: 'faceImage',
                 submitButton: '#next_step_button',
                 errorModel: this.errorModel
             }).render();
 
-            $('#next_step_button').on( 'click', _.bind( this.nextStep, this ) );
+            this.listenTo( webcam, 'imageCaptured', function() {
+                // Track the user's successful image capture
+                window.analytics.track( 'edx.bi.user.face_image.captured', {
+                    category: 'verification'
+                });
+            });
+
+            $( '#next_step_button' ).on( 'click', _.bind( this.nextStep, this ) );
         },
     });
 

lms/static/js/verify_student/views/id_photo_step_view.js

@@ -11,16 +11,23 @@ var edx = edx || {};
     edx.verify_student.IDPhotoStepView = edx.verify_student.StepView.extend({
 
         postRender: function() {
-            new edx.verify_student.WebcamPhotoView({
-                el: $("#idcam"),
+            var webcam = new edx.verify_student.WebcamPhotoView({
+                el: $( '#idcam' ),
                 model: this.model,
                 modelAttribute: 'identificationImage',
                 submitButton: '#next_step_button',
                 errorModel: this.errorModel
             }).render();
 
-            $('#next_step_button').on( 'click', _.bind( this.nextStep, this ) );
-        },
+            this.listenTo( webcam, 'imageCaptured', function() {
+                // Track the user's successful image capture
+                window.analytics.track( 'edx.bi.user.identification_image.captured', {
+                    category: 'verification'
+                });
+            });
+
+            $( '#next_step_button' ).on( 'click', _.bind( this.nextStep, this ) );
+        }
     });
 
 })( jQuery );

lms/static/js/verify_student/views/make_payment_step_view.js

@@ -75,6 +75,11 @@ var edx = edx || {};
                 }).appendTo(form);
             });
 
+            // Marketing needs a way to tell the difference between users
+            // leaving for the payment processor and users dropping off on
+            // this page. A virtual pageview can be used to do this.
+            window.analytics.page( 'verification', 'payment_processor_step' );
+
             form.submit();
         },
 

lms/static/js/verify_student/views/payment_confirmation_step_view.js

@@ -9,7 +9,6 @@ var edx = edx || {};
     edx.verify_student = edx.verify_student || {};
 
     edx.verify_student.PaymentConfirmationStepView = edx.verify_student.StepView.extend({
-
         /**
          * Retrieve receipt information from the shopping cart.
          *
@@ -68,9 +67,24 @@ var edx = edx || {};
          * The "Verify Now" button reloads this page with the "skip-first-step"
          * flag set.  This allows the user to navigate back to the confirmation
          * if he/she wants to.
-         * For this reason, we don't need any custom click handlers here.
+         * For this reason, we don't need any custom click handlers here, except for
+         * those used to track business intelligence events.
          */
-        postRender: function() {},
+        postRender: function() {
+            // Track the user's decision to verify immediately
+            $( '#verify_now_button' ).on( 'click', function() {
+                window.analytics.track( 'edx.bi.user.verification.immediate', {
+                    category: 'verification'
+                });
+            });
+
+            // Track the user's decision to defer their verification
+            $( '#verify_later_button' ).on( 'click', function() {
+                window.analytics.track( 'edx.bi.user.verification.deferred', {
+                    category: 'verification'
+                });
+            });
+        },
 
         /**
          * Retrieve receipt data from the shoppingcart.

lms/static/js/verify_student/views/review_photos_step_view.js

@@ -14,8 +14,8 @@ var edx = edx || {};
             var model = this.model;
 
             // Load the photos from the previous steps
-            $( "#face_image")[0].src = this.model.get('faceImage');
-            $( "#photo_id_image")[0].src = this.model.get('identificationImage');
+            $( '#face_image' )[0].src = this.model.get('faceImage');
+            $( '#photo_id_image' )[0].src = this.model.get('identificationImage');
 
             // Prep the name change dropdown
             $( '.expandable-area' ).slideUp();
@@ -37,12 +37,17 @@ var edx = edx || {};
         },
 
         retakePhotos: function() {
+            // Track the user's intent to retake their photos
+            window.analytics.track( 'edx.bi.user.verification_images.retaken', {
+                category: 'verification'
+            });
+
             this.goToStep( 'face-photo-step' );
         },
 
         submitPhotos: function() {
             // Disable the submit button to prevent duplicate submissions
-            $( "#next_step_button" ).addClass( "is-disabled" );
+            $( '#next_step_button' ).addClass( 'is-disabled' );
 
             // On success, move on to the next step
             this.listenToOnce( this.model, 'sync', _.bind( this.nextStep, this ) );
@@ -57,8 +62,8 @@ var edx = edx || {};
 
         handleSubmissionError: function( xhr ) {
             // Re-enable the submit button to allow the user to retry
-            var isConfirmChecked = $( "#confirm_pics_good" ).prop('checked');
-            $( "#next_step_button" ).toggleClass( "is-disabled", !isConfirmChecked );
+            var isConfirmChecked = $( '#confirm_pics_good' ).prop( 'checked' );
+            $( '#next_step_button' ).toggleClass( 'is-disabled', !isConfirmChecked );
 
             // Display the error
             if ( xhr.status === 400 ) {
@@ -77,14 +82,14 @@ var edx = edx || {};
             }
         },
 
-        expandCallback: function(event) {
+        expandCallback: function( event ) {
             event.preventDefault();
 
             $(this).next('.expandable-area' ).slideToggle();
 
             var title = $( this ).parent();
             title.toggleClass( 'is-expanded' );
-            title.attr( 'aria-expanded', !title.attr('aria-expanded') );
+            title.attr( 'aria-expanded', !title.attr( 'aria-expanded' ) );
         }
     });
 

lms/static/js/verify_student/views/step_view.js

@@ -47,6 +47,9 @@
                     this.postRender();
                 }
             ).fail( _.bind( this.handleError, this ) );
+
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
         },
 
         handleResponse: function( data ) {

lms/static/js/verify_student/views/webcam_photo_view.js

@@ -262,6 +262,10 @@
             var success = this.backend.snapshot();
 
             if ( success ) {
+                // Trigger an event which parent views can use to fire a
+                // business intelligence event
+                this.trigger( 'imageCaptured' );
+
                 // Hide the capture button, and show the reset button
                 $( "#webcam_capture_button", this.el ).hide();
                 $( "#webcam_reset_button", this.el ).show();

lms/templates/verify_student/review_photos_step.underscore

@@ -78,7 +78,7 @@
 
               <div class="copy expandable-area">
                 <p><%- gettext( "You should change the name on your account to match." ) %></p>
-                <input type="text" name="new-name" id="new-name" placeholder=<%- fullName %>>
+                <input type="text" name="new-name" id="new-name" placeholder=<%= fullName %>>
               </div>
             </div>
           </div>

lms/templates/widgets/segment-io.html

@@ -19,7 +19,8 @@
 <script type="text/javascript">
   var analytics = {
     track: function() { return; },
-    pageview: function() { return; }
+    pageview: function() { return; },
+    page: function() { return; }
   };
 </script>
 <!-- end dummy segment.io -->