diff --git a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
new file mode 100644
index 0000000000..42fdd71c75
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
@@ -0,0 +1,100 @@
+
diff --git a/openedx/features/course_experience/static/course_experience/js/CourseHome.js b/openedx/features/course_experience/static/course_experience/js/CourseHome.js
new file mode 100644
index 0000000000..cedc8701b8
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/js/CourseHome.js
@@ -0,0 +1,18 @@
+/* globals Logger */
+
+export class CourseHome { // eslint-disable-line import/prefer-default-export
+ constructor(options) {
+ // Logging for course tool click events
+ const $courseToolLink = $(options.courseToolLink);
+ $courseToolLink.on('click', () => {
+ const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
+ Logger.log(
+ 'edx.course.tool.accessed',
+ {
+ tool_name: courseToolName,
+ page: 'course_home',
+ },
+ );
+ });
+ }
+}
diff --git a/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js
new file mode 100644
index 0000000000..d9af744bee
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js
@@ -0,0 +1,29 @@
+/* globals Logger, loadFixtures */
+
+import { CourseHome } from '../CourseHome';
+
+describe('Course Home factory', () => {
+ describe('Ensure course tool click logging', () => {
+ let home; // eslint-disable-line no-unused-vars
+
+ beforeEach(() => {
+ loadFixtures('course_experience/fixtures/course-home-fragment.html');
+ home = new CourseHome({
+ courseToolLink: '.course-tool-link',
+ });
+ spyOn(Logger, 'log');
+ });
+
+ it('sends an event when an course tool is clicked', () => {
+ document.querySelector('.course-tool-link').dispatchEvent(new Event('click'));
+ const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
+ expect(Logger.log).toHaveBeenCalledWith(
+ 'edx.course.tool.accessed',
+ {
+ tool_name: courseToolName,
+ page: 'course_home',
+ },
+ );
+ });
+ });
+});
diff --git a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
index 90812cfe3c..d68617a2d0 100644
--- a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
@@ -74,7 +74,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% for course_tool in course_tools:
-
-
+
${course_tool.title()}
@@ -102,3 +102,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif
%block>
+
+<%static:webpack entry="CourseHome">
+ new CourseHome({
+ courseToolLink: ".course-tool-link",
+ });
+%static:webpack>
diff --git a/webpack.config.js b/webpack.config.js
index f6f78bde2b..b34e53ce7b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,6 +18,7 @@ var wpconfig = {
context: __dirname,
entry: {
+ CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',