#4309: Move notifications tracking from topcoder-react-lib to community-app

Author: luizrrodrigues

__tests__/shared/components/Header/__snapshots__/index.jsx.snap

@@ -182,10 +182,26 @@ exports[`Default render 1`] = `
             "title": "Switch to BUSINESS",
           }
         }
+        tracking={
+          Object {
+            "default": undefined,
+            "event": [Function],
+            "init": [Function],
+            "pageView": [Function],
+          }
+        }
       />
     }
     setOpenMore={[Function]}
     theme="light"
+    tracking={
+      Object {
+        "default": undefined,
+        "event": [Function],
+        "init": [Function],
+        "pageView": [Function],
+      }
+    }
   />
 </div>
 `;

config/default.js

@@ -96,6 +96,9 @@ module.exports = {
 
   SWIFT_PROGRAM_ID: 3445,
 
+  /* Google Analytics tracking ID */
+  GOOGLE_ANALYTICS_ID: 'UA-161803421-1',
+
   /* Various URLs. Most of them lead to different segments of Topcoder
    * platform. */
   URL: {

config/production.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   LOG_ENTRIES_TOKEN: '',
   SERVER_API_KEY: 'aa9ccf36-3936-450c-9983-097ddba51bef',
+  GOOGLE_ANALYTICS_ID: 'UA-6340959-1',
   URL: {
     ARENA: 'https://arena.topcoder.com',
     APP: 'https://community-app.topcoder.com',

package.json

@@ -18,7 +18,7 @@
     "test": "npm run lint && npm run --runInBand jest",
     "commitlint": "commitlint -E HUSKY_GIT_PARAMS",
     "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
-    "postinstall": "rimraf node_modules/navigation-component/node_modules/topcoder-react-utils && rimraf node_modules/navigation-component/node_modules/topcoder-react-lib && rimraf node_modules/topcoder-react-ui-kit/node_modules/topcoder-react-utils"
+    "postinstall": "rimraf node_modules/navigation-component/node_modules/topcoder-react-utils && rimraf node_modules/topcoder-react-ui-kit/node_modules/topcoder-react-utils"
   },
   "repository": {
     "type": "git",
@@ -62,6 +62,7 @@
     "filestack-react": "^2.0.0",
     "flag-icon-css": "^3.3.0",
     "focus-trap-react": "^6.0.0",
+    "react-ga": "^2.7.0",
     "helmet": "^3.12.1",
     "highlight.js": "^9.18.1",
     "html-to-text": "^5.1.1",
@@ -81,7 +82,7 @@
     "moment-timezone": "^0.5.21",
     "money": "^0.2.0",
     "morgan": "^1.9.0",
-    "navigation-component": "topcoder-platform/navigation-component#develop",
+    "navigation-component": "topcoder-platform/navigation-component#ga-hotfix",
     "node-forge": "^0.7.5",
     "nuka-carousel": "^4.5.3",
     "postcss": "^6.0.23",

src/shared/actions/index.js

@@ -6,6 +6,9 @@
 
 import { actions } from 'topcoder-react-lib';
 import pageActions from './page';
+import * as tracking from './tracking';
+
+export { tracking };
 
 export default {
   ...pageActions,

src/shared/actions/tracking.js

@@ -0,0 +1,46 @@
+/* global window */
+
+import ReactGA from 'react-ga';
+import { config } from 'topcoder-react-utils';
+
+const TRACKING_NAME = 'tracking';
+
+/**
+ * init - Init Google Analytics tracking
+ * @param {string} userId
+ */
+export const init = (userId) => {
+  ReactGA.initialize([{
+    trackingId: config.GOOGLE_ANALYTICS_ID,
+    gaOptions: {
+      name: TRACKING_NAME,
+      userId,
+    },
+  }], {
+    alwaysSendToDefaultTracker: false,
+  });
+};
+
+/**
+ * pageView - Track page view
+ */
+export const pageView = () => {
+  ReactGA.pageview(window.location.pathname
+                   + window.location.search, [TRACKING_NAME]);
+};
+
+/**
+ * event - Add custom tracking event.
+ * @param {string} category
+ * @param {string} action
+ * @param {string} label
+ */
+export const event = (category, action, label) => {
+  ReactGA.event({
+    category,
+    action,
+    label,
+  }, [TRACKING_NAME]);
+};
+
+export default undefined;

src/shared/components/Header/index.jsx

@@ -2,8 +2,8 @@ import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
 import PT from 'prop-types';
 import { config } from 'topcoder-react-utils';
-import { tracking } from 'topcoder-react-lib';
 import Logo from 'assets/images/tc-logo.svg';
+import { tracking } from '../../actions';
 
 let TopNavRef;
 let LoginNavRef;
@@ -95,6 +95,7 @@ const Header = ({
               auth={auth}
               profile={normalizedProfile}
               authURLs={config.HEADER_AUTH_URLS}
+              tracking={tracking}
             />
           )}
           logo={<Logo />}
@@ -106,6 +107,7 @@ const Header = ({
           setOpenMore={handleChangeOpenMore}
           loggedIn={!_.isEmpty(profile)}
           profileHandle={profile ? profile.handle : ''}
+          tracking={tracking}
         />
       </div>
     );

src/shared/components/Notifications/index.jsx

@@ -4,8 +4,8 @@ import cn from 'classnames';
 import _ from 'lodash';
 import moment from 'moment';
 import { Link } from 'topcoder-react-utils';
-import { tracking } from 'topcoder-react-lib';
 import IconArrow from 'assets/images/notifications/arrow.svg';
+import { tracking } from '../../actions';
 import styles from './style.scss';
 import TabsPanel from './TabsPanel';