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

ECOM-2430: Added the tracking GA events on dashboard

Browse Source
This commit is contained in:
aamir-khan
2015-10-13 18:06:53 +05:00
committed by Awais
parent 2d084f7610
commit 2376bbb4be
5 changed files with 191 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
lms/static/js/dashboard/track_events.js Normal file
View File

@@ -0,0 +1,82 @@
/**
* Track interaction with the student dashboard..
*/
var edx = edx || {};
(function ($) {
'use strict';
edx.dashboard = edx.dashboard || {};
// Generate the properties object to be passed along with business intelligence events.
edx.dashboard.generateTrackProperties = function(element){
var $el = $(element),
properties = {};
properties.category = 'dashboard';
properties.label = $el.data("course-key");
return properties;
};
edx.dashboard.TrackEvents = function() {
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");
// Emit an event when the "course title link" is clicked.
window.analytics.trackLink(
course_title_link,
"edx.bi.dashboard.course_title.clicked",
edx.dashboard.generateTrackProperties
);
// Emit an event when the "course image" is clicked.
window.analytics.trackLink(
course_image_link,
"edx.bi.dashboard.course_image.clicked",
edx.dashboard.generateTrackProperties
);
// Emit an event when the "View Course" button is clicked.
window.analytics.trackLink(
enter_course_link,
"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",
edx.dashboard.generateTrackProperties
);
// Emit an event when the "Learn about verified" link is clicked.
window.analytics.trackLink(
course_learn_verified,
"edx.bi.dashboard.verified_info_link.clicked",
edx.dashboard.generateTrackProperties
);
// Emit an event when the "Find Courses" button is clicked.
window.analytics.trackLink(
find_courses_btn,
"edx.bi.dashboard.find_courses_button.clicked",
{
category: "dashboard",
label: null
}
);
};
$(document).ready(function() {
edx.dashboard.TrackEvents();
});
})(jQuery);

22
lms/static/js/fixtures/dashboard/dashboard.html Normal file
View File

@@ -0,0 +1,22 @@
<a class="cover" data-course-key="edX/DemoX/Demo_Course" href="courses/edX/DemoX/Demo_Course/info">
<img alt="DemoX" class="course-image" src="/path/to/image.jpg">
</a>
<h3 class="course-title">
<a data-course-key="edX/DemoX/Demo_Course">
Introduction to edX
</a>
</h3>
<div class="wrapper-action-more" data-course-key="edX/DemoX/Demo_Course">
</div>
<a data-course-key="edX/DemoX/Demo_Course" class="enter-course" href="/courses/edX/DemoX/Demo_Course/info">
View Course
</a>
<a data-course-key="edX/DemoX/Demo_Course" class="verified-info" href="/what_is_verified_cert">Learn more about the verified Certificate of Achievement</a>.
<a href="#" class="btn-find-courses">Find New Courses</a>
<a href="#" class="verified-info" data-course-key="edX/DemoX/Demo_Course"></a>

77
lms/static/js/spec/dashboard/track_events_spec.js Normal file
View File

@@ -0,0 +1,77 @@
(function (define) {
'use strict';
define([
'jquery',
'js/dashboard/track_events'
],
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();
});
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",
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.
expect(window.analytics.trackLink).toHaveBeenCalledWith(
$(".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.
expect(window.analytics.trackLink).toHaveBeenCalledWith(
$(".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() {
// 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",
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.
expect(window.analytics.trackLink).toHaveBeenCalledWith(
$(".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.
expect(window.analytics.trackLink).toHaveBeenCalledWith(
$(".btn-find-courses"),
"edx.bi.dashboard.find_courses_button.clicked",
{
category: "dashboard",
label: null
}
);
});
});
});
}).call(this, window.define);

1
lms/static/js/spec/main.js
View File

@@ -638,6 +638,7 @@
'lms/include/js/spec/views/notification_spec.js',
'lms/include/js/spec/views/file_uploader_spec.js',
'lms/include/js/spec/dashboard/donation.js',
'lms/include/js/spec/dashboard/track_events_spec.js',
'lms/include/js/spec/groups/views/cohorts_spec.js',
'lms/include/js/spec/shoppingcart/shoppingcart_spec.js',
'lms/include/js/spec/instructor_dashboard/ecommerce_spec.js',

18
lms/templates/dashboard/_dashboard_course_listing.html
View File

@@ -49,7 +49,7 @@ from student.helpers import (
<div class="wrapper-course-image" aria-hidden="true">
% if show_courseware_link:
% if not is_course_blocked:
<a href="${course_target}" class="cover">
<a href="${course_target}" data-course-key="${enrollment.course_id}" class="cover">
<img src="${course_overview.course_image_url}" class="course-image" alt="${_('{course_number} {course_name} Home Page').format(course_number=course_overview.number, course_name=course_overview.display_name_with_default) |h}" />
</a>
% else:
@@ -76,9 +76,9 @@ from student.helpers import (
<h3 class="course-title">
% if show_courseware_link:
% if not is_course_blocked:
<a href="${course_target}">${course_overview.display_name_with_default}</a>
<a data-course-key="${enrollment.course_id}" href="${course_target}">${course_overview.display_name_with_default}</a>
% else:
<a class="disable-look">${course_overview.display_name_with_default}</a>
<a class="disable-look" data-course-key="${enrollment.course_id}">${course_overview.display_name_with_default}</a>
% endif
% else:
<span>${course_overview.display_name_with_default}</span>
@@ -106,15 +106,15 @@ from student.helpers import (
% if show_courseware_link:
% if course_overview.has_ended():
% if not is_course_blocked:
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
<a href="${course_target}" class="enter-course archived" data-course-key="${enrollment.course_id}">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
<a class="enter-course-blocked archived" data-course-key="${enrollment.course_id}">${_('View Archived Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
% endif
% else:
% if not is_course_blocked:
<a href="${course_target}" class="enter-course">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
<a href="${course_target}" class="enter-course" data-course-key="${enrollment.course_id}">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
<a class="enter-course-blocked" data-course-key="${enrollment.course_id}">${_('View Course')}<span class="sr">&nbsp;${course_overview.display_name_with_default}</span></a>
% endif
% endif
@@ -164,7 +164,7 @@ from student.helpers import (
% endif
% endif
% endif
<div class="wrapper-action-more">
<div class="wrapper-action-more" data-course-key="${enrollment.course_id}">
<a href="#actions-dropdown-${dashboard_index}" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}">
<span class="sr">${_('Course options dropdown')}</span>
<i class="fa fa-cog" aria-hidden="true"></i>
@@ -325,7 +325,7 @@ from student.helpers import (
<b class="message-copy-bold">
${_("Pursue a {cert_name_long} to highlight the knowledge and skills you gain in this course.").format(cert_name_long=cert_name_long)}
</b><br>
${_("It's official. It's easily shareable. It's a proven motivator to complete the course. <br>{link_start}Learn more about the verified {cert_name_long}{link_end}.").format(link_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), link_end="</a>", cert_name_long=cert_name_long)}
${_("It's official. It's easily shareable. It's a proven motivator to complete the course. <br>{link_start}Learn more about the verified {cert_name_long}{link_end}.").format(link_start='<a href="{}" class="verified-info" data-course-key="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT'), enrollment.course_id), link_end="</a>", cert_name_long=cert_name_long)}
</p>
<div class="action-upgrade-container">
<a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course_overview.id)})}" data-course-id="${course_overview.id | h}" data-user="${user.username | h}">