diff --git a/guide-feedback.js b/guide-feedback.js index 6d303dec..ba271020 100644 --- a/guide-feedback.js +++ b/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. + */