Update item-view event, improve analytics debouncing

In terms of quality of data, the current event style wasn't super useful since it spread the collections out into separate categories.

This change makes separate events for each collection found, with the `category` field being updated.  This way in GA we can count within each collection.

Also, the way debouncing was working to help keep down the number of duplicate calls wasn't sufficient in most cases.  This is because the debounce method doesn't care about whether the calls are actually duplicate just that they are being triggered in quick succession.  So we were getting some lost events and still some duplicated.

This commit sets up a simple debouncing-cache that has short-lived cache entries that are checked against incoming events to decide whether to block or not.

src/js/components/analytics.js

@@ -82,10 +82,58 @@ define(['underscore', 'jquery'], function (_, $) {
     }
   }
 
+  const CACHE_TIMEOUT = 300;
+  /**
+   * Simple debouncing mechanism with caching
+   * this will store stringified version of the incoming events and provide a way to
+   * check if the event has recently been cached.  With a short rolling timer to keep the timeout short to hopefully
+   * only target duplicate calls.
+   */
+  class AnalyticsCacher {
+    constructor() {
+      this.timer = null;
+      this.cache = new Set();
+    }
+
+    stringify(args) {
+      return JSON.stringify(args, function (key, value) {
+
+        // filter out this cache-buster id added by GTM
+        if (key === 'gtm.uniqueEventId') {
+          return undefined;
+        }
+        return value;
+      });
+    }
+
+    add(...args) {
+      this._resetTimeout();
+      return this.cache.add(this.stringify(args));
+    }
+
+    has(...args) {
+      return this.cache.has(this.stringify(args));
+    }
+
+    _resetTimeout() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(this._clear.bind(this), CACHE_TIMEOUT);
+    }
+
+    _clear() {
+      this.cache.clear();
+    }
+  }
+
+  const cacher = new AnalyticsCacher();
   const Analytics = function (action, event, type, description, ...args) {
-    adsLogger.apply(null, _.rest(arguments, 3));
+    if (cacher.has(arguments)) {
+      return;
+    }
 
+    cacher.add(arguments);
 
+    adsLogger.apply(null, _.rest(arguments, 3));
     // if the action is send and the event is event, then we want to send the event to the dataLayer
     if (Array.isArray(window.dataLayer) &&
       action === 'send' && event === 'event'
@@ -116,12 +164,60 @@ define(['underscore', 'jquery'], function (_, $) {
     }
   };
 
-  // expose a function to send custom events
-  Analytics.push = (data) => Array.isArray(window.dataLayer) && window.dataLayer.push(data);
-  Analytics.reset = () => Array.isArray(window.dataLayer) && (window.dataLayer.push(function () {
-    this.reset();
-  }));
+  /**
+   * Get the datalayer for sending events to
+   * @returns {*|*[]}
+   */
+  Analytics.getDL = () => {
+    if (window.dataLayer && Array.isArray(window.dataLayer)) {
+      return window.dataLayer;
+    }
+    return [];
+  }
+
+  /**
+   * Push a new object to the datalayer
+   * @param {Object} data
+   */
+  Analytics.push = (data) => {
+    if (cacher.has(data)) {
+      return;
+    }
+    cacher.add(data);
+    Analytics.getDL().push(data);
+  }
+
+  /**
+   * Reset the datalayer
+   */
+  Analytics.reset = () => {
+    Analytics.getDL().push(function() {
+      this.reset();
+    });
+  }
+
+  /**
+   * set a value on the datalayer
+   * @param {string} property
+   * @param {unknown} value
+   */
+  Analytics.set = (property, value) => {
+    Analytics.getDL().push(function() {
+      this.set(property, value);
+    });
+  }
 
+  /**
+   * get a value on the datalayer
+   * @param {string} property
+   */
+  Analytics.get = (property) => {
+    let value;
+    Analytics.getDL().push(function() {
+      value = this.get(property);
+    });
+    return value;
+  }
 
   return Analytics;
 });

src/js/components/navigator.js

@@ -35,8 +35,6 @@ define([
   var APP_TITLE = 'NASA/ADS';
   var TITLE_SEP = ' - ';
 
-  const FIELDS_TO_SEND = ['bibcode', 'database', 'bibstem', 'property', 'resultsIndex'];
-
   // This function is used to hash the user id before sending it to Analytics
   const digestMessage = function (message) {
     const crypto = window.crypto || window.msCrypto;
@@ -94,32 +92,46 @@ define([
     }, 500),
 
     _onCustomEvent: function (ev, data) {
+      console.log('Custom Event', ev, data);
 
       switch (ev) {
         case 'update-document-title':
           this._updateDocumentTitle(data);
           break;
-        case 'latest-abstract-data':
-          this._debouncedAnalyticsCall({
-            event: 'view_item',
-            items: [
-              {
-                item_id: data.bibcode,
-                item_name: data.title,
-                ...data.database.slice(1).reduce(
-                  (acc, cat, idx) => ({
-                    ...acc,
-                    [`item_category${idx + 1}`]: cat,
-                  }),
-                  {item_category: data.database[0]},
-                ),
-                index: data.resultsIndex,
-                property: data.property,
-                refereed: data.property.includes('REFEREED'),
-              },
-            ],
-          });
+        case 'latest-abstract-data': {
+          if (Array.isArray(data.database)) {
+            analytics.set('items', undefined);
+            data.database.forEach((database) => {
+              // do not debounce here, since we want multiple
+              analytics.push({
+                event: 'view_item',
+                items: [
+                  {
+                    item_id: data.bibcode,
+                    item_name: data.title,
+                    item_category: database,
+                    index: data.resultsIndex,
+                    refereed: data.property.includes('REFEREED'),
+                  },
+                ],
+              });
+            });
+          } else {
+            this._debouncedAnalyticsCall({
+              event: 'view_item',
+              items: [
+                {
+                  item_id: data.bibcode,
+                  item_name: data.title,
+                  item_category: '(no collection)',
+                  index: data.resultsIndex,
+                  refereed: data.property.includes('REFEREED'),
+                },
+              ],
+            });
+          }
           break;
+        }
         case 'search-page-results':
           // clear items array on the data layer
           this._debouncedAnalyticsCall({
@@ -141,7 +153,6 @@ define([
                 item_list_name: 'Search Results',
                 item_variant: 'search_result_item',
                 index: doc.resultsIndex,
-                property: doc.property,
                 refereed: doc.property.includes('REFEREED'),
               };
             }),

src/js/widgets/abstract/widget.js

@@ -325,6 +325,7 @@ define([
       this._docs = {};
       this.maxAuthors = MAX_AUTHORS;
       this.isFetchingAff = false;
+      this.listenTo(this.model, 'change:abstract', this._onAbstractLoaded);
     },
 
     activate: function(beehive) {
@@ -431,11 +432,6 @@ define([
           'update-document-title',
           this._docs[bibcode].title
         );
-        ps.publish(
-          ps.CUSTOM_EVENT,
-          'latest-abstract-data',
-          this._docs[bibcode]
-        );
       }
       this.updateState(this.STATES.IDLE);
     },
@@ -561,6 +557,14 @@ define([
       }
     },
 
+    _onAbstractLoaded: function() {
+      const doc = this.model.toJSON();
+      const ps = this.getPubSub();
+      if (ps && doc) {
+        ps.publish(ps.CUSTOM_EVENT, 'latest-abstract-data', doc);
+      }
+    },
+
     processResponse: function(apiResponse) {
       var r = apiResponse.toJSON();
       var self = this;