Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ECOM-2967 adding GA events for dashboard XSeries messages

Browse Source
This commit is contained in:
AlasdairSwan
2016-01-07 13:59:07 -05:00
parent 1ba96f37e5
commit 2676098b02
6 changed files with 199 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
common/djangoapps/student/tests/tests.py
View File

@@ -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,

1
common/djangoapps/student/views.py
View File

@@ -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']),

80
lms/static/js/dashboard/track_events.js
View File

@@ -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);

89
lms/static/js/fixtures/dashboard/dashboard.html
View File

@@ -20,3 +20,92 @@
<a href="#" class="btn-find-courses">Find New Courses</a>
<a href="#" class="verified-info" data-course-key="edX/DemoX/Demo_Course"></a>
<div class="course-container">
<div class="label-xseries-association">
<i class="xseries-icon"></i>
<p class="message-copy">XSeries Program Course</p>
</div>
<article class="course honor">
<section class="details">
<div class="wrapper-course-image" aria-hidden="true">
<a class="cover">
<img src="/asset-v1:DelftX+CTB3365DWx+1T2016+type@asset+block@Delftx_water_course_image2.jpg" class="course-image" alt="CTB3365DWx Introduction to Drinking Water Treatment Cover Image">
</a>
<span class="sts-enrollment" title="You're enrolled as an honor code student">
<span class="label">Enrolled as: </span>
<div class="sts-enrollment-value">Honor Code</div>
</span>
</div>
<div class="wrapper-course-details">
<h3 class="course-title"><span>Introduction to Drinking Water Treatment</span></h3>
<div class="course-info">
<span class="info-university">DelftX - </span>
<span class="info-course-id">CTB3365DWx</span>
<span class="info-date-block" data-tooltip="Hi">Starts - Tuesday at 12pm UTC</span>
</div>
<div class="wrapper-course-actions">
<div class="course-actions">
<div class="wrapper-action-more" data-course-key="course-v1:DelftX+CTB3365DWx+1T2016">
<a href="#actions-dropdown-2" class="action action-more" id="actions-dropdown-link-2" aria-haspopup="true" aria-expanded="false" data-course-number="CTB3365DWx" data-course-name="Introduction to Drinking Water Treatment" data-dashboard-index="2">
<span class="sr">Course options dropdown</span>
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<div class="actions-dropdown" id="actions-dropdown-2" aria-label="Additional Actions Menu">
<ul class="actions-dropdown-list" id="actions-dropdown-list-2" aria-label="Available Actions" role="menu">
<li class="actions-item" id="actions-item-unenroll-2">
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="course-v1:DelftX+CTB3365DWx+1T2016" data-course-number="CTB3365DWx" data-course-name="Introduction to Drinking Water Treatment" data-dashboard-index="2" data-track-info="Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?" id="unenroll-2">Unenroll</a>
</li>
<li class="actions-item" id="actions-item-email-settings-2">
<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" data-course-id="course-v1:DelftX+CTB3365DWx+1T2016" data-course-number="CTB3365DWx" data-dashboard-index="2" data-optout="False" id="email-settings-2">Email Settings</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="wrapper-messages-primary">
<ul class="messages-list">
<div class="message message-upsell has-actions is-shown">
<div class="wrapper-extended">
<p class="message-copy" align="justify">
<b class="message-copy-bold">Pursue a Certificate of Achievement to highlight the knowledge and skills you gain in this course.</b>
<br>
It's official. It's easily shareable. It's a proven motivator to complete the course.
<br>
<a href="https://www.edx.org/verified-certificate" class="verified-info" data-course-key="course-v1:DelftX+CTB3365DWx+1T2016">Learn more about the verified Certificate of Achievement</a>.
</p>
<div class="action-upgrade-container">
<a class="action action-upgrade" href="/verify_student/upgrade/course-v1:DelftX+CTB3365DWx+1T2016/" data-course-id="course-v1:DelftX+CTB3365DWx+1T2016" data-user="Anon">
<i class="action-upgrade-icon"></i>
<span class="wrapper-copy">
<span class="copy" id="upgrade-to-verified">Upgrade to Verified</span>
</span>
</a>
</div>
</div>
</div>
<div class="message message-status is-shown credit-message">
<div class="xseries-action">
<div class="message-copy xseries-msg">
<p><b class="message-copy-bold">XSeries Program: Interested in more courses in this subject?</b></p>
<p></p>
<p class="message-copy">
This course is 1 of 3 courses in the <a href="https://www.edx.org/xseries/water-management">Water Management</a> XSeries.
</p>
</div>
<a class="btn xseries-border-btn" href="https://www.edx.org/xseries/water-management" target="_blank"
data-program-id="xseries007">
<i class="action-xseries-icon"></i>
<span>View XSeries Details</span>
</a>
</div>
</div>
</ul>
</footer>
</article>
</div>

73
lms/static/js/spec/dashboard/track_events_spec.js
View File

@@ -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);

3
lms/templates/dashboard/_dashboard_xseries_info.html
View File

@@ -25,7 +25,8 @@
if enrollment_mode == "verified":
xseries_btn_class = "xseries-base-btn";
%>
<a class="btn ${xseries_btn_class}" href="${course_program_info['program_marketing_url']}" target="_blank">
<a class="btn ${xseries_btn_class}" href="${course_program_info['program_marketing_url']}" target="_blank"
data-program-id="${course_program_info['program_id']}" >
<i class="action-xseries-icon"></i>
<span>
${_("View {category} Details").format(category=course_program_info['display_category'])}