Merge pull request #2400 from lbryio/ga

Google analytics

package.json

@@ -114,7 +114,6 @@
     "make-runnable": "^1.3.6",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",
-    "mixpanel-browser": "^2.17.1",
     "moment": "^2.22.0",
     "node-abi": "^2.5.1",
     "node-fetch": "^2.3.0",
@@ -130,6 +129,7 @@
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "react-feather": "^1.0.8",
+    "react-ga": "^2.5.7",
     "react-hot-loader": "^4.7.2",
     "react-modal": "^3.1.7",
     "react-paginate": "^5.2.1",

src/ui/analytics.js

@@ -1,48 +1,31 @@
 // @flow
-import mixpanel from 'mixpanel-browser';
 import { Lbryio } from 'lbryinc';
-import isDev from 'electron-is-dev';
-
-if (isDev) {
-  mixpanel.init('691723e855cabb9d27a7a79002216967');
-} else {
-  mixpanel.init('af5c6b8110068fa4f5c4600c81f05e60');
-}
+import ReactGA from 'react-ga';
+import { globalHistory } from '@reach/router';
 
 type Analytics = {
-  track: (string, ?Object) => void,
+  pageView: string => void,
   setUser: Object => void,
   toggle: (boolean, ?boolean) => void,
   apiLogView: (string, string, string, ?number, ?() => void) => void,
   apiLogPublish: () => void,
 };
 
-let analyticsEnabled: boolean = false;
-
+let analyticsEnabled: boolean = true;
 const analytics: Analytics = {
-  track: (name, payload) => {
+  pageView: path => {
     if (analyticsEnabled) {
-      if (payload) {
-        mixpanel.track(name, payload);
-      } else {
-        mixpanel.track(name);
-      }
+      ReactGA.pageview(path);
     }
   },
   setUser: user => {
-    if (user.id) {
-      mixpanel.identify(user.id);
-    }
-    if (user.primary_email) {
-      mixpanel.people.set({
-        $email: 1,
-      });
-    }
+    // Commented out because currently there is some delay before we know the user
+    // We should retrieve this server side so we have it immediately
+    // if (analyticsEnabled && user.id) {
+    //   ReactGA.set('userId', user.id);
+    // }
   },
-  toggle: (enabled: boolean, logDisabled: ?boolean): void => {
-    if (!enabled && logDisabled) {
-      mixpanel.track('DISABLED');
-    }
+  toggle: (enabled: boolean): void => {
     analyticsEnabled = enabled;
   },
   apiLogView: (uri, outpoint, claimId, timeToStart, onSuccessCb) => {
@@ -87,4 +70,21 @@ const analytics: Analytics = {
   },
 };
 
+// Initialize google analytics
+// Set `debug: true` for debug info
+ReactGA.initialize('UA-60403362-12', {
+  gaOptions: { name: IS_WEB ? 'web' : 'desktop' },
+  testMode: process.env.NODE_ENV !== 'production',
+});
+
+// Manually call the first page view
+// Reach Router doesn't include this on `history.listen`
+analytics.pageView(window.location.pathname + window.location.search);
+
+// Listen for url changes and report
+// This will include search queries/filter options
+globalHistory.listen(({ location }) =>
+  analytics.pageView(window.location.pathname + window.location.search)
+);
+
 export default analytics;

src/ui/component/button/view.jsx

@@ -4,6 +4,7 @@ import Icon from 'component/common/icon';
 import classnames from 'classnames';
 import { Link } from '@reach/router';
 import { formatLbryUriForWeb } from 'util/uri';
+import { OutboundLink } from 'react-ga';
 
 type Props = {
   onClick: ?(any) => any,
@@ -85,9 +86,14 @@ class Button extends React.PureComponent<Props> {
 
     if (href) {
       return (
-        <a href={href} className={combinedClassName}>
+        <OutboundLink
+          eventLabel="outboundClick"
+          to={href}
+          target="_blank"
+          className={combinedClassName}
+        >
           {content}
-        </a>
+        </OutboundLink>
       );
     }
 

src/ui/component/navigationHistory/view.jsx

@@ -93,7 +93,6 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
 
   render() {
     const { history = [], page, pageCount } = this.props;
-
     const { itemsSelected } = this.state;
     const allSelected = Object.keys(itemsSelected).length === history.length;
     const selectHandler = allSelected ? this.unselectAll : this.selectAll;

src/ui/index.jsx

@@ -173,26 +173,6 @@ document.addEventListener('click', event => {
   let { target } = event;
 
   while (target && target !== document) {
-    if (target.matches('a') || target.matches('button')) {
-      // TODO: Look into using accessiblity labels (this would also make the app more accessible)
-      const hrefParts = window.location.href.split('#');
-
-      // Buttons that we want to track should use `data-id`
-      // This prevents multiple buttons being grouped together if they have the same text
-      const element =
-        target.dataset.id || target.title || (target.textContent && target.textContent.trim());
-      if (element) {
-        analytics.track('CLICK', {
-          target: element,
-          location: hrefParts.length > 1 ? hrefParts[hrefParts.length - 1] : '/',
-        });
-      } else {
-        analytics.track('UNMARKED_CLICK', {
-          location: hrefParts.length > 1 ? hrefParts[hrefParts.length - 1] : '/',
-          source: target.outerHTML,
-        });
-      }
-    }
     if (target.matches('a[href^="http"]') || target.matches('a[href^="mailto"]')) {
       // @if TARGET='app'
       event.preventDefault();

src/ui/redux/actions/settings.js

@@ -30,7 +30,7 @@ export function doSetDaemonSetting(key, value) {
     };
     Lbry.settings_set(newSettings).then(newSettings);
     Lbry.settings_get().then(settings => {
-      analytics.toggle(settings.share_usage_data, true);
+      analytics.toggle(settings.share_usage_data);
       dispatch({
         type: ACTIONS.DAEMON_SETTINGS_RECEIVED,
         data: {

yarn.lock

@@ -6938,11 +6938,6 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
-mixpanel-browser@^2.17.1:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.26.0.tgz#0f2108d36c8170dab32dd16cabac6eb13138652e"
-  integrity sha512-aIRtoMvv6B+syslAvYyk+seuYObm0TeOxQz2JZqquZTEa+Kw9cNTVRA+H1s7QY1QFOKrk94gkmLdKJbwcOcG5w==
-
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -8626,6 +8621,11 @@ react-feather@^1.0.8:
   resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.6.tgz#2a547e3d5cd5e383d3da0128d593cbdb3c1b32f7"
   integrity sha512-iCofWhTjX+vQwvDmg7o6vg0XrUg1c41yBDZG+l83nz1FiCsleJoUgd3O+kHpOeWMXuPrRIFfCixvcqyOLGOgIg==
 
+react-ga@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.7.tgz#1c80a289004bf84f84c26d46f3a6a6513081bf2e"
+  integrity sha512-UmATFaZpEQDO96KFjB5FRLcT6hFcwaxOmAJZnjrSiFN/msTqylq9G+z5Z8TYzN/dbamDTiWf92m6MnXXJkAivQ==
+
 react-hot-loader@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.7.2.tgz#54cd99441c2d594bdc58c90673690c245dcfcaff"