Track upsell copy interaction, upgrade button and verify now button clicks on the dashboard

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

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>

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