Send thumbsUp/thumbsDown ratings to Grist telemetry, and refactor. (#303

) Refactoring is to show a disabled state while ratings are being sent, and to show an error message if the sending failed.
gristlabs · Jan 29, 2024 · 95a759b · 95a759b
1 parent 90edb61
commit 95a759b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 36 deletions.
diff --git a/overrides/base.html b/overrides/base.html
@@ -123,49 +123,60 @@
   {%- endif %}
 </div>
 
+<div class="feedback-box">
+  <div class="feedback-box-title">Give Feedback</div>
+  <div class="feedback-box-question">Was this article helpful?</div>
+  <div class="feedback-box-buttons">
+    <button class="feedback-box-button" data-rating="thumbsUp">&#x1F44D;</button>
+    <button class="feedback-box-button" data-rating="thumbsDown">&#x1F44E;</button>
+  </div>
+  <div class="feedback-box-response">
+    Thank you for letting us know!
+  </div>
+</div>
+
 <script>
-  function giveFeedback(event) {
-    document.getElementsByClassName('feedback-box-buttons')[0].style.display = 'none';
-    document.getElementsByClassName('feedback-box-response')[0].style.display = 'block';
-    const page = window.location.href;
-
-    // No formal telemetry endpoint yet, so use /api/log for practice.
-    // Results can still be queried just less systematically.
-    const url = new URL('https://docs.getgrist.com/api/log');
-    // Duplicate info in query parameters so it is logged with URL in case
-    // body isn't logged (hard to test until live on *.getgrist.com).
-    url.searchParams.set('event', event);
-    url.searchParams.set('page', page);
-
-    fetch(url.href, {
+function initFeedbackButtons() {
+  const serverUrl = "https://docs.getgrist.com";
+  const feedbackBox = document.querySelector('.feedback-box');
+  const buttons = document.querySelectorAll('.feedback-box-button');
+  document.querySelector('.feedback-box-buttons').addEventListener('click', giveFeedback);
+
+  async function giveFeedback(event) {
+    const rating = event.target.dataset.rating;
+    if (!rating) { return; }
+    buttons.forEach(b => { b.disabled = true; });
+    try {
+      console.log("Sending rating to " + serverUrl + '/api/telemetry');
+      const resp = await window.fetch(serverUrl + '/api/telemetry', makePayload(rating));
+      if (!resp.ok) { throw new Error(resp.statusText); }
+    } catch (err) {
+      console.warn('Failed to report feedback', err);
+      document.querySelector('.feedback-box-response').textContent = String(err);
+    } finally {
+      buttons.forEach(b => { b.disabled = false; });
+      feedbackBox.classList.add('feedback-submitted');
+    }
+  }
+
+  function makePayload(rating) {
+    const url = window.location.href;
+    return {
       method: 'POST',
       body: JSON.stringify({
-        event,
-        docId: null,
-        page,
-        source: 'support',
+        event: 'ratedHelpCenterArticle',
+        metadata: {full: {url, rating}},
       }),
-      credentials: 'include',
+      credentials: 'same-origin',
       headers: {
         'Content-Type': 'application/json',
         'X-Requested-With': 'XMLHttpRequest',
-      }
-    }).catch(e => {
-      console.warn('Failed to report feedback', e);
-    });
+      },
+    };
   }
+}
+initFeedbackButtons();
 </script>
-<div class="feedback-box">
-  <div class="feedback-box-title">Give Feedback</div>
-  <div class="feedback-box-question">Was this article helpful?</div>
-  <div class="feedback-box-buttons">
-    <div class="feedback-box-button" onclick="javascript:giveFeedback('thumbsUp')">&#x1F44D;</div>
-    <div class="feedback-box-button" onclick="javascript:giveFeedback('thumbsDown')">&#x1F44E;</div>
-  </div>
-  <div class="feedback-box-response" style="display: none;">
-    Thank you for letting us know!
-  </div>
-</div>
 
   {%- endif -%}
 

diff --git a/overrides/css/base.css b/overrides/css/base.css
@@ -458,22 +458,34 @@ html {
   border-radius: 5px;
   padding: 5px 10px;
   cursor: pointer;
+  background-color: transparent;
 }
 
-.feedback-box-button:hover {
+.feedback-box-button:disabled {
+  opacity: 0.5;
+}
+
+.feedback-box-button:hover:enabled {
   background-color: #ccc;
 }
 
-.feedback-box-button:active {
+.feedback-box-button:active:enabled {
   background-color: #aaa;
 }
 
 .feedback-box-response {
+  display: none;
   font-size: 150%;
   color: #888;
   margin: 10px;
 }
 
+.feedback-submitted .feedback-box-buttons {
+  display: none;
+}
+.feedback-submitted .feedback-box-response {
+  display: block;
+}
 
 /***********************************************************************
  * The rest is taken from base.css from mkdocs.