Merge 067e216 into 82c6211

adsabs · Feb 5, 2024 · 72e708e · 72e708e
2 parents 82c6211 + 067e216
commit 72e708e
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 236 deletions.
diff --git a/src/config/common.config.js b/src/config/common.config.js
@@ -49,37 +49,7 @@ define([], function () {
     'polyfill',
     'js/dark-mode-switch',
   ], function (config) {
-    // rca: not sure why the ganalytics is loaded here instead of inside analytics.js
-    //      perhaps it is because it is much/little sooner this way?
-
-    // make sure that google analytics never blocks app load
-    setTimeout(function () {
-      require(['google-analytics', 'analytics'], function (_, analytics) {
-        // set ganalytics debugging
-        //window.ga_debug = {trace: true};
-        analytics(
-          'create',
-          config.googleTrackingCode || '',
-          config.googleTrackingOptions,
-        );
-
-        // if we ever want to modify what experiment/variant the user
-        // is going to receive, it has to happen here - by modifying the
-        // _gaexp cookie -- but at this stage we haven't yet downloaded
-        // optimize AND we haven't setup any of our api calls
-
-        // example that sets the variant 2 of the experiment
-        // document.cookie = '_gaexp=GAX1.1.WFD4u8V3QkaI5EcZ969yeQ.18459.2;';
-
-        if (config.googleOptimizeCode) {
-          analytics('require', config.googleOptimizeCode);
-          if (!config.debugExportBBB)
-            console.warn(
-              'AB testing will be loaded, but bbb object is not exposed. Change debugExportBBB if needed.',
-            );
-        }
-      });
-    }, 0);
+    // stub here to make sure these load before the main app
   });
 
   // set up handlebars helpers

diff --git a/src/index.html b/src/index.html
@@ -63,19 +63,21 @@
     </style>
   </noscript>
   <script src="https://www.google.com/recaptcha/api.js?render=6LcpTuUnAAAAAD6YCBdr_2-0b1AH8N6nXkYEG5G5"></script>
-  <!-- Google tag (gtag.js) -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-X07MS2584V"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-
-    function gtag() {
-      dataLayer.push(arguments);
-    }
-
-    gtag('js', new Date());
-
-    gtag('config', 'G-X07MS2584V');
-  </script>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({
+      'gtm.start':
+        new Date().getTime(), event: 'gtm.js',
+    });
+    var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src =
+      'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', 'GTM-NT2453N');</script>
+  <!-- End Google Tag Manager -->
 </head>
 
 <body>
@@ -90,8 +92,11 @@
       >
     </p>
   </div>
+  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NT2453N"
+          height="0" width="0" style="display:none;visibility:hidden"></iframe>
 </noscript>
 
+
 <!--items for announcement of new page, and optional skip to main content link go here (inserted by master.js)-->
 
 <div id="app-container">
@@ -153,7 +158,7 @@ <h3 id="basic-html-message">
     var progressBar = document.getElementById('loading-screen-progress');
     var message = document.getElementById('loading-screen-message');
     var progressInner = document.querySelector(
-      '#loading-screen-progress>span'
+      '#loading-screen-progress>span',
     );
     var progressValue = 0;
 

diff --git a/src/js/components/analytics.js b/src/js/components/analytics.js
@@ -1,4 +1,4 @@
-define(['underscore', 'jquery'], function(_, $) {
+define(['underscore', 'jquery'], function (_, $) {
   /*
    * Set of targets
    * each has a set of hooks which coorespond to the event label passed
@@ -34,8 +34,8 @@ define(['underscore', 'jquery'], function(_, $) {
    * @param {string} url
    * @param {object} data
    */
-  var sendEvent = function(url) {
-    $.ajax({ url: url, type: 'GET' });
+  var sendEvent = function (url) {
+    $.ajax({url: url, type: 'GET'});
   };
 
   /**
@@ -46,12 +46,12 @@ define(['underscore', 'jquery'], function(_, $) {
    * @param {string} label - the event label
    * @param {object} data - the event data
    */
-  var adsLogger = function(label, data) {
+  var adsLogger = function (label, data) {
     // if label or data is not present, do nothing
     if (_.isString(label) && _.isPlainObject(data) && _.has(data, 'target')) {
-      _.forEach(TARGETS, function(val) {
+      _.forEach(TARGETS, function (val) {
         var target = null;
-        _.forEach(val.types, function(type) {
+        _.forEach(val.types, function (type) {
           if (_.isArray(type)) {
             if (type[0] === data.target && _.has(type[1], 'redirectTo')) {
               target = type[1].redirectTo;
@@ -63,7 +63,7 @@ define(['underscore', 'jquery'], function(_, $) {
 
         // send event if we find a hook and the target is in the list of types
         if (_.contains(val.hooks, label) && target) {
-          var params = _.assign({}, data, { target: target });
+          var params = _.assign({}, data, {target: target});
           sendEvent(data.url ? data.url : val.url(params));
         }
       });
@@ -73,31 +73,34 @@ define(['underscore', 'jquery'], function(_, $) {
   var buffer = [];
   var gaName = window.GoogleAnalyticsObject || 'ga';
 
-  var cleanBuffer = function() {
+  var cleanBuffer = function () {
     if (window[gaName]) {
-      for (var i=0; i<buffer.length; i++) {
+      for (var i = 0; i < buffer.length; i++) {
         window[gaName].apply(this, buffer[i]);
       }
       buffer = []
     }
   }
 
-  var Analytics = function() {
+  const Analytics = function (action, event, type, description, ...args) {
     adsLogger.apply(null, _.rest(arguments, 3));
-
-    if (window[gaName]) {
-      if (buffer.length > 0)
-        cleanBuffer()
-      window[gaName].apply(this, arguments);
-      return true;
-    }
-    else {
-      console.log('Buffering GA signal', arguments);
-      buffer.push(arguments);
-      setTimeout(cleanBuffer, 1000);
-      return false;
+
+    // if the action is send and the event is event, then we want to send the event to the dataLayer
+    if (
+      action === 'send' &&
+      event === 'event' &&
+      Array.isArray(window.dataLayer)
+    ) {
+      // some events are 'interaction' or 'error', so add that to the event name
+      window.dataLayer.push({
+        event: `${type}_${description}`,
+
+        // if the next argument is an object, we'll use that as the data, ignore an extra arguments
+        value1: args[0],
+        value2: args[1],
+        value3: args[2],
+      });
     }
-
   };
 
   return Analytics;

diff --git a/src/js/react/Recommender/components/App.jsx.js b/src/js/react/Recommender/components/App.jsx.js
@@ -6,31 +6,31 @@ define([
   '../actions',
   'es6!./RecommendedList.jsx',
   'es6!./SearchExamples.jsx',
-], function(
+], function (
   React,
-  { Nav, NavItem },
+  {Nav, NavItem},
   PropTypes,
-  { useDispatch, useSelector },
-  { setTab, emitAnalytics },
+  {useDispatch, useSelector},
+  {setTab, emitAnalytics},
   RecommendedList,
-  SearchExamples
+  SearchExamples,
 ) {
   const selector = (state) => ({
     tab: state.tab,
   });
 
   const App = () => {
     const dispatch = useDispatch();
-    const { tab } = useSelector(selector);
+    const {tab} = useSelector(selector);
     const onSelected = (key) => {
       dispatch(setTab(key));
       dispatch(
         emitAnalytics([
           'send',
           'event',
-          'interaction.main-page',
+          'interaction', 'main-page',
           key === 1 ? 'recommender' : 'help',
-        ])
+        ]),
       );
     };
 
@@ -63,8 +63,8 @@ define([
             Search examples
           </NavItem>
         </Nav>
-        <div style={{ minHeight: 200, padding: '1rem 0' }}>
-          {tab === 1 ? <RecommendedList /> : <SearchExamples />}
+        <div style={{minHeight: 200, padding: '1rem 0'}}>
+          {tab === 1 ? <RecommendedList/> : <SearchExamples/>}
         </div>
       </div>
     );

diff --git a/src/js/react/Recommender/components/RecommendedList.jsx.js b/src/js/react/Recommender/components/RecommendedList.jsx.js
@@ -1,10 +1,10 @@
-define(['react', 'prop-types', 'react-redux', '../actions'], function(
+define(['react', 'prop-types', 'react-redux', '../actions'], function (
   React,
   PropTypes,
-  { useSelector, useDispatch },
-  { getRecommendations, emitAnalytics }
+  {useSelector, useDispatch},
+  {getRecommendations, emitAnalytics},
 ) {
-  const Paper = ({ title, bibcode, author, totalAuthors, onClick }) => {
+  const Paper = ({title, bibcode, author, totalAuthors, onClick}) => {
     const el = React.useRef(null);
     React.useEffect(() => {
       if (el.current) {
@@ -18,7 +18,7 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
     }, []);
 
     return (
-      <li style={{ marginTop: '1rem' }}>
+      <li style={{marginTop: '1rem'}}>
         <a href={`#/abs/${bibcode}/abstract`} ref={el}>
           {title}
         </a>
@@ -36,7 +36,8 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
     bibcode: '',
     author: [],
     totalAuthors: 0,
-    onClick: () => {},
+    onClick: () => {
+    },
   };
 
   Paper.propTypes = {
@@ -47,7 +48,7 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
     onClick: PropTypes.func,
   };
 
-  const Message = ({ children }) => (
+  const Message = ({children}) => (
     <div
       style={{
         display: 'flex',
@@ -96,7 +97,7 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
       getDocsRequest,
       docs,
       queryParams,
-      userName // eslint-disable-line
+      userName, // eslint-disable-line
     } = useSelector(selector);
 
     React.useEffect(() => {
@@ -113,26 +114,26 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
           emitAnalytics([
             'send',
             'event',
-            'interaction.no-recommendation', // category
+            'interaction', 'no-recommendation', // category
             'no-useful-recommendations', // action
             '', // label,
             0, // value
-          ])
+          ]),
         );
         reported = true;
       }
     });
 
-    const onPaperSelect = ({ bibcode }, index) => {
+    const onPaperSelect = ({bibcode}, index) => {
       dispatch(
         emitAnalytics([
           'send',
           'event',
-          'interaction.recommendation', // category
+          'interaction', 'recommendation', // category
           queryParams.function, // action
           bibcode, // label,
           index, // value
-        ])
+        ]),
       );
     };
 
@@ -143,7 +144,7 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
       return (
         <Message>
           <span>
-            <i className="fa fa-spinner fa-spin" aria-hidden="true" />{' '}
+            <i className="fa fa-spinner fa-spin" aria-hidden="true"/>{' '}
             Loading...
           </span>
         </Message>
@@ -183,7 +184,7 @@ define(['react', 'prop-types', 'react-redux', '../actions'], function(
     return (
       <div>
         <ul className="list-unstyled">
-          {docs.map(({ title, bibcode, author, totalAuthors }, index) => (
+          {docs.map(({title, bibcode, author, totalAuthors}, index) => (
             <Paper
               key={bibcode}
               title={title}

diff --git a/src/js/react/Recommender/components/SearchExamples.jsx.js b/src/js/react/Recommender/components/SearchExamples.jsx.js
@@ -4,27 +4,27 @@ define([
   'react-redux',
   '../models/index',
   '../actions',
-], function(
+], function (
   React,
   PropTypes,
-  { useDispatch },
-  { searchExamples },
-  { updateSearchBar, emitAnalytics }
+  {useDispatch},
+  {searchExamples},
+  {updateSearchBar, emitAnalytics},
 ) {
-  const Dl = ({ children }) => {
+  const Dl = ({children}) => {
     return <dl className="dl-horizontal">{children}</dl>;
   };
 
   Dl.propTypes = {
     children: PropTypes.element.isRequired,
   };
 
-  const Entry = ({ label, text, onClick, tooltip }) => {
+  const Entry = ({label, text, onClick, tooltip}) => {
     return (
       // eslint-disable-next-line react/jsx-fragments
       <React.Fragment>
         <dt>{label}</dt>
-        <dd style={{ display: 'flex' }}>
+        <dd style={{display: 'flex'}}>
           <button type="button" onClick={onClick} className="text-link">
             {text}
           </button>
@@ -44,7 +44,8 @@ define([
     label: '',
     text: '',
     tooltip: '',
-    onClick: () => {},
+    onClick: () => {
+    },
   };
 
   Entry.propTypes = {
@@ -58,7 +59,9 @@ define([
     const dispatch = useDispatch();
     const onClick = (text) => {
       dispatch(updateSearchBar(text));
-      dispatch(emitAnalytics(['send', 'event', 'interaction.suggestion-used']));
+      dispatch(
+        emitAnalytics(['send', 'event', 'interaction', 'suggestion-used']),
+      );
     };
 
     const generateRandom = (max) => {