src/ui/analytics.js

@@ -14,6 +14,7 @@ type Analytics = {
   toggle: (boolean, ?boolean) => void,
   apiLogView: (string, string, string, ?number, ?() => void) => void,
   apiLogPublish: () => void,
+  tagFollowEvent: (string, boolean, string) => void,
 };
 
 let analyticsEnabled: boolean = true;
@@ -23,12 +24,14 @@ const analytics: Analytics = {
       ReactGA.pageview(path);
     }
   },
-  setUser: user => {
-    // 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);
-    // }
+  setUser: userId => {
+    if (analyticsEnabled && userId) {
+      ReactGA.event({
+        category: 'User',
+        action: 'userId',
+        value: userId,
+      });
+    }
   },
   toggle: (enabled: boolean): void => {
     // Always collect analytics on lbry.tv
@@ -78,6 +81,15 @@ const analytics: Analytics = {
       Lbryio.call('feedback', 'search', { query, vote });
     }
   },
+  tagFollowEvent: (tag, following, location) => {
+    if (analyticsEnabled) {
+      ReactGA.event({
+        category: 'Tag',
+        action: following ? 'follow' : 'unfollow',
+        value: tag,
+      });
+    }
+  },
 };
 
 // Initialize google analytics

src/ui/component/app/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React, { useEffect, useRef } from 'react';
+import analytics from 'analytics';
 import Router from 'component/router/index';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
@@ -16,15 +17,17 @@ type Props = {
   pageTitle: ?string,
   language: string,
   theme: string,
+  user: ?{ id: string },
   fetchRewards: () => void,
   fetchRewardedContent: () => void,
   fetchTransactions: () => void,
 };
 
 function App(props: Props) {
-  const { theme, fetchRewards, fetchRewardedContent, fetchTransactions } = props;
+  const { theme, fetchRewards, fetchRewardedContent, fetchTransactions, user } = props;
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
+  const userId = user && user.id;
 
   useEffect(() => {
     ReactModal.setAppElement(appRef.current);
@@ -41,6 +44,12 @@ function App(props: Props) {
     document.documentElement.setAttribute('data-mode', theme);
   }, [theme]);
 
+  useEffect(() => {
+    if (userId) {
+      analytics.setUser(userId);
+    }
+  }, [userId]);
+
   return (
     <div ref={appRef} onContextMenu={e => openContextMenu(e)}>
       <Header />

src/ui/component/tagsSelect/view.jsx

@@ -6,6 +6,7 @@ import Tag from 'component/tag';
 import TagsSearch from 'component/tagsSearch';
 import usePersistedState from 'util/use-persisted-state';
 import { useTransition, animated } from 'react-spring';
+import analytics from 'analytics';
 
 type Props = {
   showClose: boolean,
@@ -56,6 +57,10 @@ export default function TagSelect(props: Props) {
       onRemove(tag);
     } else {
       doToggleTagFollow(tag.name);
+
+      const wasFollowing = followedTags.map(tag => tag.name).includes(tag.name);
+      const nowFollowing = !wasFollowing;
+      analytics.tagFollowEvent(tag.name, nowFollowing, 'tag-select');
     }
   }
 

src/ui/page/tags/view.jsx

@@ -4,6 +4,7 @@ import Page from 'component/page';
 import ClaimListDiscover from 'component/claimListDiscover';
 import Button from 'component/button';
 import useHover from 'util/use-hover';
+import analytics from 'analytics';
 
 type Props = {
   location: { search: string },
@@ -33,11 +34,18 @@ function TagsPage(props: Props) {
     label = __('Unfollow');
   }
 
+  function handleFollowClick() {
+    doToggleTagFollow(tag);
+
+    const nowFollowing = !isFollowing;
+    analytics.tagFollowEvent(tag, nowFollowing, 'tag-page');
+  }
+
   return (
     <Page>
       <ClaimListDiscover
         tags={tags}
-        meta={<Button ref={buttonRef} button="link" onClick={() => doToggleTagFollow(tag)} label={label} />}
+        meta={<Button ref={buttonRef} button="link" onClick={handleFollowClick} label={label} />}
       />
     </Page>
   );