add unhelpful survey GA4 events

kitsune/sumo/static/sumo/js/ajaxvote.js

@@ -138,6 +138,10 @@ export default function AjaxVote(form, options) {
       // remove the extra message when the survey opens.
       $container.remove();
 
+      // Dispatch a custom "survey-loaded" event to allow other code to add event
+      // listeners to the survey, now that it has been freshly loaded into the DOM.
+      document.dispatchEvent(new CustomEvent("survey-loaded", { bubbles: true }));
+
       $submit.prop('disabled', true);
 
       function validate() {

kitsune/sumo/static/sumo/js/wiki.metrics.js

@@ -20,6 +20,29 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     });
 
+    document.addEventListener("survey-loaded", (event) => {
+      const surveyCloseButton = document.querySelector("#unhelpful-survey .close-button");
+      const surveySubmitButton = document.querySelector('#unhelpful-survey button[type="submit"]');
+
+      function trackCloseEvent(event) {
+        trackEvent("article_unhelpful_survey_close");
+      }
+
+      if (surveySubmitButton) {
+        surveySubmitButton.addEventListener("click", function(event) {
+          trackEvent("article_unhelpful_survey_submit");
+          if (surveyCloseButton) {
+            // After the survey is submitted, we don't want to track the
+            // close of the final message.
+            surveyCloseButton.removeEventListener("click", trackCloseEvent)
+          }
+        });
+      }
+      if (surveyCloseButton) {
+        surveyCloseButton.addEventListener("click", trackCloseEvent);
+      }
+    });
+
     // Track showfor changes in GA.
     if (versionSelect) {
       versionSelect.addEventListener("change", function(event) {

kitsune/wiki/jinja2/wiki/includes/unhelpful_survey.html

@@ -22,6 +22,5 @@
         <div class="sumo-button-wrap align-end">
           <button class="sumo-button button-sm primary-button" type="submit" data-type="submit">{{ _('Submit') }}</button>
         </div>
-
     </form>
 </div>