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

Split verification dashboard analytics
2014-12-22 09:34:44 -05:00
parent ccb5bfbc9a aeeb45cf57
commit 1fa1d357ee
11 changed files with 78 additions and 29 deletions
--- 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);
        });

--- 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 );
--- 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', {
--- 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', {
--- 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 );
        }

    });
--- 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();
        },
--- 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'
            });
        },

--- 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'
            });

--- 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 ) {
--- 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>
--- 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; }
  };