From 244843d929958d9a2dd17ddfe5ef65221057c85d Mon Sep 17 00:00:00 2001 From: Peter Fogg Date: Fri, 22 Jan 2016 14:45:13 -0500 Subject: [PATCH] Track events on the course home page. Events are added for accessing the courseware, entering the verified upgrade flow, and toggling a course update. ECOM-2983 --- .../js/courseware/course_home_events.js | 16 ++++++++++++ .../courseware/toggle_element_visibility.js | 22 ++++++++++------ .../courseware/course_home_events.html | 14 ++++++++++ .../js/spec/courseware/course_home_events.js | 23 ++++++++++++++++ .../js/spec/courseware/updates_visibility.js | 26 ++++++++++++++----- lms/templates/courseware/info.html | 3 +++ 6 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 lms/static/js/courseware/course_home_events.js create mode 100644 lms/static/js/fixtures/courseware/course_home_events.html create mode 100644 lms/static/js/spec/courseware/course_home_events.js diff --git a/lms/static/js/courseware/course_home_events.js b/lms/static/js/courseware/course_home_events.js new file mode 100644 index 0000000000..d1956bee97 --- /dev/null +++ b/lms/static/js/courseware/course_home_events.js @@ -0,0 +1,16 @@ +;(function(define) { + 'use strict'; + + define(['jquery', 'logger'], function ($, Logger) { + return function () { + $('.last-accessed-link').on('click', function (event) { + Logger.log('edx.course.home.resume_course.clicked', { + url: event.currentTarget.href + }); + }); + $('.date-summary-verified-upgrade-deadline .date-summary-link').on('click', function () { + Logger.log('edx.course.home.upgrade_verified.clicked', {}); + }); + }; + }); +}).call(this, define || RequireJS.define); diff --git a/lms/static/js/courseware/toggle_element_visibility.js b/lms/static/js/courseware/toggle_element_visibility.js index b5dc438b0a..353c6a8078 100644 --- a/lms/static/js/courseware/toggle_element_visibility.js +++ b/lms/static/js/courseware/toggle_element_visibility.js @@ -1,18 +1,18 @@ ;(function (define) { 'use strict'; - define(["jquery"], - function ($) { + define(['jquery', 'logger', 'moment'], + function ($, Logger, moment) { return function () { // define variables for code legibility var toggleActionElements = $('.toggle-visibility-button'); - var updateToggleActionText = function (targetElement, actionElement) { + var updateToggleActionText = function (elementIsHidden, actionElement) { var show_text = actionElement.data('show'); var hide_text = actionElement.data('hide'); - if (targetElement.is(":visible")) { + if (elementIsHidden) { if (hide_text) { actionElement.html(actionElement.data('hide')); } else { @@ -26,15 +26,21 @@ }; $.each(toggleActionElements, function (i, elem) { - var toggleActionElement = $(elem); - var toggleTargetElement = toggleActionElement.siblings('.toggle-visibility-element'); + var toggleActionElement = $(elem), + toggleTargetElement = toggleActionElement.siblings('.toggle-visibility-element'), + elementIsHidden = toggleTargetElement.is(':visible'), + date = toggleTargetElement.siblings('.date').text(); - updateToggleActionText(toggleTargetElement, toggleActionElement); + updateToggleActionText(elementIsHidden, toggleActionElement); toggleActionElement.on('click', function (event) { event.preventDefault(); toggleTargetElement.toggleClass('hidden'); - updateToggleActionText(toggleTargetElement, toggleActionElement); + updateToggleActionText(!toggleTargetElement.hasClass('hidden'), toggleActionElement); + Logger.log('edx.course.home.course_update.toggled', { + action: elementIsHidden ? 'hide' : 'show', + publish_date: moment(date, 'MMM DD, YYYY').format() + }); }); }); }; diff --git a/lms/static/js/fixtures/courseware/course_home_events.html b/lms/static/js/fixtures/courseware/course_home_events.html new file mode 100644 index 0000000000..e115db5f41 --- /dev/null +++ b/lms/static/js/fixtures/courseware/course_home_events.html @@ -0,0 +1,14 @@ +
+
+

Verification Upgrade Deadline

+

in 3 weeks - Feb 12, 2016

+

You are still eligible to upgrade to a Verified Certificate! Pursue it to highlight the knowledge and skills you gain in this course.

+ + Upgrade to Verified Certificate + +
+
+ +
+ Resume Course +
diff --git a/lms/static/js/spec/courseware/course_home_events.js b/lms/static/js/spec/courseware/course_home_events.js new file mode 100644 index 0000000000..64eac2e901 --- /dev/null +++ b/lms/static/js/spec/courseware/course_home_events.js @@ -0,0 +1,23 @@ +define(['jquery', 'logger', 'js/courseware/course_home_events'], function ($, Logger, courseHomeEvents) { + 'use strict'; + + describe('Course home page eventing', function () { + beforeEach(function () { + loadFixtures('js/fixtures/courseware/course_home_events.html'); + courseHomeEvents(); + spyOn(Logger, 'log'); + }); + + it('sends an event when "Resume Course" is clicked', function () { + $('.last-accessed-link').click(); + expect(Logger.log).toHaveBeenCalledWith('edx.course.home.resume_course.clicked', { + url: "/courses/course-v1:edX+DemoX+Demo_Course/courseware/19a30717eff543078a5d94ae9d6c18a5/" + }); + }); + + it('sends an event when "Upgrade to Verified" is clicked', function () { + $('.date-summary-link').click(); + expect(Logger.log).toHaveBeenCalledWith('edx.course.home.upgrade_verified.clicked', {}); + }); + }); +}); diff --git a/lms/static/js/spec/courseware/updates_visibility.js b/lms/static/js/spec/courseware/updates_visibility.js index dc03954502..f8523f6974 100644 --- a/lms/static/js/spec/courseware/updates_visibility.js +++ b/lms/static/js/spec/courseware/updates_visibility.js @@ -1,5 +1,5 @@ -define(['jquery', 'js/courseware/toggle_element_visibility'], - function ($, ToggleElementVisibility) { +define(['jquery', 'logger', 'js/courseware/toggle_element_visibility'], + function ($, Logger, ToggleElementVisibility) { 'use strict'; describe('show/hide with mouse click', function () { @@ -9,18 +9,23 @@ define(['jquery', 'js/courseware/toggle_element_visibility'], /*jshint newcap: false */ ToggleElementVisibility(); /*jshint newcap: true */ + spyOn(Logger, 'log'); }); it('ensures update will hide on hide button click', function () { - var $shownUpdate = $('.toggle-visibility-element:not(.hidden)').first(); - $shownUpdate.siblings('.toggle-visibility-button').trigger('click'); + var $shownUpdate = $('.toggle-visibility-element:not(.hidden)').first(), + $updateButton = $shownUpdate.siblings('.toggle-visibility-button'); + $updateButton.trigger('click'); expect($shownUpdate).toHaveClass('hidden'); + expect($updateButton.text()).toEqual('Show'); }); it('ensures update will show on show button click', function () { - var $hiddenUpdate = $('.toggle-visibility-element.hidden').first(); - $hiddenUpdate.siblings('.toggle-visibility-button').trigger('click'); + var $hiddenUpdate = $('.toggle-visibility-element.hidden').first(), + $updateButton = $hiddenUpdate.siblings('.toggle-visibility-button'); + $updateButton.trigger('click'); expect($hiddenUpdate).not.toHaveClass('hidden'); + expect($updateButton.text()).toEqual('Hide'); }); it('ensures old updates will show on button click', function () { @@ -32,5 +37,14 @@ define(['jquery', 'js/courseware/toggle_element_visibility'], $('.toggle-visibility-button.show-older-updates').trigger('click'); expect($oldUpdates).not.toHaveClass('hidden'); }); + + it('sends a tracking event on hide and show', function () { + var $update = $('.toggle-visibility-element:not(.hidden)').first(); + $update.siblings('.toggle-visibility-button').trigger('click'); + expect(Logger.log).toHaveBeenCalledWith('edx.course.home.course_update.toggled', { + action: 'hide', + publish_date: '2015-12-01T00:00:00+00:00' + }); + }); }); }); diff --git a/lms/templates/courseware/info.html b/lms/templates/courseware/info.html index f2346c252e..1ee8b6b396 100644 --- a/lms/templates/courseware/info.html +++ b/lms/templates/courseware/info.html @@ -37,6 +37,9 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration <%static:require_module module_name="js/courseware/toggle_element_visibility" class_name="ToggleElementVisibility"> ToggleElementVisibility(); +<%static:require_module module_name="js/courseware/course_home_events" class_name="CourseHomeEvents"> + CourseHomeEvents(); + <%block name="js_extra">