From 3d717a895a7bb21a07513107cb9860490ed32f51 Mon Sep 17 00:00:00 2001
From: Renzo Lucioni <renzo@renzolucioni.com>
Date: Thu, 18 Dec 2014 18:23:53 -0500
Subject: [PATCH 1/2] Track upsell copy interaction, upgrade button and verify
 now button clicks on the dashboard

---
 lms/static/js/dashboard/legacy.js             | 51 +++++++++++++++----
 .../dashboard/_dashboard_course_listing.html  |  8 +--
 lms/templates/widgets/segment-io.html         |  1 +
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/lms/static/js/dashboard/legacy.js b/lms/static/js/dashboard/legacy.js
index 55c9a445dd..fb7b6c5565 100644
--- a/lms/static/js/dashboard/legacy.js
+++ b/lms/static/js/dashboard/legacy.js
@@ -31,23 +31,51 @@
      */
     edx.dashboard.legacy.init = function(urls) {
 
-        // On initialization, set focus to the first notification available
-        // for screen readers.
-        var notifications = $('.dashboard-notifications');
-        if (notifications.children().length > 0) {
+        var notifications = $('.dashboard-notifications'),
+            upgradeButtonLinks = $('.action-upgrade'),
+            verifyButtonLinks = $('.verification-cta > .cta');
+
+        // On initialization, set focus to the first notification available for screen readers.
+        if ( notifications.children().length > 0 ) {
             notifications.focus();
         }
 
         $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
 
-        function toggleExpandMessage(e) {
-            (e).preventDefault();
+        // Track clicks of the upgrade button. The `trackLink` method is a helper that makes
+        // a `track` call whenever a bound link is clicked. Usually the page would change before
+        // `track` had time to execute; `trackLink` inserts a small timeout to give the `track`
+        // call enough time to fire. The clicked link element is passed to `generateProperties`.
+        window.analytics.trackLink(upgradeButtonLinks, 'edx.bi.dashboard.upgrade_button.clicked', generateProperties);
+
+        // Track clicks of the "verify now" button.
+        window.analytics.trackLink(verifyButtonLinks, 'edx.bi.user.verification.resumed', generateProperties);
+
+        // Generate the properties object to be passed along with business intelligence events.
+        function generateProperties(element) {
+            var $el = $(element),
+                properties = {};
+
+            if ( $el.hasClass('action-upgrade') ) {
+                properties.category = 'upgrade';
+            } else if ( $el.hasClass('cta') ) {
+                properties.category = 'verification';
+            }
+
+            properties.label = $el.data('course-id');
+
+            return properties;
+        }
+
+        function toggleExpandMessage(event) {
+            var course = $(event.target).closest('.message-upsell').find('.action-upgrade').data('course-id');
+
+            event.preventDefault();
 
             $(this).closest('.message.is-expandable').toggleClass('is-expanded');
 
-            var course = $("#upgrade-to-verified").data("course-id");
-            analytics.track('edx.bi.dashboard.upsell_copy.clicked', {
-                category: 'user-engagement',
+            window.analytics.track('edx.bi.dashboard.upgrade_copy.expanded', {
+                category: 'upgrade',
                 label: course
             });
         }
@@ -61,8 +89,9 @@
         });
 
         $("#upgrade-to-verified").click(function(event) {
-            var user = $(event.target).data("user");
-            var course = $(event.target).data("course-id");
+            var user = $(event.target).closest(".action-upgrade").data("user"),
+                course = $(event.target).closest(".action-upgrade").data("course-id");
+
             Logger.log('edx.course.enrollment.upgrade.clicked', [user, course], null);
         });
 
diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html
index c8b801379f..026d4c0e95 100644
--- a/lms/templates/dashboard/_dashboard_course_listing.html
+++ b/lms/templates/dashboard/_dashboard_course_listing.html
@@ -141,7 +141,7 @@
               % endif
             </div>
             <div class="verification-cta">
-              <a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta">${_('Verify Now')}</a>
+              <a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta" data-course-id="${course.id | h}">${_('Verify Now')}</a>
             </div>
           % elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
             <h4 class="message-title">${_('You have already verified your ID!')}</h4>
@@ -173,13 +173,13 @@
               <ul class="actions message-actions">
                 <li class="action-item">
                   % if settings.FEATURES.get('SEPARATE_VERIFICATION_FROM_PAYMENT'):
-                  <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course.id)})}">
+                  <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course.id)})}" data-course-id="${course.id | h}" data-user="${user.username | h}">
                   % else:
-                  <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': unicode(course.id)})}?upgrade=True">
+                  <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': unicode(course.id)})}?upgrade=True" data-course-id="${course.id | h}" data-user="${user.username | h}">
                   % endif
                     <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge">
                     <span class="wrapper-copy">
-                      <span class="copy" id="upgrade-to-verified" data-course-id="${course.id | h}" data-user="${user.username | h}">${_("Upgrade to Verified Track")}</span>
+                      <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified Track")}</span>
                     </span>
                   </a>
                 </li>
diff --git a/lms/templates/widgets/segment-io.html b/lms/templates/widgets/segment-io.html
index 6c6c791a90..844dba3e98 100644
--- a/lms/templates/widgets/segment-io.html
+++ b/lms/templates/widgets/segment-io.html
@@ -19,6 +19,7 @@
 <script type="text/javascript">
   var analytics = {
     track: function() { return; },
+    trackLink: function() { return; },
     pageview: function() { return; },
     page: function() { return; }
   };

From aeeb45cf573b5d252af9e73a5b50b59b38f4b9b1 Mon Sep 17 00:00:00 2001
From: Renzo Lucioni <renzo@renzolucioni.com>
Date: Fri, 19 Dec 2014 11:58:48 -0500
Subject: [PATCH 2/2] Update virtual pageview event categories, general polish

---
 .../views/enrollment_confirmation_step_view.js |  7 ++++++-
 .../views/face_photo_step_view.js              |  3 +++
 .../verify_student/views/id_photo_step_view.js |  3 +++
 .../js/verify_student/views/intro_step_view.js |  3 +++
 .../views/make_payment_step_view.js            |  5 ++++-
 .../views/payment_confirmation_step_view.js    | 18 ++++++++++--------
 .../views/review_photos_step_view.js           |  5 ++++-
 .../js/verify_student/views/step_view.js       |  3 ---
 8 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/lms/static/js/verify_student/views/enrollment_confirmation_step_view.js b/lms/static/js/verify_student/views/enrollment_confirmation_step_view.js
index e865e30fca..20491c7b91 100644
--- a/lms/static/js/verify_student/views/enrollment_confirmation_step_view.js
+++ b/lms/static/js/verify_student/views/enrollment_confirmation_step_view.js
@@ -11,6 +11,11 @@ var edx = edx || {};
 
     // Currently, this step does not need to install any event handlers,
     // since the displayed information is static.
-    edx.verify_student.EnrollmentConfirmationStepView = edx.verify_student.StepView.extend({});
+    edx.verify_student.EnrollmentConfirmationStepView = edx.verify_student.StepView.extend({
+        postRender: function() {
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
+        }
+    });
 
 })( jQuery );
diff --git a/lms/static/js/verify_student/views/face_photo_step_view.js b/lms/static/js/verify_student/views/face_photo_step_view.js
index 17822b688a..8008565a13 100644
--- a/lms/static/js/verify_student/views/face_photo_step_view.js
+++ b/lms/static/js/verify_student/views/face_photo_step_view.js
@@ -19,6 +19,9 @@ var edx = edx || {};
                 errorModel: this.errorModel
             }).render();
 
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
+
             this.listenTo( webcam, 'imageCaptured', function() {
                 // Track the user's successful image capture
                 window.analytics.track( 'edx.bi.user.face_image.captured', {
diff --git a/lms/static/js/verify_student/views/id_photo_step_view.js b/lms/static/js/verify_student/views/id_photo_step_view.js
index cb7724f444..35ed9e7b5d 100644
--- a/lms/static/js/verify_student/views/id_photo_step_view.js
+++ b/lms/static/js/verify_student/views/id_photo_step_view.js
@@ -19,6 +19,9 @@ var edx = edx || {};
                 errorModel: this.errorModel
             }).render();
 
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
+
             this.listenTo( webcam, 'imageCaptured', function() {
                 // Track the user's successful image capture
                 window.analytics.track( 'edx.bi.user.identification_image.captured', {
diff --git a/lms/static/js/verify_student/views/intro_step_view.js b/lms/static/js/verify_student/views/intro_step_view.js
index d79b12e61b..4de4efd9ee 100644
--- a/lms/static/js/verify_student/views/intro_step_view.js
+++ b/lms/static/js/verify_student/views/intro_step_view.js
@@ -21,6 +21,9 @@ var edx = edx || {};
                 el: $( '.requirements-container', this.el ),
                 requirements: this.stepData.requirements
             }).render();
+
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
         }
 
     });
diff --git a/lms/static/js/verify_student/views/make_payment_step_view.js b/lms/static/js/verify_student/views/make_payment_step_view.js
index e0d498db41..28c22e6519 100644
--- a/lms/static/js/verify_student/views/make_payment_step_view.js
+++ b/lms/static/js/verify_student/views/make_payment_step_view.js
@@ -17,6 +17,9 @@ var edx = edx || {};
                 requirements: this.stepData.requirements
             }).render();
 
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'payment', this.templateName );
+
             // Update the contribution amount with the amount the user
             // selected in a previous screen.
             if ( this.stepData.contributionAmount ) {
@@ -84,7 +87,7 @@ var edx = edx || {};
             // 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' );
+            window.analytics.page( 'payment', 'payment_processor_step' );
 
             form.submit();
         },
diff --git a/lms/static/js/verify_student/views/payment_confirmation_step_view.js b/lms/static/js/verify_student/views/payment_confirmation_step_view.js
index 40e0129241..47f8443d1a 100644
--- a/lms/static/js/verify_student/views/payment_confirmation_step_view.js
+++ b/lms/static/js/verify_student/views/payment_confirmation_step_view.js
@@ -71,18 +71,20 @@ var edx = edx || {};
          * those used to track business intelligence events.
          */
         postRender: function() {
+            var $verifyNowButton = $('#verify_now_button'),
+                $verifyLaterButton = $('#verify_later_button');
+
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'payment', this.templateName );
+
             // Track the user's decision to verify immediately
-            $( '#verify_now_button' ).on( 'click', function() {
-                window.analytics.track( 'edx.bi.user.verification.immediate', {
-                    category: 'verification'
-                });
+            window.analytics.trackLink( $verifyNowButton, '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'
-                });
+            window.analytics.trackLink( $verifyLaterButton, 'edx.bi.user.verification.deferred', {
+                category: 'verification'
             });
         },
 
diff --git a/lms/static/js/verify_student/views/review_photos_step_view.js b/lms/static/js/verify_student/views/review_photos_step_view.js
index 8617893b09..1e434dcf19 100644
--- a/lms/static/js/verify_student/views/review_photos_step_view.js
+++ b/lms/static/js/verify_student/views/review_photos_step_view.js
@@ -30,6 +30,9 @@ var edx = edx || {};
 
             // When moving to the next step, submit photos for verification
             $( '#next_step_button' ).on( 'click', _.bind( this.submitPhotos, this ) );
+
+            // Track a virtual pageview, for easy funnel reconstruction.
+            window.analytics.page( 'verification', this.templateName );
         },
 
         toggleSubmitEnabled: function() {
@@ -38,7 +41,7 @@ var edx = edx || {};
 
         retakePhotos: function() {
             // Track the user's intent to retake their photos
-            window.analytics.track( 'edx.bi.user.verification_images.retaken', {
+            window.analytics.track( 'edx.bi.user.images.retaken', {
                 category: 'verification'
             });
 
diff --git a/lms/static/js/verify_student/views/step_view.js b/lms/static/js/verify_student/views/step_view.js
index a069b96eb9..869754566a 100644
--- a/lms/static/js/verify_student/views/step_view.js
+++ b/lms/static/js/verify_student/views/step_view.js
@@ -47,9 +47,6 @@
                     this.postRender();
                 }
             ).fail( _.bind( this.handleError, this ) );
-
-            // Track a virtual pageview, for easy funnel reconstruction.
-            window.analytics.page( 'verification', this.templateName );
         },
 
         handleResponse: function( data ) {