emit ga events for user entitlement session actions

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 = '<span class="fa fa-check" aria-hidden="true"></span>';
+    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;