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 0000000000000000000000000000000000000000..42fdd71c75b90d8f3eb20d9d28a22135838fc2d5
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
@@ -0,0 +1,100 @@
+<div class="course-view container" id="course-container">
+ <header class="page-header has-secondary">
+ <div class="page-header-main">
+ <nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1">
+ <h2 class="hd hd-3 page-title">Reviews Test Course</h2>
+ </nav>
+ </div>
+ <div class="page-header-secondary">
+ <div class="page-header-search">
+ <form class="search-form" role="search" action="/courses/course-v1:W3Cx+HTML5.0x+1T2017/search/">
+ <label class="field-label sr-only" for="search" id="search-hint">Search the course</label>
+ <input
+ class="field-input input-text search-input"
+ type="search"
+ name="query"
+ id="search"
+ placeholder="Search the course"
+ />
+ <button class="btn btn-small search-button" type="submit">Search</button>
+ </form>
+ </div>
+ <div class="form-actions">
+ <a class="btn btn-brand action-resume-course" href="${resume_course_url}">
+ Start Course
+ </a>
+ </div>
+ </div>
+ </header>
+ <div class="page-content">
+ <div class="layout layout-1t2t">
+ <main class="layout-col layout-col-b">
+ <div class="section section-dates">
+ <div class="welcome-message">
+ <div class="dismiss-message">
+ <button type="button" class="btn-link">Dismiss</button>
+ </div>
+ This is a major update!
+ </div>
+ </div>
+ <main role="main" class="course-outline" id="main" tabindex="-1">
+ <ol class="block-tree" role="tree">
+ <li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
+ <div class="section-name">
+ <h3>Testing</h3>
+ </div>
+ <ol class="outline-item focusable" role="group" tabindex="0">
+ <li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">
+ <a class="outline-item focusable" href="http://localhost:8000/courses/course-v1:W3Cx+HTML5.0x+1T2017/jump_to/block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6" id="block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6">
+ <div class="subsection-text">
+ <span class="subsection-title">Still Testing Subsection</span>
+
+ <div class="details">
+
+ </div> <!-- /details -->
+ </div> <!-- /subsection-text -->
+ <div class="subsection-actions">
+ </div>
+ </a>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </main>
+ </main>
+ <aside class="course-sidebar layout-col layout-col-a">
+ <div class="section section-tools">
+ <h3 class="hd-6">Course Tools</h3>
+ <ul class="list-unstyled">
+ <li>
+ <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
+ <span class="icon fa fa-bookmark" aria-hidden="true"></span>
+ Bookmarks
+ </a>
+ </li>
+ <li>
+ <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/reviews">
+ <span class="icon fa fa-star" aria-hidden="true"></span>
+ Reviews
+ </a>
+ </li>
+ <li>
+ <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/updates">
+ <span class="icon fa fa-newspaper-o" aria-hidden="true"></span>
+ Updates
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class="section section-dates">
+ <h3 class="hd hd-6 handouts-header">Important Course Dates</h3>
+ <div class="date-summary-container">
+ <div class="date-summary date-summary-todays-date">
+ <span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span>
+ </div>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+</div>
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 0000000000000000000000000000000000000000..cedc8701b85c8e87995620510274eae4a455e835
--- /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 0000000000000000000000000000000000000000..d9af744bee9e607a212f1ff3b9c2c887c6cba407
--- /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 90812cfe3c2475683a403c11404323ad70f4bebe..d68617a2d01ba9c35eb47e1ab1e33cce1dfa5eb9 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
<ul class="list-unstyled">
% for course_tool in course_tools:
<li>
- <a href="${course_tool.url(course_key)}">
+ <a class="course-tool-link" href="${course_tool.url(course_key)}">
<span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
${course_tool.title()}
</a>
@@ -102,3 +102,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif
</div>
</%block>
+
+<%static:webpack entry="CourseHome">
+ new CourseHome({
+ courseToolLink: ".course-tool-link",
+ });
+</%static:webpack>
diff --git a/webpack.config.js b/webpack.config.js
index f6f78bde2ba964d61a0fb2eff6226529165d1ffc..b34e53ce7b94ae89b7b5781bc7b1937d47a1ab12 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',