From 1ff13eb69e9b9d4b26339821da4bf7b3a86d5fee Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 3 May 2024 10:51:44 -0700
Subject: [PATCH] Add some click analytics to various DOM elements

---
 .../accordion_step_component.html.erb          |  8 ++++----
 .../controllers/analytics_controller.js        | 18 ++++++++++++++++++
 app/javascript/controllers/index.js            |  4 ++++
 .../controllers/item_selector_controller.js    |  2 +-
 app/views/layouts/application_new.html.erb     |  2 +-
 .../_pickup_destination.html.erb               |  4 +++-
 app/views/patron_requests/login.html.erb       |  4 ++--
 app/views/patron_requests/new.html.erb         |  8 ++++----
 8 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/controllers/analytics_controller.js

diff --git a/app/components/accordion_step_component.html.erb b/app/components/accordion_step_component.html.erb
index 21b3dba73..49041c485 100644
--- a/app/components/accordion_step_component.html.erb
+++ b/app/components/accordion_step_component.html.erb
@@ -6,7 +6,7 @@
       <h2 class="accordion-title fw-semibold fs-5 mb-0">
         <%= title %>
       </h2>
-      <button class="btn btn-link d-none edit-button align-items-center" data-action='click->patronRequest#editForm' aria-controls="<%= id %>">
+      <button class="btn btn-link d-none edit-button align-items-center" data-action="click->patronRequest#editForm analytics#send" data-analytics-category-param="Accordion" data-analytics-action-param="Edit" aria-controls="<%= id %>">
         <i class="bi bi-pencil me-1"></i> Edit
       </button>
     </button>
@@ -20,13 +20,13 @@
         <% if submit? %>
           <div class="mt-3 form-group d-flex justify-content-end gap-1">
             <% if cancel? %>
-              <%= link_to 'Cancel', new_patron_request_path(instance_hrid: @request.instance_hrid, origin_location_code: @request.origin_location_code), class: 'btn btn-outline-primary' %>
+              <%= link_to 'Cancel', new_patron_request_path(instance_hrid: @request.instance_hrid, origin_location_code: @request.origin_location_code), class: 'btn btn-outline-primary', data: { action: 'analytics#send', 'analytics-category-param': 'Request', 'analytics-action-param': 'Cancel' } %>
             <% end %>
-            <%= submit_tag submit_text, class: 'btn btn-primary' %>
+            <%= submit_tag submit_text, class: 'btn btn-primary', data: { action: 'analytics#send', 'analytics-category-param': 'Request', 'analytics-action-param': 'Submit' } %>
           </div>
         <% else %>
           <div class="mt-3 d-flex justify-content-end gap-1">
-            <button class="btn btn-primary" type="button" data-action="click->patronRequest#nextStep">Continue</button>
+            <button class="btn btn-primary" type="button" data-action="click->patronRequest#nextStep analytics#send" data-analytics-category-param="Accordion" data-analytics-action-param="Continue">Continue</button>
           </div>
         <% end %>
       </div>
diff --git a/app/javascript/controllers/analytics_controller.js b/app/javascript/controllers/analytics_controller.js
new file mode 100644
index 000000000..2a9758e48
--- /dev/null
+++ b/app/javascript/controllers/analytics_controller.js
@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [];
+  static values = { field: String, asc: Boolean };
+
+  connect() { }
+
+
+  // Send event in required GA4 format to Google
+  send({ params: { action, category, label, value } }) {
+    window.gtag && window.gtag('event', action, {
+      event_category: category,
+      event_label: label,
+      event_value: value
+    });  
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index f0781e8f5..d711e030e 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -15,3 +15,7 @@ application.register("itemselector", ItemSelectorController)
 
 import TableController from "./table_controller"
 application.register("table", TableController)
+
+
+import AnalyticsController from "./analytics_controller"
+application.register("analytics", AnalyticsController)
diff --git a/app/javascript/controllers/item_selector_controller.js b/app/javascript/controllers/item_selector_controller.js
index 8bc97a966..4241ef17d 100644
--- a/app/javascript/controllers/item_selector_controller.js
+++ b/app/javascript/controllers/item_selector_controller.js
@@ -147,7 +147,7 @@ export default class extends Controller {
               ${item.label}
             </small>
             <span class="vr"></span>
-            <button data-action="${this.identifier}#unchecked" data-${this.identifier}-id-param="${item.id}" type="button" class="btn-close py-1 pill-close" aria-label="Remove ${item.label}"></button>
+            <button data-action="${this.identifier}#unchecked analytics#send" data-analytics-category-param="Item Selector" data-analytics-action-param="Remove" data-${this.identifier}-id-param="${item.id}" type="button" class="btn-close py-1 pill-close" aria-label="Remove ${item.label}"></button>
           </span>
           ${item.duequeueinfo && !scan ? `<span class="text-cardinal d-block align-self-center flex-shrink-2">${item.duequeueinfo}</span>` : ''}
         </li>
diff --git a/app/views/layouts/application_new.html.erb b/app/views/layouts/application_new.html.erb
index f26bd5e2f..199e6021a 100644
--- a/app/views/layouts/application_new.html.erb
+++ b/app/views/layouts/application_new.html.erb
@@ -26,7 +26,7 @@
     <%= javascript_include_tag "application_redesign", "data-turbo-track": "reload", defer: true %>
   </head>
 
-  <body class="d-flex flex-column min-vh-100">
+  <body class="d-flex flex-column min-vh-100" data-controller="analytics">
     <header>
       <%= render 'shared/sul_header' %>
     </header>
diff --git a/app/views/patron_requests/_pickup_destination.html.erb b/app/views/patron_requests/_pickup_destination.html.erb
index b93113d2c..8736eb9fe 100644
--- a/app/views/patron_requests/_pickup_destination.html.erb
+++ b/app/views/patron_requests/_pickup_destination.html.erb
@@ -9,7 +9,9 @@
         include_blank: false, required: false,
     },
     data: {
-        action: 'change->patronRequest#updateEarliestAvailable',
+        action: 'change->patronRequest#updateEarliestAvailable analytics#send',
+        'analytics-category-param': 'Pickup',
+        'analytics-action-param': 'Select service point',
     },
     aria: {
         controls: 'earliestAvailableContainer',
diff --git a/app/views/patron_requests/login.html.erb b/app/views/patron_requests/login.html.erb
index 9b268bb97..e6f272a3e 100644
--- a/app/views/patron_requests/login.html.erb
+++ b/app/views/patron_requests/login.html.erb
@@ -39,7 +39,7 @@
                         <i class="bi bi-box-arrow-up-right"></i> Learn about library card holder access
                     </a>
                 </p>
-                <details>
+                <details data-action="analytics#send" data-analytics-action-param="Library ID" data-analytics-category-param="Login">
                     <summary class="btn btn-link p-0">Login with Library ID/PIN <i class="bi bi-chevron-right"></i></summary>
                     <%= form_tag login_by_university_id_url, method: 'POST', class: 'form p-3', data: { turbo: false } do %>
                         <%= hidden_field_tag :referrer, new_patron_request_path(new_params.merge(step: 'select')) %>
@@ -80,7 +80,7 @@
                 <p class="mb-2"><a href="https://library.stanford.edu/visitor-access" target="_blank">
                     <i class="bi bi-box-arrow-up-right"></i> Learn more about visitor access
                 </a></p>
-                <details>
+                <details data-action="analytics#send" data-analytics-action-param="Library ID" data-analytics-category-param="Login">
 
                     <summary class="btn btn-link p-0<% if Ability.anonymous.cannot? :prepare, @patron_request %> disabled<%end %>">Proceed as visitor <i class="bi bi-chevron-right"></i></summary>
                     <% if Ability.anonymous.can? :prepare, @patron_request %>
diff --git a/app/views/patron_requests/new.html.erb b/app/views/patron_requests/new.html.erb
index eab4d81d5..413932d4d 100644
--- a/app/views/patron_requests/new.html.erb
+++ b/app/views/patron_requests/new.html.erb
@@ -110,7 +110,7 @@
         <% if f.object.items_in_location.length >= 10 %>
           <div>
             <label for="item-selector-search" class="my-2">Search item list</label>
-            <input id="item-selector-search" type="search" incremental data-action="input->itemselector#filter" class="form-control w-75" />
+            <input id="item-selector-search" type="search" incremental data-action="input->itemselector#filter analytics#send" data-analytics-category-param="Item Selector" data-analytics-action-param="Filter" class="form-control w-75" />
           </div>
         <% end %>
         <div class="item-table my-4">
@@ -118,10 +118,10 @@
             <thead>
               <tr>
                 <th data-table-target="header" aria-sort="ascending" class="text-start" data-table-field-param="Callnumber" data-action='click->table#sort'>
-                  <button type="button" class="btn btn-link pe-0 text-decoration-none text-black">Call number</button>
+                  <button type="button" class="btn btn-link pe-0 text-decoration-none text-black" data-action="analytics#send" data-analytics-category-param="Item Selector" data-analytics-action-param="Sort/Call number">Call number</button>
                 </th>
                 <th data-table-target="header" class="text-end" data-table-field-param="Status" data-action='click->table#sort'>
-                  <button type="button" class="btn btn-link pe-0 text-decoration-none text-black">Status</button>
+                  <button type="button" class="btn btn-link pe-0 text-decoration-none text-black" data-action="analytics#send" data-analytics-category-param="Item Selector" data-analytics-action-param="Sort/Status">Status</button>
                 </th>
               </tr>
             </thead>
@@ -215,7 +215,7 @@
     <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true" data-itemSelector-target="toast">
       <div class="d-flex">
         <div class="toast-body">You successfully removed an item.</div>
-        <button type="button" class="btn btn-text text-uppercase" data-action="itemselector#undo">Undo</button>
+        <button type="button" class="btn btn-text text-uppercase" data-action="itemselector#undo analytics#send" data-analytics-category-param="Item Selector" data-analytics-action-param="Undo">Undo</button>
         <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
     </div>