From 229e1c96d4f8fc86886c137488e3207198109f05 Mon Sep 17 00:00:00 2001 From: McKenzie Welter Date: Mon, 30 Apr 2018 12:30:07 -0400 Subject: [PATCH] emit ga events for user entitlement session actions --- .../views/course_entitlement_view.js | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/lms/static/js/learner_dashboard/views/course_entitlement_view.js b/lms/static/js/learner_dashboard/views/course_entitlement_view.js index d1889209b2..6211d99b56 100644 --- a/lms/static/js/learner_dashboard/views/course_entitlement_view.js +++ b/lms/static/js/learner_dashboard/views/course_entitlement_view.js @@ -96,9 +96,10 @@ class CourseEntitlementView extends Backbone.View { The new session id is stored as a data attribute on the option in the session-select element. */ // Do not allow for enrollment when button is disabled + const prevSession = this.entitlementModel.get('currentSessionId'); if (this.$('.enroll-btn-initial').hasClass('disabled')) return; - // Grab the id for the desired session, an leave session event will return null + // Grab the id for the desired session, a leave session event will return null this.currentSessionSelection = this.$('.session-select') .find('option:selected').data('session_id'); const isLeavingSession = !this.currentSessionSelection; @@ -117,14 +118,14 @@ class CourseEntitlementView extends Backbone.View { course_run_id: this.currentSessionSelection, }), statusCode: { - 201: this.enrollSuccess.bind(this), - 204: this.unenrollSuccess.bind(this), + 201: this.enrollSuccess.bind(this, prevSession, this.currentSessionSelection), + 204: this.unenrollSuccess.bind(this, prevSession), }, error: this.enrollError.bind(this), }); } - enrollSuccess(data) { + enrollSuccess(prevSession, newSession) { /* Update external elements on the course card to represent the now available course session. @@ -133,6 +134,11 @@ class CourseEntitlementView extends Backbone.View { 3) Hide the 'View Course' button to the course card. */ const successIconEl = ''; + const eventPage = this.$parentEl ? 'course-dashboard' : 'program-details'; + const eventAction = prevSession ? 'switch' : 'new'; + + // Emit analytics event to track user leaving current session + this.trackSessionChange(eventPage, eventAction, prevSession); // With a containing backbone view, we can simply re-render the parent card if (this.$parentEl) { @@ -150,19 +156,19 @@ class CourseEntitlementView extends Backbone.View { HtmlUtils.setHtml(this.$dateDisplayField, HtmlUtils.joinHtml( HtmlUtils.HTML(successIconEl), - this.getAvailableSessionWithId(data.course_run_id).session_dates, + this.getAvailableSessionWithId(newSession).session_dates, ), ); // Ensure the view course button links to new session home page and place focus there this.$enterCourseBtn - .attr('href', this.formatCourseHomeUrl(data.course_run_id)) + .attr('href', this.formatCourseHomeUrl(newSession)) .removeClass('hidden') .focus(); this.toggleSessionSelectionPanel(); } - unenrollSuccess() { + unenrollSuccess(prevSession) { /* Update external elements on the course card to represent the unenrolled state. @@ -171,6 +177,10 @@ class CourseEntitlementView extends Backbone.View { 3) Remove the messages associated with the enrolled state. 4) Remove the link from the course card image and title. */ + // Emit analytics event to track user leaving current session + const eventPage = this.$parentEl ? 'course-dashboard' : 'program-details'; + this.trackSessionChange(eventPage, 'leave', prevSession); + // With a containing backbone view, we can simply re-render the parent card if (this.$parentEl) { this.courseCardModel.setUnselected(); @@ -398,6 +408,15 @@ class CourseEntitlementView extends Backbone.View { /* Returns an available session given a sessionId */ return this.entitlementModel.get('availableSessions').find(session => session.session_id === sessionId); } + + trackSessionChange(eventPage, action, prevSession) { + const eventName = `${eventPage}.${action}-session`; + + window.analytics.track(eventName, { + fromCourseRun: prevSession, + toCourseRun: this.entitlementModel.get('currentSessionId'), + }); + } } export default CourseEntitlementView;