[REV-1205] Add ecommerce event tracking to course dashboard upgrade button (#24338)

Create a Javascript function to log upsell events to & attach the eventing to the course dashboard upsell button. The revenue squad is looking for more insight into which buttons users are clicking to get to the checkout page.

lms/djangoapps/experiments/utils.py

@@ -48,7 +48,6 @@ experiments_namespace = WaffleFlagNamespace(name=u'experiments')
 PROGRAM_INFO_FLAG = WaffleFlag(
     waffle_namespace=experiments_namespace,
     flag_name=u'add_programs',
-    flag_undefined_default=False
 )
 
 # .. toggle_name: experiments.add_dashboard_info
@@ -62,11 +61,27 @@ PROGRAM_INFO_FLAG = WaffleFlag(
 # .. toggle_warnings: None
 # .. toggle_tickets: REVEM-118
 # .. toggle_status: supported
-DASHBOARD_INFO_FLAG = WaffleFlag(experiments_namespace,
-                                 u'add_dashboard_info',
-                                 flag_undefined_default=False)
+DASHBOARD_INFO_FLAG = WaffleFlag(experiments_namespace, u'add_dashboard_info')
 # TODO END: clean up as part of REVEM-199 (End)
 
+# TODO: Clean up as part of REV-1205 (START)
+# .. toggle_name: experiments.add_upsell_tracking
+# .. toggle_implementation: WaffleFlag
+# .. toggle_default: False
+# .. toggle_description: Make sure upsell tracking JS works as expected.
+# .. toggle_category: experiments
+# .. toggle_use_cases: monitored_rollout
+# .. toggle_creation_date: 2020-7-7
+# .. toggle_expiration_date: None
+# .. toggle_warnings: None
+# .. toggle_tickets: REV-1205
+# .. toggle_status: supported
+UPSELL_TRACKING_FLAG = WaffleFlag(
+    waffle_namespace=experiments_namespace,
+    flag_name=u'add_upsell_tracking'
+)
+# TODO END: Clean up as part of REV-1205 (End)
+
 
 def check_and_get_upgrade_link_and_date(user, enrollment=None, course=None):
     """

lms/static/js/commerce/track_ecommerce_events.js

@@ -0,0 +1,34 @@
+/**
+ *
+ * A library of helper functions to track ecommerce related events.
+ *
+ */
+(function(define) {
+    'use strict';
+    define([], function() {
+        var trackUpsellClick = function(elt, linkName, optionalAttrs) {
+            var eventAttrs = {linkName: linkName};
+            var allowedAttrs = ['linkType', 'pageName', 'linkCategory'];
+
+            if (!window.analytics) {
+                return;
+            }
+
+            if (
+                typeof optionalAttrs !== 'undefined' &&
+                optionalAttrs !== null &&
+                Object.keys(optionalAttrs).length > 0
+            ) {
+                allowedAttrs.forEach(function(allowedAttr) {
+                    eventAttrs[allowedAttr] = optionalAttrs[allowedAttr];
+                });
+            }
+
+            window.analytics.trackLink(elt, 'edx.bi.ecommerce.upsell_links_clicked', eventAttrs);
+        };
+
+        var TrackECommerceEvents = {trackUpsellClick: trackUpsellClick};
+
+        return TrackECommerceEvents;
+    });
+}).call(this, define || RequireJS.define);

lms/templates/dashboard/_dashboard_course_listing.html

@@ -22,6 +22,7 @@ from student.helpers import (
   DISABLE_UNENROLL_CERT_STATES,
 )
 from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_params
+from lms.djangoapps.experiments.utils import UPSELL_TRACKING_FLAG
 %>
 
 <%
@@ -411,7 +412,7 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
               </p>
               <div class="action-upgrade-container">
                 % if use_ecommerce_payment_flow and course_mode_info['verified_sku']:
-                  <a class="action action-upgrade" href="${ecommerce_payment_page}?sku=${course_mode_info['verified_sku']}">
+                  <a id="ecommerce_upgrade_link" class="action action-upgrade" href="${ecommerce_payment_page}?sku=${course_mode_info['verified_sku']}">
                 % else:
                   <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': six.text_type(course_overview.id)})}" data-course-id="${course_overview.id}" data-user="${user.username}">
                 % endif
@@ -454,3 +455,18 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
 <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
     DateUtilFactory.transform(iterationKey=".localized-datetime");
 </%static:require_module_async>
+
+% if UPSELL_TRACKING_FLAG.is_enabled():
+    <%static:require_module_async module_name="js/commerce/track_ecommerce_events" class_name="TrackECommerceEvents">
+      if (window.loadedECommerceEvents === undefined) {
+        window.loadedECommerceEvents = true;
+
+        TrackECommerceEvents.trackUpsellClick($("#ecommerce_upgrade_link"), 'course_dashboard_green', {
+          pageName: "course_dashboard",
+          linkType: "button",
+          linkCategory: "green_upgrade"
+        });
+      }
+
+    </%static:require_module_async>
+%endif