Update item-view event, improve analytics debouncing

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;