Merge pull request #15774 from edx/HarryRein/LEARNER-2027-resume-course-eventing

Eventing on Resume Course click on home page

openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html

@@ -20,8 +20,8 @@
                   </form>
               </div>
             <div class="form-actions">
-                <a class="btn btn-brand action-resume-course" href="${resume_course_url}">
-                    Start Course
+                <a class="btn btn-brand action-resume-course" href="/courses/course-v1:edX+DemoX+Demo_Course/courseware/19a30717eff543078a5d94ae9d6c18a5/">
+                    <span data-action-type="start">Start Course</span>
                 </a>
             </div>
         </div>

openedx/features/course_experience/static/course_experience/js/CourseHome.js

@@ -2,6 +2,19 @@
 
 export class CourseHome {  // eslint-disable-line import/prefer-default-export
   constructor(options) {
+    // Logging for 'Resume Course' or 'Start Course' button click
+    const $resumeCourseLink = $(options.resumeCourseLink);
+    $resumeCourseLink.on('click', (event) => {
+      const eventType = $resumeCourseLink.find('span').data('action-type');
+      Logger.log(
+        'edx.course.home.resume_course.clicked',
+        {
+          event_type: eventType,
+          url: event.currentTarget.href,
+        },
+      );
+    });
+
     // Logging for course tool click events
     const $courseToolLink = $(options.courseToolLink);
     $courseToolLink.on('click', (event) => {

openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js

@@ -9,11 +9,24 @@ describe('Course Home factory', () => {
     beforeEach(() => {
       loadFixtures('course_experience/fixtures/course-home-fragment.html');
       home = new CourseHome({
+        resumeCourseLink: '.action-resume-course',
         courseToolLink: '.course-tool-link',
       });
       spyOn(Logger, 'log');
     });
 
+    it('sends an event when resume or start course is clicked', () => {
+      $('.action-resume-course').click();
+      expect(Logger.log).toHaveBeenCalledWith(
+        'edx.course.home.resume_course.clicked',
+        {
+          event_type: 'start',
+          url: `http://${window.location.host}/courses/course-v1:edX+DemoX+Demo_Course/courseware` +
+            '/19a30717eff543078a5d94ae9d6c18a5/',
+        },
+      );
+    });
+
     it('sends an event when an course tool is clicked', () => {
       const courseToolNames = document.querySelectorAll('.course-tool-link');
       for (let i = 0; i < courseToolNames.length; i += 1) {

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -45,9 +45,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                 % if resume_course_url:
                     <a class="btn btn-brand action-resume-course" href="${resume_course_url}">
                         % if has_visited_course:
-                            ${_("Resume Course")}
+                            <span data-action-type="resume">${_("Resume Course")}</span>
                         % else:
-                            ${_("Start Course")}
+                            <span data-action-type="start">${_("Start Course")}</span>
                         % endif
                     </a>
                 % endif
@@ -109,6 +109,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
 
 <%static:webpack entry="CourseHome">
     new CourseHome({
+        resumeCourseLink: ".action-resume-course",
         courseToolLink: ".course-tool-link",
     });
 </%static:webpack>