Add feedback analytics (#939)

Add analytics for the thumbs up/down feedback buttons on cards. Update the analytics on direct answer cards to include additional event attributes that are consistent with those for results cards. J=SLAP-1545 TEST=manual Smoke testing to see if clicking feedback buttons on each card sent the correct analytics event and displayed the feedback submission message
yext · Sep 3, 2021 · 77948f2 · 77948f2
1 parent 43595aa
commit 77948f2
Show file tree

Hide file tree

Showing 39 changed files with 281 additions and 82 deletions.
diff --git a/cards/card_component.js b/cards/card_component.js
@@ -26,6 +26,8 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
         })
       );
     }
+
+    this.addFeedbackListeners();
 
     const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
     if (rtfElement) {
@@ -34,6 +36,36 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     }
   }
 
+  addFeedbackListeners() {
+    const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm';
+    let feedbackFormEl = this._container.querySelector(feedbackFormSelector);
+    if (feedbackFormEl) {
+      // For WCAG compliance, the feedback should be a submittable form
+      feedbackFormEl.addEventListener('submit', (e) => {
+        const formTargetEl = e.target;
+        const isGood = formTargetEl.querySelector('input:checked').value === 'true';
+
+        this.reportQuality(isGood);
+        this.updateState({
+          feedbackSubmitted: true
+        });
+      });
+
+      let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+      if (thumbSelectorEls) {
+        thumbSelectorEls.forEach(el => {
+          el.addEventListener('click', (e) => {
+            let input = el.querySelector('input');
+            if (input) {
+              input.checked = true;
+            }
+            HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit');
+          });
+        });
+      }
+    }
+  }
+
   setState(data) {
     const { _raw, ...derivedFields } = this.result;
     const profile = { ..._raw };
@@ -48,7 +80,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
       cardData.titleEventOptions = updatedEventOptions;
     }
 
-    let { details, showMoreDetails } = cardData;
+    const { details, showMoreDetails } = cardData;
 
     const cardDetails = details || '';
     const cardShowMoreConfig = showMoreDetails || {};
@@ -58,7 +90,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     // The card's details must extend past this limit as well for the toggling to be enabled.
     const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit;
 
-    let truncatedDetails = showExcessDetailsToggle
+    const truncatedDetails = showExcessDetailsToggle
       ? `${cardDetails.substring(0, showMoreLimit)}...`
       : '';
 
@@ -80,6 +112,42 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     }
   }
 
+  /**
+   * reportQuality will send the quality feedback to analytics
+   * @param {boolean} isGood true if the answer is what you were looking for
+   */
+  reportQuality(isGood) {
+    /**
+     * EventTypes are explicit strings defined
+     * for what the server expects for analytics.
+     *
+     * @enum
+     */
+    const EventTypes = {
+      THUMBS_UP: 'THUMBS_UP',
+      THUMBS_DOWN: 'THUMBS_DOWN'
+    };
+    const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN;
+    const event = new ANSWERS.AnalyticsEvent(eventType)
+      .addOptions({
+        directAnswer: false,
+        verticalKey: this.verticalKey,
+        searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL',
+        entityId: this.result.id
+      });
+
+    this.analyticsReporter.report(event);
+  }
+
+  /**
+   * updateState enables for partial updates (the delta between the old and new)
+   * @type {object} The new state to apply to the old
+   */
+  updateState (state = {}) {
+    const newState = Object.assign({}, this.getState(), state);
+    this.setState(newState);
+  }
+
   addDefaultEventOptions(eventOptions = {}) {
     return Object.assign({}, {
         verticalKey: this.verticalKey,

diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
@@ -1,5 +1,5 @@
 <div class="{{cardType}}-feedbackWrapper">
-  <div class="{{cardType}}-feedback">
+  <div class="{{cardType}}-feedbackContent">
     {{#if feedbackSubmitted}}
       <div class="{{cardType}}-feedbackText">
         {{feedbackTextOnSubmission}}
@@ -11,7 +11,13 @@
         </div>
       {{/if}}
       <div class="{{cardType}}-thumbsWrapper">
-        <form class="HitchhikerCard-thumbs js-HitchhikerCard-feedbackForm">
+        <form
+          {{#if directAnswer}}
+            class="HitchhikerCard-thumbs js-HitchhikerDirectAnswerCard-feedbackForm"
+          {{else}}
+            class="HitchhikerCard-thumbs js-HitchhikerCard-feedbackForm"
+          {{/if}}
+        >
           <fieldset class="HitchhikerCard-fieldset">
             <label class="HitchhikerCard-thumb">
               <span class="HitchhikerCard-thumbUpIcon">
@@ -20,7 +26,12 @@
               <input type="radio"
                 name="feedback"
                 value="true"
-                class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerCard-thumbInput">
+                {{#if directAnswer}}
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerDirectAnswerCard-thumbInput"
+                {{else}}
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerCard-thumbInput"
+                {{/if}}
+              >
               <span class="sr-only">
                 {{positiveFeedbackSrText}}
               </span>
@@ -32,7 +43,12 @@
               <input type="radio"
                 name="feedback"
                 value="false"
-                class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerCard-thumbInput">
+                {{#if directAnswer}}
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerDirectAnswerCard-thumbInput"
+                {{else}}
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerCard-thumbInput"
+                {{/if}}
+              >
               <span class="sr-only">
                 {{negativeFeedbackSrText}}
               </span>

diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
@@ -10,7 +10,7 @@
       <div class="HitchhikerDocumentStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerDocumentStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerDocumentStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
@@ -52,7 +52,7 @@
         </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
@@ -39,7 +39,7 @@
         </div>
       {{/if}}
       {{#if card.feedback}}
-        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
       {{/if}}
     </div>
   </div>

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -22,7 +22,7 @@
       <div class="HitchhikerFinancialProfessionalLocation-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
@@ -10,7 +10,7 @@
       <div class="HitchhikerJobStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
@@ -6,7 +6,7 @@
       {{> details }}
       <div class="HitchhikerLinkStandard-actions">
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -27,7 +27,7 @@
       <div class="HitchhikerLocationStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
@@ -20,7 +20,7 @@
         </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
@@ -52,7 +52,7 @@
           </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
@@ -39,7 +39,7 @@
         </div>
       {{/if}}
       {{#if card.feedback}}
-        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
       {{/if}}
     </div>
   </div>

diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
@@ -22,7 +22,7 @@
       <div class="HitchhikerFinancialProfessionalLocation-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
@@ -10,7 +10,7 @@
       <div class="HitchhikerJobStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
@@ -6,7 +6,7 @@
       {{> details }}
       <div class="HitchhikerLinkStandard-actions">
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
@@ -27,7 +27,7 @@
       <div class="HitchhikerLocationStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
@@ -20,7 +20,7 @@
           </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs
@@ -15,7 +15,7 @@
         {{> details }}
         <div class="HitchhikerProductProminentImage-actions">
           {{#if card.feedback}}
-            {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+            {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
           {{/if}}
         </div>
       </div>

diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
@@ -8,7 +8,7 @@
       <div class="HitchhikerProductProminentImage-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+          {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
@@ -7,7 +7,7 @@
   {{> content }}
   <div class="HitchhikerProductProminentVideo-actions">
     {{#if card.feedback}}
-      {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+      {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
     {{/if}}
   </div>
 </div>

diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs
@@ -17,7 +17,7 @@
           </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs
@@ -22,7 +22,7 @@
       <div class="HitchhikerProfessionalLocation-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+          {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs
@@ -12,7 +12,7 @@
       <div class="HitchhikerProfessionalStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs
@@ -10,7 +10,7 @@
       <div class="HitchhikerStandard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs
@@ -15,7 +15,7 @@
         {{> details }}
         <div class="HitchhikerProductProminentImageClickable-actions">
           {{#if card.feedback}}
-            {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable"}}
+            {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable" feedbackSubmitted=feedbackSubmitted}}
           {{/if}}
         </div>
       </div>

diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs
@@ -8,7 +8,7 @@
       <div class="HitchhikerProductProminentImage-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+          {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs
@@ -8,7 +8,7 @@
   <div class="HitchhikerProductProminentVideo-actions">
     {{> ctas }}
     {{#if card.feedback}}
-      {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+      {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
     {{/if}}
   </div>
 </div>

diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs
@@ -17,7 +17,7 @@
           </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+          {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs
@@ -22,7 +22,7 @@
       <div class="HitchhikerProfessionalLocation-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+          {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>