Problem: G4 analytics does not track pageviews from clicks in full-width treeview

[fiver-watson]

Current Behavior

First reported in the user forum, 2023-06-06: https://groups.google.com/g/ica-atom-users/c/8c2QkRNitsU/m/2NFkJgVdBAAJ

Lacking the right tools, I have not reproduced this locally - though the logic of the report makes sense and it's worth investigating what options there are to potentially address it.

The full-width treeview uses AJAX to perform partial page loads, so that the current treeview position can be maintained while the body of the record view page can be updated based on the current node selection in the treeview. This is very different from how the older sidebar treeview works, where each node click performs a full request/response and page reload.

One consequence of this difference, as reported in the forum, is that the G4 Google Analytics module does not capture different node clicks in the full-width treeview as individual page clicks, so no analytics information is captured for any descriptions viewed within the same hierarchy.

Steps to reproduce the behavior

1. Log into AtoM as an administrator
2. Navigate to Admin > Settings > Treeview and set the treeview type to sidebar
3. Save and log out
4. Get a G4A tracking code via Google
5. Add it to the config/app.yml file in the appropriate spot, as described in the documentation
6. Clear the cache and restart PHP-FPM
7. Wait ~24hrs or so for the analytics to begin reporting realtime data
8. Open your analytics page so you can monitor results as they happen
9. Open AtoM in a web browser as a public user and navigate to an archival unit with descendants
10. Use the sidebar treeview to navigate - confirm you can see page view data in the Analytics dashboard as you navigate around
11. Log into AtoM as an Admin
12. Via the settings, change the treeview type to "Full-width", save, and log out again
13. Repeat steps 8-10 but this time using the full-width treeview to navigate the descendants

Expected Behavior

• Individual description page views should ideally be captured by web analytics tools like G4A when using the full-width treeview to navigate the descendants in an archival unit

Possible Solution

No response

Context and Notes

No response

Version used

AtoM 2.7.2

Operating System and version

No response

Default installation culture

No response

PHP version

PHP 7.4

Contact details

No response

[Mbtj]

Fix requires use of manual page view events with gtag.

[anvit]

Moving this back to refining to see if while we investigate this. Also, adding a docs issue to our backlog for the next release to make sure we've properly documented how to use G4 tags in AtoM, as well as adding a note about tracking page views when there aren't full page reloads (as is the case with Full width tree view)

[melaniekung]

First test now that data tracking has been enabled on https://melanie.analyst.accesstomemory.net/
Enabled data tracking by adding G4 Tracking ID to config/app.yml which automatically renders G4 Tracking script in app/qubit/templates/_footer.php

G4 Tracking before test:

Clicked through each of the treeview pages at least twice each:

Will check again later/tomorrow for updates

[melaniekung]

Day 1 of testing:

Also tested "1st Coniston Wolf Cub Pack" and its descendant "Item 1 - Records of the 1st Coniston Wolf Cub Pack, Group Charter 84, Local Association of Sudbury, Ontario"

Day 2 of testing:

Will conclude that I might have refreshed on Publications and Memoribilia (from Jim Heldmann fonds) since those were present early in testing. Since "Item 1 - Records of the 1st Coniston Wolf Cub Pack, Group Charter 84, Local Association of Sudbury, Ontario", "Programs", and "Personal accounts" were not tracked, can confirm that G4 Google Analytics module does not capture different node clicks in the full-width treeview as individual page clicks.

[melaniekung]

Day 3 of testing:

added the following changes to melanie-atom's js/fullWidthTreeView.js to track page views on treeview nodes

diff --git a/js/fullWidthTreeView.js b/js/fullWidthTreeView.js
index f5c1e6920..a02b25ae1 100644
--- a/js/fullWidthTreeView.js
+++ b/js/fullWidthTreeView.js
@@ -187,6 +187,22 @@
         // Insert new content into page
         $('#main-column h1').first().replaceWith($(response.find('#main-column h1').first()));
 
+       // Get new document title for G4 Tracking
+        var doctitle = $('#main-column h1').first()
+
+        // Create a temporary element to parse the HTML
+        var tempElement = document.createElement('div');
+        tempElement.innerHTML = doctitle[0].outerHTML;
+
+        // Extract the text content without HTML tags
+        var textContent = tempElement.textContent;
+
+       // Manually send page_view events for G4 Tracking
+        gtag('event', 'page_view', {
+                page_title: textContent,
+                page_location: url
+        });
+
         // Add empty breadcrumb section if current page has none, but response does

[melaniekung]

Mon Sep 25:

Clicked through all of these child items

Tue Sep 26:

Results on GA the next day:

[Looking South result might have been to page refresh as that was the page i left open]

clicking through all of the same child items with more interaction on pages (click through carousel, add to clipboard, toggle access copies)

[melaniekung]

Update

Bug was a result of fullwidth treeview not updating document title so GA was receiving incorrect information. Once we updated the document title, the correct information is sent to GA for tracking.