feat(analytics): global analytics for modal and dynamic tabs

Author: jeffchew

.yarn/offline-mirror/@carbon-ibmdotcom-services-1.1.0-alpha.743.tgz

@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@carbon/ibmdotcom-services": "1.1.0-alpha.743",
+    "@carbon/ibmdotcom-services": "1.1.0-alpha.762",
     "@carbon/ibmdotcom-styles": "1.0.0",
-    "@carbon/ibmdotcom-utilities": "1.1.0-alpha.743",
+    "@carbon/ibmdotcom-utilities": "1.1.0-alpha.762",
     "autosuggest-highlight": "^3.1.1",
     "classnames": "2.2.6",
     "react-autosuggest": "^9.4.3",

.yarn/offline-mirror/@carbon-ibmdotcom-services-1.1.0-alpha.762.tgz

@@ -11,6 +11,7 @@ import {
   settings as ddsSettings,
   ipcinfoCookie,
 } from '@carbon/ibmdotcom-utilities';
+import { globalInit } from '@carbon/ibmdotcom-utilities';
 import { settings } from 'carbon-components';
 import { TranslationAPI } from '@carbon/ibmdotcom-services';
 import classNames from 'classnames';
@@ -32,6 +33,11 @@ const Footer = ({ type }) => {
   const [footerMenuData, setFooterMenuData] = useState([]);
   const [footerLegalData, setFooterLegalData] = useState([]);
 
+  useEffect(() => {
+    // initialize global execution calls
+    globalInit();
+  }, []);
+
   useEffect(() => {
     (async () => {
       const response = await TranslationAPI.getTranslation();

.yarn/offline-mirror/@carbon-ibmdotcom-services-1.1.0-alpha.763.tgz

@@ -28,6 +28,12 @@ jest.mock('@carbon/ibmdotcom-services', () => ({
     getLocale: jest.fn(() => Promise.resolve({ cc: 'us', lc: 'en' })),
     getList: jest.fn(() => Promise.resolve({})),
   },
+  DDOAPI: {
+    setVersion: jest.fn(),
+  },
+  AnalyticsAPI: {
+    initAll: jest.fn(),
+  },
 }));
 
 describe('<Footer />', () => {

.yarn/offline-mirror/@carbon-ibmdotcom-utilities-1.1.0-alpha.739.tgz

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
 import { settings } from 'carbon-components';
 import root from 'window-or-global';
-import { init } from '../../global';
+import { globalInit } from '@carbon/ibmdotcom-utilities';
 import { User20, UserOnline20 } from '@carbon/icons-react';
 import { IbmLogo } from '../Icon';
 import {
@@ -49,7 +49,7 @@ const Masthead = ({ navigation, hasProfile, hasSearch, ...mastheadProps }) => {
 
   useEffect(() => {
     // initialize global execution calls
-    init();
+    globalInit();
   }, []);
 
   useEffect(() => {

.yarn/offline-mirror/@carbon-ibmdotcom-utilities-1.1.0-alpha.762.tgz

@@ -34,7 +34,7 @@
     "jsdoc": "rimraf docs && jsdoc -c ./jsdoc.json ./README.md"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-utilities": "1.1.0-alpha.743",
+    "@carbon/ibmdotcom-utilities": "1.1.0-alpha.762",
     "axios": "^0.19.0",
     "jsonp": "^0.2.1",
     "window-or-global": "^1.0.1"

packages/react/package.json

@@ -4,7 +4,14 @@ import root from 'window-or-global';
  * @constant {boolean} scrollTracker determines whether scroll tracking analytics is enabled
  * @private
  */
-const scrollTracker = process.env.SCROLL_TRACKING === 'true' || false;
+const _scrollTracker = process.env.SCROLL_TRACKING === 'true' || false;
+
+/**
+ * Current NODE_ENV
+ * @type {string | string}
+ * @private
+ */
+const _env = process.env.NODE_ENV || 'development';
 
 /**
  * Analytics API class with methods for firing analytics events on
@@ -40,6 +47,15 @@ class AnalyticsAPI {
     }
   }
 
+  /**
+   * Initializes all analytics global tracking init functions
+   */
+  static initAll() {
+    this.initScrollTracker();
+    this.initDynamicTabs();
+    this.initModals();
+  }
+
   /**
    *
    * If scroll tracking is enabled, this method will fire an event for every 400px
@@ -54,7 +70,7 @@ class AnalyticsAPI {
    * }
    **/
   static initScrollTracker() {
-    if (scrollTracker) {
+    if (_scrollTracker) {
       const trackingInterval = 400;
       let trackedMarker = 0;
       let curMarker = 0;
@@ -99,20 +115,102 @@ class AnalyticsAPI {
    * }
    */
   static initDynamicTabs() {
-    // const fireEvent = this.registerEvent;
-    console.log('init dynamic tabs');
+    const tabSelected = this.triggerTabSelected;
+    root.document.addEventListener('tab-selected', function(evt) {
+      tabSelected(evt.target.id, evt.detail.item.innerText);
+    });
+  }
 
-    root.addEventListener('tab-selected', function(evt) {
-      console.log('evt', evt);
-      /*fireEvent({
+  /**
+   * Triggers to CLICK event for the dynamic tabs
+   *
+   * @param {string} executionPath Target ID
+   * @param {string} targetTitle Target innerText
+   */
+  static triggerTabSelected(executionPath, targetTitle) {
+    try {
+      this.registerEvent({
         type: 'element',
         primaryCategory: 'WIDGET',
         eventName: 'CLICK',
         eventCategoryGroup: 'TABS DYNAMIC',
-        executionPath: $id,
-        targetTitle: $text
-      });*/
+        executionPath: executionPath,
+        targetTitle: targetTitle,
+      });
+    } catch (err) {
+      if (_env !== 'production') {
+        console.error('Error triggering tab event:', err);
+      }
+    }
+  }
+
+  /**
+   * This instantiates an event listener to trigger an event if the Carbon
+   * Modal component is being interacted with by the user
+   *
+   * @example
+   * import { AnalyticsAPI } from '@carbon/ibmdotcom-services';
+   *
+   * function init() {
+   *   AnalyticsAPI.initModals();
+   * }
+   */
+  static initModals() {
+    const modalHide = this.triggerModalHide;
+    root.document.addEventListener('modal-hidden', function(evt) {
+      modalHide(evt.target.id, evt.detail.launchingElement.innerText);
     });
+
+    const modalShow = this.triggerModalShow;
+    root.document.addEventListener('modal-shown', function(evt) {
+      modalShow(evt.target.id, evt.detail.launchingElement.innerText);
+    });
+  }
+
+  /**
+   * Triggers the HIDE event for the modal
+   *
+   * @param {string} executionPath Target ID
+   * @param {string} targetTitle Target innerText
+   */
+  static triggerModalHide(executionPath, targetTitle) {
+    try {
+      this.registerEvent({
+        type: 'element',
+        primaryCategory: 'WIDGET',
+        eventName: 'HIDE',
+        eventCategoryGroup: 'SHOWHIDE',
+        executionPath: executionPath,
+        targetTitle: targetTitle,
+      });
+    } catch (err) {
+      if (_env !== 'production') {
+        console.error('Error triggering modal hide event:', err);
+      }
+    }
+  }
+
+  /**
+   * Triggers the SHOW event for the modal
+   *
+   * @param {string} executionPath Target ID
+   * @param {string} targetTitle Target innerText
+   */
+  static triggerModalShow(executionPath, targetTitle) {
+    try {
+      this.registerEvent({
+        type: 'element',
+        primaryCategory: 'WIDGET',
+        eventName: 'SHOW',
+        eventCategoryGroup: 'SHOWHIDE',
+        executionPath: executionPath,
+        targetTitle: targetTitle,
+      });
+    } catch (err) {
+      if (_env !== 'production') {
+        console.error('Error triggering modal show event:', err);
+      }
+    }
   }
 }
 

packages/react/src/components/ButtonGroup/__stories__/Tabs.stories.js

@@ -34,6 +34,7 @@
     "jsdoc": "rimraf docs && jsdoc -c ./jsdoc.json ./README.md"
   },
   "dependencies": {
+    "@carbon/ibmdotcom-services": "1.1.0-alpha.763",
     "axios": "^0.19.0",
     "js-cookie": "^2.2.1",
     "window-or-global": "^1.0.1"

packages/react/src/components/Footer/Footer.js

@@ -0,0 +1,23 @@
+import { globalInit } from '../';
+import { DDOAPI, AnalyticsAPI } from '@carbon/ibmdotcom-services';
+
+jest.mock('@carbon/ibmdotcom-services', () => ({
+  DDOAPI: {
+    setVersion: jest.fn(),
+  },
+  AnalyticsAPI: {
+    initAll: jest.fn(),
+  },
+}));
+
+describe('Global init function', () => {
+  it('should execute the DDO settings', () => {
+    globalInit();
+    expect(DDOAPI.setVersion).toHaveBeenCalled();
+  });
+
+  it('should execute the AnalyticsAPI initAll', () => {
+    globalInit();
+    expect(AnalyticsAPI.initAll).toHaveBeenCalled();
+  });
+});

packages/react/src/components/Footer/__tests__/Footer.test.js

@@ -12,7 +12,7 @@ let _initialized = false;
 /**
  * Initializes various global functions
  */
-export function init() {
+export function globalInit() {
   if (_initialized) {
     return;
   } else {
@@ -23,6 +23,5 @@ export function init() {
   DDOAPI.setVersion();
 
   // analytics tracking
-  AnalyticsAPI.initScrollTracker();
-  AnalyticsAPI.initDynamicTabs();
+  AnalyticsAPI.initAll();
 }

packages/react/src/components/Masthead/Masthead.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export * from './global';

packages/services/package.json

@@ -8,6 +8,7 @@
 export * from './escaperegexp';
 export * from './featureflag';
 export * from './geolocation';
+export * from './global';
 export * from './ipcinfoCookie';
 export * from './serialize';
 export * from './settings';