diff --git a/src/ui/analytics.js b/src/ui/analytics.js index b8bf48261..a30af33c6 100644 --- a/src/ui/analytics.js +++ b/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 diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx index 0c82d2233..fc28aa29c 100644 --- a/src/ui/component/app/view.jsx +++ b/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 (
openContextMenu(e)}>
diff --git a/src/ui/component/tagsSelect/view.jsx b/src/ui/component/tagsSelect/view.jsx index 92b780942..8d60253e4 100644 --- a/src/ui/component/tagsSelect/view.jsx +++ b/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'); } } diff --git a/src/ui/page/tags/view.jsx b/src/ui/page/tags/view.jsx index cbf9e8ea0..91a4f1921 100644 --- a/src/ui/page/tags/view.jsx +++ b/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 ( doToggleTagFollow(tag)} label={label} />} + meta={