[REV-1205] Add ecommerce event tracking to course sock and track selection upsell links (#24562)

lms/templates/course_modes/_upgrade_button.html

@@ -10,10 +10,10 @@ from openedx.core.djangolib.markup import HTML, Text
 <li class="action action-select">
     <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
     % if content_gating_enabled or course_duration_limit_enabled:
-        <button type="submit" name="verified_mode">
+        <button id="track_selection_upgrade" type="submit" name="verified_mode">
             <span>${_('Pursue the Verified Track')}</span>
     % else:
-        <button type="submit" name="verified_mode">
+        <button id="track_selection_upgrade" type="submit" name="verified_mode">
             <span>${_('Pursue a Verified Certificate')}</span>
     % endif
         % if price_before_discount:
@@ -22,4 +22,15 @@ from openedx.core.djangolib.markup import HTML, Text
         (<span class="upgrade-price-string">${currency_symbol}${min_price} ${currency}</span>)
         % endif
         </button>
-</li>
+</li>
+
+<%static:require_module_async module_name="js/commerce/track_ecommerce_events" class_name="TrackECommerceEvents">
+var upgradeLink = $("#track_selection_upgrade");
+
+TrackECommerceEvents.trackUpsellClick(upgradeLink, 'track_selection', {
+    pageName: "track_selection",
+    linkType: "button",
+    linkCategory: "(none)"
+});
+
+</%static:require_module_async> 

lms/templates/courseware/courseware.html

@@ -277,6 +277,7 @@ ${HTML(fragment.foot_html())}
   var fbeLink = $("#FBE_banner");
   var welcomeLink = $("#welcome");
   var accessDeniedUpsellLink = $("#accessDeniedUpsell");
+  var sockLink = $("#sock");
 
   TrackECommerceEvents.trackUpsellClick(fbeLink, 'in_course_audit_access_expires', {
       pageName: "in_course",
@@ -296,4 +297,10 @@ ${HTML(fragment.foot_html())}
     linkCategory: "(none)"
   });
 
+  TrackECommerceEvents.trackUpsellClick(sockLink, 'in_course_sock', {
+      pageName: "in_course",
+      linkType: "button",
+      linkCategory: "green_upgrade"
+  });
+
 </%static:require_module_async>

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

@@ -195,6 +195,7 @@ from openedx.features.course_experience.course_tools import HttpMethod
   var personalizedLearnerSchedulesLink = $(".personalized_learner_schedules_button");
   var fbeLink = $("#FBE_banner");
   var welcomeLink = $("#welcome");
+  var sockLink = $("#sock");
 
     TrackECommerceEvents.trackUpsellClick(personalizedLearnerSchedulesLink, 'course_home_upgrade_shift_dates', {
       pageName: "course_home",
@@ -214,4 +215,10 @@ from openedx.features.course_experience.course_tools import HttpMethod
       linkCategory: "welcome"
     });
 
+    TrackECommerceEvents.trackUpsellClick(sockLink, 'course_home_sock', {
+      pageName: "course_home",
+      linkType: "button",
+      linkCategory: "green_upgrade"
+    });
+
 </%static:require_module_async>

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

@@ -58,7 +58,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                     </div>
                 % endif
                 <img class="mini-cert" alt="Example Certificate Image" src="${static.url('course_experience/images/verified-cert.png')}"/>
-                <a href="${upgrade_url}">
+                <a id="sock" href="${upgrade_url}">
                     <div class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
                         ${Text(_('Upgrade ({course_price})')).format(course_price=HTML(course_price))}
                     </div>

themes/edx.org/lms/templates/course_modes/_upgrade_button.html

@@ -10,10 +10,10 @@ from openedx.core.djangolib.markup import HTML, Text
 <li class="action action-select">
     <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
     % if content_gating_enabled or course_duration_limit_enabled:
-        <button type="submit" name="verified_mode">
+        <button id="track_selection_upgrade" type="submit" name="verified_mode">
             <span>${_('Pursue the Verified Track')}</span>
     % else:
-        <button type="submit" name="verified_mode">
+        <button id="track_selection_upgrade" type="submit" name="verified_mode">
             <span>${_('Pursue a Verified Certificate')}</span>
     % endif
         % if price_before_discount:
@@ -22,4 +22,15 @@ from openedx.core.djangolib.markup import HTML, Text
         (<span class="upgrade-price-string">$${min_price} USD</span>)
         % endif
         </button>
-</li>
+</li>
+
+<%static:require_module_async module_name="js/commerce/track_ecommerce_events" class_name="TrackECommerceEvents">
+var upgradeLink = $("#track_selection_upgrade");
+
+TrackECommerceEvents.trackUpsellClick(upgradeLink, 'track_selection', {
+    pageName: "track_selection",
+    linkType: "button",
+    linkCategory: "(none)"
+});
+
+</%static:require_module_async>