Remove matomo + restore GA (#63)

2021-10-18 08:25:30 +08:00 · 2021-10-18 08:25:30 +08:00 · 3b442531ef
commit 3b442531ef
parent 4a22814c75 f6e60abbf5
7 changed files with 46 additions and 117 deletions
--- a/.env.defaults
+++ b/.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
--- a/.github/workflows/node.js.yml
+++ b/.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
--- a/config.js
+++ b/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,
--- a/package.json
+++ b/package.json
@ -85,7 +85,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",
--- a/static/index-web.html
+++ b/static/index-web.html
@ -1,6 +1,19 @@
 <!DOCTYPE html>
 <html dir="ltr">
  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BB8DNPB73F"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('consent', 'default', {
+        'ad_storage': 'denied',
+        'analytics_storage': 'denied',
+      });
+      gtag('js', new Date());
+      gtag('config', 'G-BB8DNPB73F');
+    </script>
+
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Pragma" content="no-cache" />
--- a/ui/analytics.js
+++ b/ui/analytics.js
@ -1,15 +1,7 @@
 // @flow
 import { Lbryio } from 'lbryinc';
 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'
-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;
@ -24,23 +16,13 @@ const isProduction = process.env.NODE_ENV === 'production';
 const devInternalApis = process.env.LBRY_API_URL && process.env.LBRY_API_URL.includes('dev');

 export const SHARE_INTERNAL = 'shareInternal';
-const SHARE_THIRD_PARTY = 'shareThirdParty';

 const WATCHMAN_BACKEND_ENDPOINT = 'https://watchman.na-backend.odysee.com/reports/playback';
 const SEND_DATA_TO_WATCHMAN_INTERVAL = 10; // in seconds

-// @if TARGET='app'
-if (isProduction) {
-  ElectronCookies.enable({
-    origin: 'https://lbry.tv',
-  });
-}
-// @endif
-
 type Analytics = {
  error: (string) => Promise<any>,
  sentryError: ({} | string, {}) => Promise<any>,
-  pageView: (string, ?string) => void,
  setUser: (Object) => void,
  toggleInternal: (boolean, ?boolean) => void,
  apiLogView: (string, string, string, ?number, ?() => void) => Promise<any>,
@ -84,10 +66,6 @@ type LogPublishParams = {

 let internalAnalyticsEnabled: boolean = IS_WEB || false;
 // let thirdPartyAnalyticsEnabled: boolean = IS_WEB || false;
-// @if TARGET='app'
-if (window.localStorage.getItem(SHARE_INTERNAL) === 'true') internalAnalyticsEnabled = true;
-// if (window.localStorage.getItem(SHARE_THIRD_PARTY) === 'true') thirdPartyAnalyticsEnabled = true;
-// @endif

 /**
 * Determine the mobile device type viewing the data
@ -266,7 +244,7 @@ const analytics: Analytics = {
    bitrateAsBitsPerSecond = videoBitrate;

    sendPromMetric('time_to_start', timeToStartVideo);
-    sendMatomoEvent('Media', 'TimeToStart', claimId, timeToStartVideo);
+    sendGaEvent('video_time_to_start', { claim_id: claimId, time: timeToStartVideo });
  },
  error: (message) => {
    return new Promise((resolve) => {
@ -292,45 +270,17 @@ 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);
-    }
-  },
  setUser: (userId) => {
-    if (internalAnalyticsEnabled && userId) {
-      window._paq.push(['setUserId', String(userId)]);
-      // @if TARGET='app'
-      Native.getAppVersionInfo().then(({ localVersion }) => {
-        sendMatomoEvent('Version', 'Desktop-Version', localVersion);
-      });
-      // @endif
+    if (internalAnalyticsEnabled && userId && window.gtag) {
+      window.gtag('set', { user_id: userId });
    }
  },
  toggleInternal: (enabled: boolean): void => {
-    // Always collect analytics on lbry.tv
-    // @if TARGET='app'
-    internalAnalyticsEnabled = enabled;
-    window.localStorage.setItem(SHARE_INTERNAL, enabled);
-    // @endif
+    // Always collect analytics on Odysee for now.
  },

  toggleThirdParty: (enabled: boolean): void => {
-    // Always collect analytics on lbry.tv
-    // @if TARGET='app'
-    // thirdPartyAnalyticsEnabled = enabled;
-    window.localStorage.setItem(SHARE_THIRD_PARTY, enabled);
-    // @endif
+    // Always collect analytics on Odysee for now.
  },

  apiLogView: (uri, outpoint, claimId, timeToStart) => {
@ -387,56 +337,57 @@ const analytics: Analytics = {
    }
  },
  adsFetchedEvent: () => {
-    sendMatomoEvent('Media', 'AdsFetched');
+    sendGaEvent('ad_fetched');
  },
  adsReceivedEvent: (response) => {
-    sendMatomoEvent('Media', 'AdsReceived', JSON.stringify(response));
+    sendGaEvent('ad_received', { response: JSON.stringify(response) });
  },
  adsErrorEvent: (response) => {
-    sendMatomoEvent('Media', 'AdsError', JSON.stringify(response));
+    sendGaEvent('ad_error', { response: JSON.stringify(response) });
  },
  playerLoadedEvent: (embedded) => {
-    sendMatomoEvent('Player', 'Loaded', embedded ? 'embedded' : 'onsite');
+    sendGaEvent('player', { action: 'loaded', type: embedded ? 'embedded' : 'onsite' });
  },
  playerStartedEvent: (embedded) => {
-    sendMatomoEvent('Player', 'Started', embedded ? 'embedded' : 'onsite');
+    sendGaEvent('player', { action: 'started', type: embedded ? 'embedded' : 'onsite' });
  },
  tagFollowEvent: (tag, following) => {
-    sendMatomoEvent('Tag', following ? 'Tag-Follow' : 'Tag-Unfollow', tag);
+    sendGaEvent(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', { type: 'email_provided' });
  },
  emailVerifiedEvent: () => {
-    sendMatomoEvent('Engagement', 'Email-Verified');
+    sendGaEvent('engagement', { type: 'email_verified' });
  },
  rewardEligibleEvent: () => {
-    sendMatomoEvent('Engagement', 'Reward-Eligible');
+    sendGaEvent('engagement', { type: 'reward_eligible' });
  },
  openUrlEvent: (url: string) => {
-    sendMatomoEvent('Engagement', 'Open-Url', url);
+    sendGaEvent('engagement', { type: 'open_url', url });
  },
  trendingAlgorithmEvent: (trendingAlgorithm: string) => {
-    sendMatomoEvent('Engagement', 'Trending-Algorithm', trendingAlgorithm);
+    sendGaEvent('engagement', { type: 'trending_algorithm', trending_algorithm: trendingAlgorithm });
  },
  startupEvent: () => {
-    sendMatomoEvent('Startup', 'Startup');
+    // TODO: This can be removed (use the automated 'session_start' instead).
+    // sendGaEvent('startup', 'startup');
  },
-  readyEvent: (timeToReady: number) => {
-    sendMatomoEvent('Startup', 'App-Ready', 'Time', timeToReady);
+  readyEvent: (timeToReadyMs: number) => {
+    sendGaEvent('startup_app_ready', { time_to_ready_ms: timeToReadyMs });
  },
  purchaseEvent: (purchaseInt: number) => {
-    sendMatomoEvent('Purchase', 'Purchase-Complete', 'someLabel', purchaseInt);
+    // https://developers.google.com/analytics/devguides/collection/ga4/reference/events#purchase
+    sendGaEvent('purchase', { value: purchaseInt });
  },
 };

-function sendMatomoEvent(category, action, name, value) {
-  if (internalAnalyticsEnabled) {
-    const event = { category, action, name, value };
-    MatomoInstance.trackEvent(event);
+function sendGaEvent(event: string, params?: { [string]: string | number }) {
+  if (internalAnalyticsEnabled && isProduction && window.gtag) {
+    window.gtag('event', event, params);
  }
 }

@ -449,35 +400,12 @@ 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
-});
-
-// Manually call the first page view
-// React Router doesn't include this on `history.listen`
-// @if TARGET='web'
-analytics.pageView(window.location.pathname + window.location.search, window.location.search);
-// @endif
-
-// @if TARGET='app'
-analytics.pageView(
-  window.location.pathname.split('.html')[1] + window.location.search || generateInitialUrl(window.location.hash)
-);
-// @endif;
-
-// Listen for url changes and report
-// This will include search queries
-history.listen((location) => {
-  const { pathname, search } = location;
-
-  const page = `${pathname}${search}`;
-  analytics.pageView(page, search);
-});
+// Activate
+if (internalAnalyticsEnabled && isProduction && window.gtag) {
+  window.gtag('consent', 'update', {
+    ad_storage: 'granted',
+    analytics_storage: 'granted',
+  });
+}

 export default analytics;
--- a/yarn.lock
+++ b/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"