guide-feedback.js

@@ -12,11 +12,37 @@
 (function () {
   'use strict';
 
+  /*
+   * Central collection via a Google Form.
+   * To turn it on, create a Google Form with two "short answer" questions
+   * (one for the page, one for the answer), then fill in the three values
+   * below. See the setup notes at the bottom of this file. Until they are
+   * filled in, votes are simply not sent anywhere central.
+   */
+  var GOOGLE_FORM = {
+    action: '',        // e.g. 'https://docs.google.com/forms/d/e/1FAIpQL.../formResponse'
+    pageField: '',     // e.g. 'entry.123456789'  (the "Page" question)
+    helpfulField: ''   // e.g. 'entry.987654321'  (the "Helpful?" question)
+  };
+
   function sendVote(slug, value) {
-    // Optional central collection hook. Left as a no-op for the static site.
-    // Example: navigator.sendBeacon('/feedback', new Blob([JSON.stringify({ slug: slug, value: value })], { type: 'application/json' }));
+    var lang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
+    var pageLabel = lang ? slug + ' (' + lang + ')' : slug;
+
+    if (GOOGLE_FORM.action && GOOGLE_FORM.pageField && GOOGLE_FORM.helpfulField) {
+      try {
+        var body = new URLSearchParams();
+        body.append(GOOGLE_FORM.pageField, pageLabel);
+        body.append(GOOGLE_FORM.helpfulField, value);
+        // no-cors: Google Forms does not return CORS headers, so we cannot read
+        // the response, but the submission is recorded.
+        fetch(GOOGLE_FORM.action, { method: 'POST', mode: 'no-cors', body: body });
+      } catch (e) {}
+    }
+
+    // Also fires a Plausible analytics event if Plausible happens to be present.
     if (typeof window.plausible === 'function') {
-      try { window.plausible('Guide feedback', { props: { page: slug, value: value } }); } catch (e) {}
+      try { window.plausible('Guide feedback', { props: { page: pageLabel, value: value } }); } catch (e) {}
     }
   }
 
@@ -59,3 +85,29 @@
     init();
   }
 })();
+
+/*
+ * ---------------------------------------------------------------------------
+ * How to turn on Google Form collection
+ * ---------------------------------------------------------------------------
+ * 1. Go to forms.google.com and create a new blank form (e.g. "Guide feedback").
+ * 2. Add two questions, both of type "Short answer":
+ *      - Question 1 title: Page
+ *      - Question 2 title: Helpful
+ *    (Titles do not matter to the code, only the field IDs below.)
+ * 3. Click the three-dot menu (top right) > "Get pre-filled link".
+ *    Type any text in both boxes (e.g. "x" and "yes"), click "Get link",
+ *    then "Copy link". Paste it somewhere; it looks like:
+ *      https://docs.google.com/forms/d/e/1FAIpQL.../viewform?usp=pp_url&entry.111111=x&entry.222222=yes
+ * 4. From that link read off:
+ *      - GOOGLE_FORM.action     = the URL up to and including "/formResponse"
+ *                                 (replace the "/viewform..." part with "/formResponse")
+ *      - GOOGLE_FORM.pageField  = the entry.NNNN before "=x"   (the Page box)
+ *      - GOOGLE_FORM.helpfulField = the entry.NNNN before "=yes" (the Helpful box)
+ * 5. Paste those three values into the GOOGLE_FORM object near the top of this
+ *    file and commit. Responses appear in the form's "Responses" tab and, if you
+ *    click the Sheets icon there, in a live Google Sheet with charts.
+ *
+ * The "Page" value sent is the page slug plus language, e.g.
+ * "student-residence-permit (mk)", so you can see which page and language.
+ */