From 1f3965be29f18183d85589acedba2d633521e728 Mon Sep 17 00:00:00 2001
From: JJ <34042537+jhan217@users.noreply.github.com>
Date: Fri, 24 Jul 2020 12:38:41 -0400
Subject: [PATCH] [REV-1257] Add upsell tracking for program dashboard's
 courses

This PR updates the track_ecommerce_events.js to allow imports into webpacked code &
adds upsell tracking to the course upgrade buttons on the program dashboard. We are doing this so we have a better understanding of when users are clicking our upsell links.
---
 lms/static/js/commerce/track_ecommerce_events.js          | 6 ++++--
 .../js/learner_dashboard/views/upgrade_message_view.js    | 8 ++++++++
 .../learner_dashboard/upgrade_message.underscore          | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/lms/static/js/commerce/track_ecommerce_events.js b/lms/static/js/commerce/track_ecommerce_events.js
index 79a973558f..922b38d69b 100644
--- a/lms/static/js/commerce/track_ecommerce_events.js
+++ b/lms/static/js/commerce/track_ecommerce_events.js
@@ -10,7 +10,7 @@
             var eventAttrs = {linkName: linkName};
             var allowedAttrs = ['linkType', 'pageName', 'linkCategory'];
 
-            if (!window.analytics) {
+            if (!window.analytics || !window.analytics.trackLink) {
                 return;
             }
 
@@ -31,4 +31,6 @@
 
         return TrackECommerceEvents;
     });
-}).call(this, define || RequireJS.define);
+}).call(this,
+    typeof define === 'function' && define.amd ? define : RequireJS.define
+);
diff --git a/lms/static/js/learner_dashboard/views/upgrade_message_view.js b/lms/static/js/learner_dashboard/views/upgrade_message_view.js
index 1a66cfbef3..7c354922bd 100644
--- a/lms/static/js/learner_dashboard/views/upgrade_message_view.js
+++ b/lms/static/js/learner_dashboard/views/upgrade_message_view.js
@@ -3,12 +3,20 @@ import Backbone from 'backbone';
 import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
 
 import upgradeMessageTpl from '../../../templates/learner_dashboard/upgrade_message.underscore';
+import trackECommerceEvents from '../../commerce/track_ecommerce_events';
 
 class UpgradeMessageView extends Backbone.View {
   initialize(options) {
     this.messageTpl = HtmlUtils.template(upgradeMessageTpl);
     this.$el = options.$el;
     this.render();
+
+    const courseUpsellButtons = this.$el.find('.program_dashboard_course_upsell_button');
+    trackECommerceEvents.trackUpsellClick(courseUpsellButtons, 'program_dashboard_course', {
+      linkType: 'button',
+      pageName: 'program_dashboard',
+      linkCategory: 'green_upgrade',
+    });
   }
 
   render() {
diff --git a/lms/templates/learner_dashboard/upgrade_message.underscore b/lms/templates/learner_dashboard/upgrade_message.underscore
index 981c29b7f7..fa409518bc 100644
--- a/lms/templates/learner_dashboard/upgrade_message.underscore
+++ b/lms/templates/learner_dashboard/upgrade_message.underscore
@@ -5,7 +5,7 @@
 </div>
 <% if (typeof is_mobile_only === 'undefined' || is_mobile_only === false) { %>
 <div class="action col-12 md-col-4">
-    <a href="<%- upgrade_url %>" class="btn-brand btn cta-primary upgrade-button single-course-run">
+    <a href="<%- upgrade_url %>" class="btn-brand btn cta-primary upgrade-button single-course-run program_dashboard_course_upsell_button">
         <%- gettext('Upgrade to Verified') %>
     <a>
 </div>