From 2376bbb4bedeff171cd3cdc1298da2a896769698 Mon Sep 17 00:00:00 2001
From: aamir-khan <aamir@edx.org>
Date: Tue, 13 Oct 2015 18:06:53 +0500
Subject: [PATCH] ECOM-2430: Added the tracking GA events on dashboard

---
 lms/static/js/dashboard/track_events.js       | 82 +++++++++++++++++++
 .../js/fixtures/dashboard/dashboard.html      | 22 +++++
 .../js/spec/dashboard/track_events_spec.js    | 77 +++++++++++++++++
 lms/static/js/spec/main.js                    |  1 +
 .../dashboard/_dashboard_course_listing.html  | 18 ++--
 5 files changed, 191 insertions(+), 9 deletions(-)
 create mode 100644 lms/static/js/dashboard/track_events.js
 create mode 100644 lms/static/js/fixtures/dashboard/dashboard.html
 create mode 100644 lms/static/js/spec/dashboard/track_events_spec.js

diff --git a/lms/static/js/dashboard/track_events.js b/lms/static/js/dashboard/track_events.js
new file mode 100644
index 0000000000..55b5b467d1
--- /dev/null
+++ b/lms/static/js/dashboard/track_events.js
@@ -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);
diff --git a/lms/static/js/fixtures/dashboard/dashboard.html b/lms/static/js/fixtures/dashboard/dashboard.html
new file mode 100644
index 0000000000..f92d0bc018
--- /dev/null
+++ b/lms/static/js/fixtures/dashboard/dashboard.html
@@ -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>
diff --git a/lms/static/js/spec/dashboard/track_events_spec.js b/lms/static/js/spec/dashboard/track_events_spec.js
new file mode 100644
index 0000000000..8f70e12f95
--- /dev/null
+++ b/lms/static/js/spec/dashboard/track_events_spec.js
@@ -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);
diff --git a/lms/static/js/spec/main.js b/lms/static/js/spec/main.js
index 01bbb5c0c5..fef5af93a9 100644
--- a/lms/static/js/spec/main.js
+++ b/lms/static/js/spec/main.js
@@ -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',
diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html
index 10f66f91ad..cc11f75ee5 100644
--- a/lms/templates/dashboard/_dashboard_course_listing.html
+++ b/lms/templates/dashboard/_dashboard_course_listing.html
@@ -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}">