From 2676098b02b76c64542d03eb4d52fd2334c58b4f Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Thu, 7 Jan 2016 13:59:07 -0500 Subject: [PATCH] ECOM-2967 adding GA events for dashboard XSeries messages --- common/djangoapps/student/tests/tests.py | 8 ++ common/djangoapps/student/views.py | 1 + lms/static/js/dashboard/track_events.js | 80 +++++++++++------ .../js/fixtures/dashboard/dashboard.html | 89 +++++++++++++++++++ .../js/spec/dashboard/track_events_spec.js | 73 +++++++++------ .../dashboard/_dashboard_xseries_info.html | 3 +- 6 files changed, 199 insertions(+), 55 deletions(-) diff --git a/common/djangoapps/student/tests/tests.py b/common/djangoapps/student/tests/tests.py index b44f6aad63..5d9cb96f1f 100644 --- a/common/djangoapps/student/tests/tests.py +++ b/common/djangoapps/student/tests/tests.py @@ -898,6 +898,7 @@ class AnonymousLookupTable(ModuleStoreTestCase): self.assertEqual(anonymous_id, anonymous_id_for_user(self.user, course2.id, save=False)) +# TODO: Clean up these tests so that they use the ProgramsDataMixin. @unittest.skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in lms') @ddt.ddt class DashboardTestXSeriesPrograms(ModuleStoreTestCase, ProgramsApiConfigMixin): @@ -928,8 +929,11 @@ class DashboardTestXSeriesPrograms(ModuleStoreTestCase, ProgramsApiConfigMixin): def _create_program_data(self, data): """Dry method to create testing programs data.""" programs = {} + _id = 0 + for course, program_status in data: programs[unicode(course)] = { + 'id': _id, 'category': self.category, 'organization': {'display_name': 'Test Organization 1', 'key': 'edX'}, 'marketing_slug': 'fake-marketing-slug-xseries-1', @@ -955,6 +959,8 @@ class DashboardTestXSeriesPrograms(ModuleStoreTestCase, ProgramsApiConfigMixin): 'name': self.program_name } + _id += 1 + return programs @ddt.data( @@ -969,6 +975,7 @@ class DashboardTestXSeriesPrograms(ModuleStoreTestCase, ProgramsApiConfigMixin): with patch('student.views.get_programs_for_dashboard') as mock_data: mock_data.return_value = { u'edx/demox/Run_1': { + 'id': 0, 'category': self.category, 'organization': {'display_name': 'Test Organization 1', 'key': 'edX'}, 'marketing_slug': marketing_slug, @@ -990,6 +997,7 @@ class DashboardTestXSeriesPrograms(ModuleStoreTestCase, ProgramsApiConfigMixin): self.assertEqual( { u'edx/demox/Run_1': { + 'program_id': 0, 'category': 'xseries', 'course_count': len(course_codes), 'display_name': self.program_name, diff --git a/common/djangoapps/student/views.py b/common/djangoapps/student/views.py index aa157ddfd4..970e096490 100644 --- a/common/djangoapps/student/views.py +++ b/common/djangoapps/student/views.py @@ -2378,6 +2378,7 @@ def _get_course_programs(user, user_enrolled_courses): # pylint: disable=invali 'course_count': len(program['course_codes']), 'display_name': program['name'], 'category': program.get('category'), + 'program_id': program['id'], 'program_marketing_url': urljoin( settings.MKTG_URLS.get('ROOT'), 'xseries' + '/{}' ).format(program['marketing_slug']), diff --git a/lms/static/js/dashboard/track_events.js b/lms/static/js/dashboard/track_events.js index 55b5b467d1..8d2910b44b 100644 --- a/lms/static/js/dashboard/track_events.js +++ b/lms/static/js/dashboard/track_events.js @@ -15,68 +15,94 @@ var edx = edx || {}; properties = {}; properties.category = 'dashboard'; - properties.label = $el.data("course-key"); + properties.label = $el.data('course-key'); return properties; }; - edx.dashboard.TrackEvents = function() { + // Generate object to be passed with programs events + edx.dashboard.generateProgramProperties = function(element) { + var $el = $(element); - var course_title_link = $(".course-title > a"), - course_image_link = $(".cover"), - enter_course_link = $(".enter-course"), - options_dropdown = $(".wrapper-action-more"), - course_learn_verified = $(".verified-info"), - find_courses_btn = $(".btn-find-courses"); + return { + category: 'dashboard', + course_id: $el.closest('.course-container').find('.info-course-id').html(), + program_id: $el.data('program-id') + }; + }; - // Emit an event when the "course title link" is clicked. + edx.dashboard.trackEvents = function() { + var $courseTitleLink = $('.course-title > a'), + $courseImageLink = $('.cover'), + $enterCourseLink = $('.enter-course'), + $optionsDropdown = $('.wrapper-action-more'), + $courseLearnVerified = $('.verified-info'), + $findCoursesBtn = $('.btn-find-courses'), + $xseriesBtn = $('.xseries-action .btn'); + + // Emit an event when the 'course title link' is clicked. window.analytics.trackLink( - course_title_link, - "edx.bi.dashboard.course_title.clicked", + $courseTitleLink, + 'edx.bi.dashboard.course_title.clicked', edx.dashboard.generateTrackProperties ); - // Emit an event when the "course image" is clicked. + // Emit an event when the 'course image' is clicked. window.analytics.trackLink( - course_image_link, - "edx.bi.dashboard.course_image.clicked", + $courseImageLink, + 'edx.bi.dashboard.course_image.clicked', edx.dashboard.generateTrackProperties ); - // Emit an event when the "View Course" button is clicked. + // Emit an event when the 'View Course' button is clicked. window.analytics.trackLink( - enter_course_link, - "edx.bi.dashboard.enter_course.clicked", + $enterCourseLink, + 'edx.bi.dashboard.enter_course.clicked', edx.dashboard.generateTrackProperties ); // Emit an event when the options dropdown is engaged. window.analytics.trackLink( - options_dropdown, - "edx.bi.dashboard.course_options_dropdown.clicked", + $optionsDropdown, + 'edx.bi.dashboard.course_options_dropdown.clicked', edx.dashboard.generateTrackProperties ); - // Emit an event when the "Learn about verified" link is clicked. + // Emit an event when the 'Learn about verified' link is clicked. window.analytics.trackLink( - course_learn_verified, - "edx.bi.dashboard.verified_info_link.clicked", + $courseLearnVerified, + 'edx.bi.dashboard.verified_info_link.clicked', edx.dashboard.generateTrackProperties ); - // Emit an event when the "Find Courses" button is clicked. + // Emit an event when the 'Find Courses' button is clicked. window.analytics.trackLink( - find_courses_btn, - "edx.bi.dashboard.find_courses_button.clicked", + $findCoursesBtn, + 'edx.bi.dashboard.find_courses_button.clicked', { - category: "dashboard", + category: 'dashboard', label: null } ); + // Emit an event when the 'View XSeries Details' button is clicked + window.analytics.trackLink( + $xseriesBtn, + 'edx.bi.dashboard.xseries_cta_message.clicked', + edx.dashboard.generateProgramProperties + ); + }; + + edx.dashboard.xseriesTrackMessages = function() { + $('.xseries-action .btn').each(function(i, element) { + var data = edx.dashboard.generateProgramProperties($(element)); + + window.analytics.track( 'edx.bi.dashboard.xseries_cta_message.viewed', data ); + }); }; $(document).ready(function() { - edx.dashboard.TrackEvents(); + edx.dashboard.trackEvents(); + edx.dashboard.xseriesTrackMessages(); }); })(jQuery); diff --git a/lms/static/js/fixtures/dashboard/dashboard.html b/lms/static/js/fixtures/dashboard/dashboard.html index f92d0bc018..12008f96c7 100644 --- a/lms/static/js/fixtures/dashboard/dashboard.html +++ b/lms/static/js/fixtures/dashboard/dashboard.html @@ -20,3 +20,92 @@ Find New Courses + +
+
+ +

XSeries Program Course

+
+
+
+ + +
+

Introduction to Drinking Water Treatment

+
+ DelftX - + CTB3365DWx + Starts - Tuesday at 12pm UTC +
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+
diff --git a/lms/static/js/spec/dashboard/track_events_spec.js b/lms/static/js/spec/dashboard/track_events_spec.js index 8f70e12f95..fe3ca5d38a 100644 --- a/lms/static/js/spec/dashboard/track_events_spec.js +++ b/lms/static/js/spec/dashboard/track_events_spec.js @@ -6,72 +6,91 @@ ], function($) { - describe("edx.dashboard.TrackEvents", function() { - + describe('edx.dashboard.trackEvents', function() { beforeEach(function() { // Stub the analytics event tracker window.analytics = jasmine.createSpyObj('analytics', ['track', 'page', 'trackLink']); loadFixtures('js/fixtures/dashboard/dashboard.html'); - window.edx.dashboard.TrackEvents(); + window.edx.dashboard.trackEvents(); }); - it("sends an analytics event when the user clicks course title link", function() { - // Verify that analytics events fire when the "course title link" is clicked. + it('sends an analytics event when the user clicks course title link', function() { + // Verify that analytics events fire when the 'course title link' is clicked. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".course-title > a"), - "edx.bi.dashboard.course_title.clicked", + $('.course-title > a'), + 'edx.bi.dashboard.course_title.clicked', window.edx.dashboard.generateTrackProperties ); }); - it("sends an analytics event when the user clicks course image link", function() { - // Verify that analytics events fire when the "course image link" is clicked. + it('sends an analytics event when the user clicks course image link', function() { + // Verify that analytics events fire when the 'course image link' is clicked. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".cover"), - "edx.bi.dashboard.course_image.clicked", + $('.cover'), + 'edx.bi.dashboard.course_image.clicked', window.edx.dashboard.generateTrackProperties ); }); - it("sends an analytics event when the user clicks enter course link", function() { - // Verify that analytics events fire when the "enter course link" is clicked. + it('sends an analytics event when the user clicks enter course link', function() { + // Verify that analytics events fire when the 'enter course link' is clicked. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".enter-course"), - "edx.bi.dashboard.enter_course.clicked", + $('.enter-course'), + 'edx.bi.dashboard.enter_course.clicked', window.edx.dashboard.generateTrackProperties ); }); - it("sends an analytics event when the user clicks enter course link", function() { + it('sends an analytics event when the user clicks enter course link', function() { // Verify that analytics events fire when the options dropdown is engaged. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".wrapper-action-more"), - "edx.bi.dashboard.course_options_dropdown.clicked", + $('.wrapper-action-more'), + 'edx.bi.dashboard.course_options_dropdown.clicked', window.edx.dashboard.generateTrackProperties ); }); - it("sends an analytics event when the user clicks the learned about verified track link", function() { - //Verify that analytics events fire when the "Learned about verified track" link is clicked. + it('sends an analytics event when the user clicks the learned about verified track link', function() { + //Verify that analytics events fire when the 'Learned about verified track' link is clicked. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".verified-info"), - "edx.bi.dashboard.verified_info_link.clicked", + $('.verified-info'), + 'edx.bi.dashboard.verified_info_link.clicked', window.edx.dashboard.generateTrackProperties ); }); - it("sends an analytics event when the user clicks find courses button", function() { - // Verify that analytics events fire when the "user clicks find the course" button. + it('sends an analytics event when the user clicks find courses button', function() { + // Verify that analytics events fire when the 'user clicks find the course' button. expect(window.analytics.trackLink).toHaveBeenCalledWith( - $(".btn-find-courses"), - "edx.bi.dashboard.find_courses_button.clicked", + $('.btn-find-courses'), + 'edx.bi.dashboard.find_courses_button.clicked', { - category: "dashboard", + category: 'dashboard', label: null } ); }); + + it('sends an analytics event when the user clicks the \'View XSeries Details\' button', function() { + expect(window.analytics.trackLink).toHaveBeenCalledWith( + $('.xseries-action .btn'), + 'edx.bi.dashboard.xseries_cta_message.clicked', + window.edx.dashboard.generateProgramProperties + ); + }); + + it('sends an analytics event when xseries messages are present in the DOM on page load', function() { + window.edx.dashboard.xseriesTrackMessages(); + expect(window.analytics.track).toHaveBeenCalledWith( + 'edx.bi.dashboard.xseries_cta_message.viewed', + { + category: 'dashboard', + course_id: 'CTB3365DWx', + program_id: 'xseries007' + } + ); + }); }); }); }).call(this, window.define); diff --git a/lms/templates/dashboard/_dashboard_xseries_info.html b/lms/templates/dashboard/_dashboard_xseries_info.html index 7420310c7b..a3e4da2dc6 100644 --- a/lms/templates/dashboard/_dashboard_xseries_info.html +++ b/lms/templates/dashboard/_dashboard_xseries_info.html @@ -25,7 +25,8 @@ if enrollment_mode == "verified": xseries_btn_class = "xseries-base-btn"; %> - + ${_("View {category} Details").format(category=course_program_info['display_category'])}