Merge pull request #2382 from sul-dlss/analytics

Add some click analytics to various DOM elements
sul-dlss · May 3, 2024 · 8005ec9 · 8005ec9
2 parents d571049 + 1ff13eb
commit 8005ec9
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -35,7 +35,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')) %>
@@ -76,7 +76,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
@@ -106,18 +106,18 @@
         <% 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">
           <table class="table mb-0 border" data-controller="table" data-table-field-value="Callnumber" data-table-asc-value="true">
             <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>
@@ -212,7 +212,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>