Add eventing to course home upgrade paths.

lms/djangoapps/courseware/date_summary.py

@@ -314,7 +314,6 @@ class CourseEndDate(DateSummary):
                 )
 
 
-
 class CertificateAvailableDate(DateSummary):
     """
     Displays the certificate available date of the course.
@@ -431,7 +430,9 @@ class VerifiedUpgradeDeadlineDate(DateSummary):
                     platform_name=settings.PLATFORM_NAME,
                     button_panel=HTML(
                         '<div class="message-actions">'
-                        '<a class="btn btn-upgrade" href="{upgrade_url}">{upgrade_label}</a>'
+                        '<a class="btn btn-upgrade"'
+                        'data-creative="original_message" data-position="course_message"'
+                        'href="{upgrade_url}">{upgrade_label}</a>'
                         '</div>'
                     ).format(
                         upgrade_url=self.link,

lms/djangoapps/courseware/tests/test_date_summary.py

@@ -547,7 +547,6 @@ class TestDateAlerts(SharedModuleStoreTestCase):
                 self.assertEqual(len(messages), 0)
 
 
-
 @attr(shard=1)
 class TestScheduleOverrides(SharedModuleStoreTestCase):
 

lms/envs/common.py

@@ -2592,7 +2592,6 @@ MAX_FAILED_LOGIN_ATTEMPTS_LOCKOUT_PERIOD_SECS = 15 * 60
 TIME_ZONE_DISPLAYED_FOR_DEADLINES = 'UTC'
 
 
-
 ########################## VIDEO IMAGE STORAGE ############################
 
 VIDEO_IMAGE_SETTINGS = dict(

openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html

@@ -49,7 +49,7 @@
                         </ul>
 
                         <div class="vc-cta vc-fade vc-polite-only">
-                            <a class="btn btn-upgrade" href="#">Upgrade ($100)</a>
+                            <a class="btn btn-upgrade" data-creative="original_hero" data-position="hero" href="#">Upgrade ($100)</a>
                         </div>
                     </div>
                 </div>

openedx/features/course_experience/static/course_experience/js/CourseHome.js

@@ -44,6 +44,7 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
 
     $(document).ready(() => {
       this.configureUpgradeMessage();
+      this.configureUpgradeAnalytics();
     });
   }
 
@@ -56,6 +57,25 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
     window.analytics.track(event, properties);
   }
 
+  // Promotion analytics for upgrade messages on course home.
+  // eslint-disable-next-line class-methods-use-this
+  configureUpgradeAnalytics() {
+    $('.btn-upgrade').each(
+      (index, button) => {
+        const promotionEventProperties = {
+          promotion_id: 'courseware_verified_certificate_upsell',
+          creative: $(button).data('creative'),
+          name: 'In-Course Verification Prompt',
+          position: $(button).data('position'),
+        };
+        CourseHome.fireSegmentEvent('Promotion Viewed', promotionEventProperties);
+        $(button).click(() => {
+          CourseHome.fireSegmentEvent('Promotion Clicked', promotionEventProperties);
+        });
+      },
+    );
+  }
+
   /**
    * Persists the collapsed state of the upgrade message. If the message is collapsed,
    * this information is persisted to local storage. Expanding the message *removes* the
@@ -75,14 +95,7 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
     const $vcMessage = $('.vc-message');
     const $vcDismissToggle = $('.vc-toggle', $vcMessage);
     const logEventProperties = { courseRunKey: this.courseRunKey };
-    const promotionEventProperties = {
-      promotion_id: 'courseware_verified_certificate_upsell',
-      creative: 'hero_matthew_smith',
-      name: 'In-Course Verification Prompt',
-      position: 'hero',
-    };
 
-    CourseHome.fireSegmentEvent('Promotion Viewed', promotionEventProperties);
     Logger.log('edx.course.upgrade.hero.displayed', logEventProperties);
 
     // Get height of container and button
@@ -130,7 +143,6 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
     });
 
     $('.btn-upgrade', $vcMessage).click(() => {
-      CourseHome.fireSegmentEvent('Promotion Clicked', promotionEventProperties);
       Logger.log('edx.course.upgrade.hero.clicked', logEventProperties);
     });
   }

openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js

@@ -50,7 +50,7 @@ describe('Course Home factory', () => {
   describe('Upgrade message events', () => {
     const segmentEventProperties = {
       promotion_id: 'courseware_verified_certificate_upsell',
-      creative: 'hero_matthew_smith',
+      creative: 'original_hero',
       name: 'In-Course Verification Prompt',
       position: 'hero',
     };

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -82,7 +82,10 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                             </ul>
 
                             <div class="vc-cta vc-fade vc-polite-only">
-                                <a class="btn-upgrade" href="${ upgrade_url }">${_("Upgrade ({price})").format(price=upgrade_price)}</a>
+                                <a class="btn-upgrade"
+                                   href="${ upgrade_url }"
+                                   data-creative="hero_matthew_smith"
+                                   data-position="hero">${_("Upgrade ({price})").format(price=upgrade_price)}</a>
                             </div>
                         </div>
                     </div>

openedx/features/course_experience/templates/course_experience/course-sock-fragment.html

@@ -56,7 +56,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                 </div>
                 <img class="mini-cert" src="${static.url('course_experience/images/verified-cert.png')}"/>
                 <a href="${upgrade_url}">
-                    <button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate">
+                    <button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
                         Upgrade (${HTML(course_price)})
                     </button>
                 </a>