From 20ae698e13f5e92b35891849dea3414f859937fc Mon Sep 17 00:00:00 2001 From: Tim Hostetler <6970899+thostetler@users.noreply.github.com> Date: Sun, 17 Mar 2024 01:18:39 -0400 Subject: [PATCH] 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 | 108 ++++++++++++++++++++++++++++-- src/js/components/navigator.js | 57 +++++++++------- src/js/widgets/abstract/widget.js | 14 ++-- 3 files changed, 145 insertions(+), 34 deletions(-) diff --git a/src/js/components/analytics.js b/src/js/components/analytics.js index fe486dbf2..70a2ec559 100644 --- a/src/js/components/analytics.js +++ b/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; }); diff --git a/src/js/components/navigator.js b/src/js/components/navigator.js index 0892e134a..368c8d783 100644 --- a/src/js/components/navigator.js +++ b/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'), }; }), diff --git a/src/js/widgets/abstract/widget.js b/src/js/widgets/abstract/widget.js index ee245938b..f42e8ce8c 100644 --- a/src/js/widgets/abstract/widget.js +++ b/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;