Merge pull request #379 from MITLibraries/use-504

USE-504: Adding tab tracking to event names

Author: djanelle-mit

app/javascript/matomo_tracking.js

@@ -5,8 +5,8 @@
 //
 // CLICK TRACKING
 // Add `data-matomo-click="Category, Action, Name"` to any element to track
-// clicks as Matomo events. The Name segment is optional. We have a convention 
-// of using semicolons inside Name to divide multiple values.
+// clicks as Matomo events. We have a convention of using semicolons inside Name 
+// to divide multiple values. This is purely for consistency.
 //
 // This tracking can be placed directly on an interactive element.
 // Tracking also works if placed on a container. The script will look
@@ -16,22 +16,22 @@
 //
 // Examples:
 //   <a href="/file.pdf" data-matomo-click="Downloads, PDF Click, My Paper">Download</a>
-//   <button data-matomo-click="Search, Boolean Toggle">AND/OR</button>
+//   <button data-matomo-click="Search, Boolean Toggle, Off">AND/OR</button>
 //
 // Event delegation on `document` means this works for elements loaded
 // asynchronously (Turbo frames, content-loader, etc.) without re-binding.
 //
 // SEEN TRACKING
 // Add `data-matomo-seen="Category, Action, Name"` to any element to fire a
-// Matomo event when that element becomes visible in the viewport. The Name
-// segment is optional. We have a convention of using semicolons inside Name 
-// to divide multiple values. Each element fires at most once per page load.
+// Matomo event when that element becomes visible in the viewport. We have  
+// a convention of using semicolons inside Name to divide multiple values. 
+// Each element fires at most once per page load.
 // Works for elements present on initial page load and for elements injected
 // later by Turbo frames or async content loaders.
 //
 // Examples:
 //   <div data-matomo-seen="Impressions, Result Card, Alma">...</div>
-//   <a data-matomo-seen="Promotions, Banner Shown">...</a>
+//   <a data-matomo-seen="Promotions, Banner Shown, Banner Type">...</a>
 //
 // DYNAMIC VALUES
 // Wrap a helper name in double curly braces anywhere inside a segment to have

app/views/layouts/_site_header.html.erb

@@ -1,4 +1,4 @@
-<div class="institute-bar" data-matomo-seen="Navigation, Header Links Seen" data-matomo-click="Navigation, Header Links Engaged, Link: {{getElementText}}">
+<div class="institute-bar" data-matomo-seen="Navigation, Header Links Seen, Tab: {{getActiveTabName}}" data-matomo-click="Navigation, Header Links Engaged, Link: {{getElementText}}">
   <div class="wrapper">
     <a class="link-logo-mit" href="https://www.mit.edu" ><span class="sr">MIT Logo</span>
       <img src="https://cdn.libraries.mit.edu/files/branding/local/mit_logo_std_rgb_white.svg" height="24" alt="MIT logo" >
@@ -26,5 +26,5 @@
       <% end %>
     </header>
     <%= render partial: 'search/form' unless Feature.enabled?(:geodata) %>
-  </div>  
+  </div>
 </div>

app/views/layouts/application.html.erb

@@ -11,7 +11,7 @@
       <%= render partial: "layouts/global_alert" %>
 
       <%= render partial: "layouts/site_header" %>
-      
+
       <div class="wrap-outer-content layout-band">
         <div class="wrap-content">
           <%= render partial: "layouts/flash" %>
@@ -22,7 +22,7 @@
         </div>
       </div>
 
-      <footer data-matomo-seen="Navigation, Footer Links Seen" data-matomo-click="Navigation, Footer Links Engaged, Link: {{getElementText}}">
+      <footer data-matomo-seen="Navigation, Footer Links Seen, Tab: {{getActiveTabName}}" data-matomo-click="Navigation, Footer Links Engaged, Link: {{getElementText}}">
         <%= render partial: "layouts/libraries_footer" %>
         <%= render partial: "layouts/institute_footer" %>
       </footer>

app/views/search/_form.html.erb

@@ -8,30 +8,32 @@
     <input id="tab-to-target" type="hidden" name="tab" value="<%= @active_tab %>">
     <button type="submit" class="btn button-primary">Search</button>
   </div>
-  <div class="search-actions"  data-matomo-click="Search, Advanced Search Engaged">
+  <div class="search-actions"  data-matomo-click="Search, Advanced Search Engaged, Tab: {{getActiveTabName}}">
     <a href="https://libraries.mit.edu/search-advanced">Advanced search</a>
   </div>
 </form>
 
 <% if Feature.enabled?(:boolean_picker) %>
   <aside class="panel panel-info">
     <div class="panel-heading">
-  <% if cookies[:boolean_type].present? %>
-    <p>Your boolean preference for this session is: <%= cookies[:boolean_type] %></p>
-  <% else %>
-    <p>No preference is set. Default boolean preference (`AND`) is enabled.</p>
-  <% end %>
+      <p>
+        <% if cookies[:boolean_type].present? %>
+          Your boolean preference for this session is: <%= cookies[:boolean_type] %>
+        <% else %>
+          No preference is set. Default boolean preference (`AND`) is enabled.
+        <% end %>
+      </p>
     </div>
     <div class="panel-body">
       <p>Change to:</p>
       <ul>
-      <% ENV.fetch('BOOLEAN_OPTIONS', 'AND,OR').split(',').each do |opt| %>
-        <li><%= link_to(opt, boolpref_path(boolean_type: opt)) %></li>
-      <% end %>
+        <% ENV.fetch('BOOLEAN_OPTIONS', 'AND,OR').split(',').each do |opt| %>
+          <li><%= link_to(opt, boolpref_path(boolean_type: opt)) %></li>
+        <% end %>
         <li><%= link_to('Clear preference', boolpref_path()) %></li>
       </ul>
     </div>
-    </aside>
+  </aside>
 <% end %>
 
 <%= render partial: 'search/source_tabs' if params[:q].present? %>

app/views/search/_results_callouts.html.erb

@@ -1,4 +1,4 @@
-<div class="callout-wrapper" data-track-content data-content-name="Search Suggestions" data-matomo-seen="Search Suggestions, Search Suggestions Seen" data-matomo-click="Search Suggestions, Search Suggestions Engaged, Link: {{getElementText}}">
+<div class="callout-wrapper" data-track-content data-content-name="Search Suggestions" data-matomo-seen="Search Suggestions, Search Suggestions Seen, Tab: {{getActiveTabName}}" data-matomo-click="Search Suggestions, Search Suggestions Engaged, Link: {{getElementText}}">
   <% if ['cdi', 'alma', 'all'].include?(@active_tab) %>
     <%= render partial: "results_callout_component", locals: {
       fa_name: 'magnifying-glass',

app/views/search/_results_sidebar.html.erb

@@ -1,6 +1,6 @@
 <aside id="results-sidebar">
   <%= render partial: "results_callouts" %>
-  <div class="core-sidebar-items" data-track-content data-content-name="Sidebar Links" data-matomo-seen="Sidebar Links, Sidebar Links Seen" data-matomo-click="Sidebar Links, Sidebar Links Engaged, Link: {{getElementText}}">
+  <div class="core-sidebar-items" data-track-content data-content-name="Sidebar Links" data-matomo-seen="Sidebar Links, Sidebar Links Seen, Tab: {{getActiveTabName}}" data-matomo-click="Sidebar Links, Sidebar Links Engaged, Link: {{getElementText}}">
     <div>
       <i class="fa-light fa-message"></i>
       <div>

app/views/search/results.html.erb

@@ -10,7 +10,7 @@
   <%= render(partial: 'trigger_tacos') if tacos_enabled? %>
 
   <%= turbo_frame_tag "search-results", data: { turbo_action: "advance" } do %>
-    <div id="results-section" data-matomo-seen="Search, Search Performed">
+    <div id="results-section" data-matomo-seen="Search, Search Performed, Tab: {{getActiveTabName}}">
 
       <% if @show_primo_continuation %>
 

app/views/tacos/analyze.html.erb

@@ -1,5 +1,5 @@
 <% if @suggestions.present? && !Feature.enabled?(:geodata) %>
-  <div id="hint" aria-live="polite" data-matomo-seen="Interventions, Intervention Shown" data-track-content data-content-name="Intervention">
+  <div id="hint" aria-live="polite" data-matomo-seen="Interventions, Intervention Shown, Tab: {{getActiveTabName}}" data-track-content data-content-name="Intervention">
     <aside class="mitlib-suggestion-panel">
       <div class="panel-content">
         <h2 class="panel-type">Suggested resource</h2>

app/views/thirdiron/browzine.html.erb

@@ -1,7 +1,7 @@
 <% if ThirdIron.enabled? && @browzine.present? %>
   <% if @browzine[:browzine_link].present? %>
     <div class="libkey-actions">
-      <%= link_to @browzine[:browzine_link][:text], @browzine[:browzine_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, Browzine Link Seen", matomo_click: "Results, Browzine Link Engaged, Link: {{getElementText}}", content_piece: @browzine[:browzine_link][:text] } %>
+      <%= link_to @browzine[:browzine_link][:text], @browzine[:browzine_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, Browzine Link Seen, Tab: {{getActiveTabName}}", matomo_click: "Results, Browzine Link Engaged, Link: {{getElementText}}", content_piece: @browzine[:browzine_link][:text] } %>
     </div>
   <% end %>
 <% end %>

app/views/thirdiron/libkey.html.erb

@@ -1,22 +1,22 @@
 <% if ThirdIron.enabled? && @libkey.present? %>
   <% if @libkey[:pdf_link].present? || @libkey[:html_link].present? %>
     <% if @libkey[:pdf_link].present? %>
-      <%= link_to( @libkey[:pdf_link][:text], @libkey[:pdf_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:pdf_link][:text] } ) %>
+      <%= link_to( @libkey[:pdf_link][:text], @libkey[:pdf_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen, Tab: {{getActiveTabName}}", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:pdf_link][:text] } ) %>
     <% end %>
 
     <% if @libkey[:html_link].present? %>
-      <%= link_to( @libkey[:html_link][:text], @libkey[:html_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:html_link][:text] } ) %>
+      <%= link_to( @libkey[:html_link][:text], @libkey[:html_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen, Tab: {{getActiveTabName}}", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:html_link][:text] } ) %>
     <% end %>
 
   <%# If we don't have direct links, fall back to best_integrator_link. This allows for things like Article Galaxy links %>
   <% elsif @libkey[:best_integrator_link].present? %>
-    <%= link_to( @libkey[:best_integrator_link][:text], @libkey[:best_integrator_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:best_integrator_link][:text] } ) %>
+    <%= link_to( @libkey[:best_integrator_link][:text], @libkey[:best_integrator_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, LibKey Link Seen, Tab: {{getActiveTabName}}", matomo_click: "Results, LibKey Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:best_integrator_link][:text] } ) %>
   <% end %>
 
   <%# Display browzine link if available. This should always display if we have it regardless of other links. %>
   <% if @libkey[:browzine_link].present? %>
     <div class="libkey-actions">
-      <%= link_to @libkey[:browzine_link][:text], @libkey[:browzine_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, Browzine Link Seen", matomo_click: "Results, Browzine Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:browzine_link][:text] } %>
+      <%= link_to @libkey[:browzine_link][:text], @libkey[:browzine_link][:link], class: 'button libkey-link', data: { matomo_seen: "Results, Browzine Link Seen, Tab: {{getActiveTabName}}", matomo_click: "Results, Browzine Link Engaged, Link: {{getElementText}}", content_piece: @libkey[:browzine_link][:text] } %>
     </div>
   <% end %>