[GA4] Emit page_helpful events for page feedback (#1726)

CHANGELOG.md

@@ -24,19 +24,26 @@ For the full list of changes, see the [release][0.8.0] notes.
 
 **Breaking changes**:
 
+- **Page feedback**, or [User feedback]:
+  - In support of projects configuring analytics outside of Docsy, feedback
+    functionality is enabled regardless of whether
+    `site.Config.Services.GoogleAnalytics.ID` is set ([#1727]).
+  - Feedback-event attribute changes ([#1726]):
+    - Event `name` is `page_helpful`rather than`click`
+    - Event `value` for "yes" is 100 by default, rather than 1, allowing for
+      more response options in the future. To override the default set
+      `params.ui.feedback.max_value`.
 - SCSS: `@function prepend()` and file `assets/scss/support/_functions.scss`
   have been dropped. Instead use the more general SASS/SCSS list `join()`
   function ([#1385]).
-- **Page feedback**, or [User feedback]: in support of projects configuring
-  analytics outside of Docsy, feedback functionality will be enabled regardless
-  of whether `site.Config.Services.GoogleAnalytics.ID` is set.
-  - TBC
 
 **New**:
 
 **Other changes**:
 
 [#1385]: https://github.com/google/docsy/issues/1385
+[#1726]: https://github.com/google/docsy/pull/1726
+[#1727]: https://github.com/google/docsy/pull/1727
 [0.8.0]: https://github.com/google/docsy/releases/v0.8.0/#FIXME
 [User feedback]:
   https://www.docsy.dev/docs/adding-content/feedback/#user-feedback

layouts/partials/feedback.html

@@ -37,21 +37,18 @@ <h2 class="feedback--title">{{- i18n "feedback_title" -}}</h2>
     noButton.disabled = true;
   };
   const sendFeedback = (value) => {
-    if (typeof ga !== 'function') return;
-    const args = {
-      command: 'send',
-      hitType: 'event',
-      category: 'Helpful',
-      action: 'click',
-      label: window.location.pathname,
-      value: value
-    };
-    ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+    if (typeof gtag !== 'function') return;
+    gtag('event', 'page_helpful', {
+      'event_category': 'Helpful',
+      'event_label': window.location.pathname,
+      'value': value
+    });
   };
   yesButton.addEventListener('click', () => {
     yesResponse.classList.add('feedback--response__visible');
     disableButtons();
-    sendFeedback(1);
+    {{ $maxValue := .max_value | default 100 -}}
+    sendFeedback({{ $maxValue }});
   });
   noButton.addEventListener('click', () => {
     noResponse.classList.add('feedback--response__visible');

userguide/content/en/docs/adding-content/feedback.md

@@ -94,7 +94,7 @@ of every documentation page, as shown in Figure 1.
 </figure>
 
 After clicking **Yes** the user should see a response like Figure 2. You can
-[configure] the response text in the project's [configuration file] `hugo.toml`.
+[configure] the response text in your project's [configuration file].
 
 <figure>
   <img src="/images/yes.png"
@@ -185,6 +185,10 @@ params:
 
 3.  Save the edits to your configuration file.
 
+By default, Docsy emits an event value of 100 when a user clicks "yes". You can
+change this value by setting `params.ui.feedback.max_value` to a positive
+integer. Docsy uses 0 for "no" events.
+
 ### Access the feedback data
 
 This section assumes basic familiarity with Google Analytics. For example, you