[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.
This commit is contained in:
JJ
2020-07-24 12:38:41 -04:00
committed by GitHub
parent 862e1a37d4
commit 1f3965be29
3 changed files with 13 additions and 3 deletions

View File

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

View File

@@ -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() {

View File

@@ -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>