Remove matomo + restore GA

Reverted/restored stuff from the following repo, with minimal modifications (trying to keep the diffs clean for future reference):
- lbry-desktop@5008972
- lbry-desktop@7fe88d8

.env.defaults

@@ -26,8 +26,6 @@ WELCOME_VERSION=1.0
 # STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo'
 
 # Analytics
-MATOMO_URL=https://analytics.lbry.com/
-MATOMO_ID=4
 
 # OG
 OG_TITLE_SUFFIX=| lbry.tv

.github/workflows/node.js.yml

@@ -41,8 +41,6 @@ jobs:
           yarn compile:web
         env:
           # UI
-          MATOMO_URL: https://analytics.lbry.com/
-          MATOMO_ID: 4
           WELCOME_VERSION: 1.0
           DOMAIN: odysee.com
           URL: https://odysee.com

config.js

@@ -3,8 +3,6 @@
 require('dotenv-defaults').config({ silent: false });
 
 const config = {
-  MATOMO_URL: process.env.MATOMO_URL,
-  MATOMO_ID: process.env.MATOMO_ID,
   WEBPACK_WEB_PORT: process.env.WEBPACK_WEB_PORT,
   WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
   WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,

package.json

@@ -60,6 +60,7 @@
     "match-sorter": "^6.3.0",
     "parse-duration": "^1.0.0",
     "react-datetime-picker": "^3.2.1",
+    "react-ga": "^3.3.0",
     "react-plastic": "^1.1.1",
     "react-top-loading-bar": "^2.0.1",
     "remove-markdown": "^0.3.0",
@@ -85,7 +86,6 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@datapunt/matomo-tracker-js": "^0.1.4",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.13",
     "@reach/auto-id": "^0.13.0",

ui/analytics.js

@@ -1,7 +1,7 @@
 // @flow
 import { Lbryio } from 'lbryinc';
+import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
-import MatomoTracker from '@datapunt/matomo-tracker-js';
 import { history } from './store';
 import { SDK_API_PATH } from './index';
 // @if TARGET='app'
@@ -9,7 +9,6 @@ import Native from 'native';
 import ElectronCookies from '@exponent/electron-cookies';
 import { generateInitialUrl } from 'util/url';
 // @endif
-import { MATOMO_ID, MATOMO_URL } from 'config';
 // import getConnectionSpeed from 'util/detect-user-bandwidth';
 
 // let userDownloadBandwidthInBitsPerSecond;
@@ -22,6 +21,10 @@ import { MATOMO_ID, MATOMO_URL } from 'config';
 
 const isProduction = process.env.NODE_ENV === 'production';
 const devInternalApis = process.env.LBRY_API_URL && process.env.LBRY_API_URL.includes('dev');
+const LBRY_TV_MINUS_PIRATE_BAY_UA_ID = 'UA-60403362-16';
+const LBRY_TV_UA_ID = 'UA-60403362-12';
+const DESKTOP_UA_ID = 'UA-60403362-13';
+const SECOND_TRACKER_NAME = 'tracker2';
 
 export const SHARE_INTERNAL = 'shareInternal';
 const SHARE_THIRD_PARTY = 'shareThirdParty';
@@ -266,7 +269,7 @@ const analytics: Analytics = {
     bitrateAsBitsPerSecond = videoBitrate;
 
     sendPromMetric('time_to_start', timeToStartVideo);
-    sendMatomoEvent('Media', 'TimeToStart', claimId, timeToStartVideo);
+    sendGaEvent('Media', 'TimeToStart', claimId, timeToStartVideo);
   },
   error: (message) => {
     return new Promise((resolve) => {
@@ -294,25 +297,18 @@ const analytics: Analytics = {
   },
   pageView: (path, search) => {
     if (internalAnalyticsEnabled) {
-      const params: { href: string, customDimensions?: Array<{ id: number, value: ?string }> } = { href: `${path}` };
-      const dimensions = [];
-      const searchParams = search && new URLSearchParams(search);
-
-      if (searchParams && searchParams.get('src')) {
-        dimensions.push({ id: 1, value: searchParams.get('src') });
-      }
-      if (dimensions.length) {
-        params['customDimensions'] = dimensions;
-      }
-      MatomoInstance.trackPageView(params);
+      ReactGA.pageview(path, [SECOND_TRACKER_NAME]);
     }
   },
   setUser: (userId) => {
     if (internalAnalyticsEnabled && userId) {
-      window._paq.push(['setUserId', String(userId)]);
+      ReactGA.set({
+        userId,
+      });
+
       // @if TARGET='app'
       Native.getAppVersionInfo().then(({ localVersion }) => {
-        sendMatomoEvent('Version', 'Desktop-Version', localVersion);
+        sendGaEvent('Version', 'Desktop-Version', localVersion);
       });
       // @endif
     }
@@ -387,56 +383,78 @@ const analytics: Analytics = {
     }
   },
   adsFetchedEvent: () => {
-    sendMatomoEvent('Media', 'AdsFetched');
+    sendGaEvent('Media', 'AdsFetched');
   },
   adsReceivedEvent: (response) => {
-    sendMatomoEvent('Media', 'AdsReceived', JSON.stringify(response));
+    sendGaEvent('Media', 'AdsReceived', JSON.stringify(response));
   },
   adsErrorEvent: (response) => {
-    sendMatomoEvent('Media', 'AdsError', JSON.stringify(response));
+    sendGaEvent('Media', 'AdsError', JSON.stringify(response));
   },
   playerLoadedEvent: (embedded) => {
-    sendMatomoEvent('Player', 'Loaded', embedded ? 'embedded' : 'onsite');
+    sendGaEvent('Player', 'Loaded', embedded ? 'embedded' : 'onsite');
   },
   playerStartedEvent: (embedded) => {
-    sendMatomoEvent('Player', 'Started', embedded ? 'embedded' : 'onsite');
+    sendGaEvent('Player', 'Started', embedded ? 'embedded' : 'onsite');
   },
   tagFollowEvent: (tag, following) => {
-    sendMatomoEvent('Tag', following ? 'Tag-Follow' : 'Tag-Unfollow', tag);
+    sendGaEvent('Tag', following ? 'Tag-Follow' : 'Tag-Unfollow', tag);
   },
   channelBlockEvent: (uri, blocked, location) => {
-    sendMatomoEvent(blocked ? 'Channel-Hidden' : 'Channel-Unhidden', uri);
+    sendGaEvent(blocked ? 'Channel-Hidden' : 'Channel-Unhidden', uri);
   },
   emailProvidedEvent: () => {
-    sendMatomoEvent('Engagement', 'Email-Provided');
+    sendGaEvent('Engagement', 'Email-Provided');
   },
   emailVerifiedEvent: () => {
-    sendMatomoEvent('Engagement', 'Email-Verified');
+    sendGaEvent('Engagement', 'Email-Verified');
   },
   rewardEligibleEvent: () => {
-    sendMatomoEvent('Engagement', 'Reward-Eligible');
+    sendGaEvent('Engagement', 'Reward-Eligible');
   },
   openUrlEvent: (url: string) => {
-    sendMatomoEvent('Engagement', 'Open-Url', url);
+    sendGaEvent('Engagement', 'Open-Url', url);
   },
   trendingAlgorithmEvent: (trendingAlgorithm: string) => {
-    sendMatomoEvent('Engagement', 'Trending-Algorithm', trendingAlgorithm);
+    sendGaEvent('Engagement', 'Trending-Algorithm', trendingAlgorithm);
   },
   startupEvent: () => {
-    sendMatomoEvent('Startup', 'Startup');
+    sendGaEvent('Startup', 'Startup');
   },
   readyEvent: (timeToReady: number) => {
-    sendMatomoEvent('Startup', 'App-Ready', 'Time', timeToReady);
+    sendGaEvent('Startup', 'App-Ready');
+    sendGaTimingEvent('Startup', 'App-Ready', timeToReady);
   },
   purchaseEvent: (purchaseInt: number) => {
-    sendMatomoEvent('Purchase', 'Purchase-Complete', 'someLabel', purchaseInt);
+    sendGaEvent('Purchase', 'Purchase-Complete', undefined, purchaseInt);
   },
 };
 
-function sendMatomoEvent(category, action, name, value) {
-  if (internalAnalyticsEnabled) {
-    const event = { category, action, name, value };
-    MatomoInstance.trackEvent(event);
+function sendGaEvent(category, action, label, value) {
+  if (internalAnalyticsEnabled && isProduction) {
+    ReactGA.event(
+      {
+        category,
+        action,
+        ...(label ? { label } : {}),
+        ...(value ? { value } : {}),
+      },
+      [SECOND_TRACKER_NAME]
+    );
+  }
+}
+
+function sendGaTimingEvent(category: string, action: string, timeInMs: number, label?: string) {
+  if (internalAnalyticsEnabled && isProduction) {
+    ReactGA.timing(
+      {
+        category,
+        variable: action,
+        value: timeInMs,
+        ...(label ? { label } : {}),
+      },
+      [SECOND_TRACKER_NAME]
+    );
   }
 }
 
@@ -449,14 +467,37 @@ function sendPromMetric(name: string, value?: number) {
   }
 }
 
-const MatomoInstance = new MatomoTracker({
-  urlBase: MATOMO_URL,
-  siteId: MATOMO_ID, // optional, default value: `1`
-  // heartBeat: { // optional, enabled by default
-  //   active: true, // optional, default value: true
-  //   seconds: 10 // optional, default value: `15
-  // },
-  // linkTracking: false // optional, default value: true
+let gaTrackers = [];
+
+if (!IS_WEB) {
+  gaTrackers.push({
+    trackingId: DESKTOP_UA_ID,
+  });
+} else {
+  gaTrackers.push({
+    trackingId: LBRY_TV_UA_ID,
+  });
+
+  const { search } = window.location;
+  const urlParams = new URLSearchParams(search);
+  const isPirateBayUser = urlParams.get('utm_source') === 'PB';
+
+  if (!isPirateBayUser) {
+    gaTrackers.push({
+      trackingId: LBRY_TV_MINUS_PIRATE_BAY_UA_ID,
+      gaOptions: {
+        name: SECOND_TRACKER_NAME,
+      },
+    });
+  }
+}
+
+ReactGA.initialize(gaTrackers, {
+  testMode: process.env.NODE_ENV !== 'production',
+  cookieDomain: 'auto',
+  siteSpeedSampleRate: 100,
+  // un-comment to see events as they are sent to google
+  // debug: true,
 });
 
 // Manually call the first page view
@@ -466,6 +507,8 @@ analytics.pageView(window.location.pathname + window.location.search, window.loc
 // @endif
 
 // @if TARGET='app'
+ReactGA.set({ checkProtocolTask: null });
+ReactGA.set({ location: 'https://odysee.com' });
 analytics.pageView(
   window.location.pathname.split('.html')[1] + window.location.search || generateInitialUrl(window.location.hash)
 );

ui/component/button/view.jsx

@@ -5,6 +5,7 @@ import Icon from 'component/common/icon';
 import classnames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import { formatLbryUrlForWeb } from 'util/url';
+import { OutboundLink } from 'react-ga';
 import * as PAGES from 'constants/pages';
 import useCombinedRefs from 'effects/use-combined-refs';
 
@@ -146,7 +147,9 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
   if (href || (navigate && navigate.startsWith('http'))) {
     // TODO: replace the below with an outbound link tracker for matomo
     return (
-      <a
+      <OutboundLink
+        eventLabel="outboundClick"
+        to={href || navigate}
         target="_blank"
         rel="noopener noreferrer"
         href={href || navigate}
@@ -155,9 +158,10 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
         onClick={onClick}
         aria-label={ariaLabel}
         disabled={disabled} // is there a reason this wasn't here before?
+        {...otherProps}
       >
         {content}
-      </a>
+      </OutboundLink>
     );
   }
 

yarn.lock

@@ -1264,11 +1264,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@datapunt/matomo-tracker-js@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@datapunt/matomo-tracker-js/-/matomo-tracker-js-0.1.4.tgz#1226f0964d2c062bf9392e9c2fd89838262b10df"
-  integrity sha512-bi8/guszgciSNLJQIFgph27AzkiCF1DmLBxtmJE3CsLxfc0aTgI2vMg3EFoLv13Mu8HLaCs27Z7vbttlD6jp5w==
-
 "@develar/schema-utils@~2.6.5":
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/@develar/schema-utils/-/schema-utils-2.6.5.tgz#3ece22c5838402419a6e0425f85742b961d9b6c6"
@@ -13485,6 +13480,11 @@ react-fit@^1.0.3:
     detect-element-overflow "^1.2.0"
     prop-types "^15.6.0"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-google-recaptcha@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"