lbry-desktop/ui/analytics.js

331 lines
10 KiB
JavaScript
Raw Normal View History

2018-02-16 09:47:52 +01:00
// @flow
2018-09-24 05:44:42 +02:00
import { Lbryio } from 'lbryinc';
2020-02-14 19:58:09 +01:00
import * as Sentry from '@sentry/browser';
2020-05-29 17:11:50 +02:00
import MatomoTracker from '@datapunt/matomo-tracker-js';
2019-04-09 23:21:00 +02:00
import { history } from './store';
2020-03-24 19:43:51 +01:00
import { SDK_API_PATH } from './index';
2019-05-14 22:35:49 +02:00
// @if TARGET='app'
import Native from 'native';
2019-05-14 22:35:49 +02:00
import ElectronCookies from '@exponent/electron-cookies';
2020-02-12 05:59:30 +01:00
import { generateInitialUrl } from 'util/url';
2019-05-14 22:35:49 +02:00
// @endif
2020-08-07 22:59:20 +02:00
import { MATOMO_ID, MATOMO_URL, LBRY_WEB_BUFFER_API } from 'config';
2018-02-16 09:47:52 +01:00
2019-06-20 02:57:51 +02:00
const isProduction = process.env.NODE_ENV === 'production';
const devInternalApis = process.env.LBRY_API_URL;
export const SHARE_INTERNAL = 'shareInternal';
const SHARE_THIRD_PARTY = 'shareThirdParty';
// @if TARGET='app'
2020-05-15 21:12:11 +02:00
if (isProduction) {
ElectronCookies.enable({
origin: 'https://lbry.tv',
});
}
// @endif
2019-06-20 02:57:51 +02:00
2018-02-16 09:47:52 +01:00
type Analytics = {
2021-04-07 07:40:34 +02:00
error: (string) => Promise<any>,
2020-05-21 17:38:28 +02:00
sentryError: ({} | string, {}) => Promise<any>,
2020-11-16 20:09:00 +01:00
pageView: (string, ?string) => void,
2021-04-07 07:40:34 +02:00
setUser: (Object) => void,
toggleInternal: (boolean, ?boolean) => void,
apiLogView: (string, string, string, ?number, ?() => void) => Promise<any>,
2019-10-16 23:36:50 +02:00
apiLogPublish: (ChannelClaim | StreamClaim) => void,
apiSyncTags: ({}) => void,
2020-05-29 17:11:50 +02:00
tagFollowEvent: (string, boolean, ?string) => void,
playerLoadedEvent: (?boolean) => void,
2020-11-26 22:06:58 +01:00
playerStartedEvent: (?boolean) => void,
2021-03-09 08:07:01 +01:00
videoFetchDuration: (string, number) => void,
2020-01-22 18:19:49 +01:00
videoStartEvent: (string, number) => void,
2020-08-07 22:59:20 +02:00
videoBufferEvent: (
StreamClaim,
{
timeAtBuffer: number,
bufferDuration: number,
bitRate: number,
duration: number,
2021-01-05 22:29:04 +01:00
userId: string,
playerPoweredBy: string,
readyState: number,
}
2020-08-07 22:59:20 +02:00
) => void,
2021-04-12 18:43:47 +02:00
adsFetchedEvent: () => void,
adsReceivedEvent: (any) => void,
adsErrorEvent: (any) => void,
emailProvidedEvent: () => void,
emailVerifiedEvent: () => void,
rewardEligibleEvent: () => void,
2019-10-02 20:20:25 +02:00
startupEvent: () => void,
2021-04-07 07:40:34 +02:00
purchaseEvent: (number) => void,
readyEvent: (number) => void,
openUrlEvent: (string) => void,
2018-02-24 01:24:00 +01:00
};
2018-02-16 09:47:52 +01:00
2019-10-16 23:36:50 +02:00
type LogPublishParams = {
uri: string,
claim_id: string,
outpoint: string,
channel_claim_id?: string,
};
let internalAnalyticsEnabled: boolean = IS_WEB || false;
2020-06-02 22:52:34 +02:00
// let thirdPartyAnalyticsEnabled: boolean = IS_WEB || false;
// @if TARGET='app'
if (window.localStorage.getItem(SHARE_INTERNAL) === 'true') internalAnalyticsEnabled = true;
2020-06-02 22:52:34 +02:00
// if (window.localStorage.getItem(SHARE_THIRD_PARTY) === 'true') thirdPartyAnalyticsEnabled = true;
// @endif
2020-01-02 23:30:58 +01:00
2018-02-16 09:47:52 +01:00
const analytics: Analytics = {
2021-04-07 07:40:34 +02:00
error: (message) => {
return new Promise((resolve) => {
if (internalAnalyticsEnabled && isProduction) {
2020-02-14 19:58:09 +01:00
return Lbryio.call('event', 'desktop_error', { error_message: message }).then(() => {
resolve(true);
});
} else {
resolve(false);
}
});
},
sentryError: (error, errorInfo) => {
2021-04-07 07:40:34 +02:00
return new Promise((resolve) => {
if (internalAnalyticsEnabled && isProduction) {
2021-04-07 07:40:34 +02:00
Sentry.withScope((scope) => {
2020-02-14 19:58:09 +01:00
scope.setExtras(errorInfo);
const eventId = Sentry.captureException(error);
resolve(eventId);
});
} else {
resolve(null);
}
});
},
2020-11-13 03:43:44 +01:00
pageView: (path, search) => {
if (internalAnalyticsEnabled) {
2020-11-16 20:09:00 +01:00
const params: { href: string, customDimensions?: Array<{ id: number, value: ?string }> } = { href: `${path}` };
2020-11-13 03:43:44 +01:00
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);
2020-05-29 17:11:50 +02:00
}
2018-02-16 09:47:52 +01:00
},
2021-04-07 07:40:34 +02:00
setUser: (userId) => {
2020-06-02 22:52:34 +02:00
if (internalAnalyticsEnabled && userId) {
2020-07-06 16:18:01 +02:00
window._paq.push(['setUserId', String(userId)]);
// @if TARGET='app'
Native.getAppVersionInfo().then(({ localVersion }) => {
2020-06-02 22:52:34 +02:00
sendMatomoEvent('Version', 'Desktop-Version', localVersion);
2019-07-22 04:28:49 +02:00
});
// @endif
2019-07-22 04:28:49 +02:00
}
},
toggleInternal: (enabled: boolean): void => {
2019-04-14 07:48:11 +02:00
// Always collect analytics on lbry.tv
// @if TARGET='app'
internalAnalyticsEnabled = enabled;
window.localStorage.setItem(SHARE_INTERNAL, enabled);
2019-04-14 07:48:11 +02:00
// @endif
2018-02-24 01:24:00 +01:00
},
toggleThirdParty: (enabled: boolean): void => {
// Always collect analytics on lbry.tv
// @if TARGET='app'
2020-06-02 22:52:34 +02:00
// thirdPartyAnalyticsEnabled = enabled;
window.localStorage.setItem(SHARE_THIRD_PARTY, enabled);
// @endif
},
2019-08-14 05:04:08 +02:00
apiLogView: (uri, outpoint, claimId, timeToStart) => {
return new Promise((resolve, reject) => {
if (internalAnalyticsEnabled && (isProduction || devInternalApis)) {
const params: {
uri: string,
outpoint: string,
claim_id: string,
time_to_start?: number,
} = {
uri,
outpoint,
claim_id: claimId,
};
// lbry.tv streams from AWS so we don't care about the time to start
if (timeToStart && !IS_WEB) {
params.time_to_start = timeToStart;
}
resolve(Lbryio.call('file', 'view', params));
} else {
resolve();
}
});
2018-03-08 06:07:42 +01:00
},
2019-02-05 19:36:40 +01:00
apiLogSearch: () => {
if (internalAnalyticsEnabled && isProduction) {
2019-02-05 19:36:40 +01:00
Lbryio.call('event', 'search');
}
},
2019-10-16 23:36:50 +02:00
apiLogPublish: (claimResult: ChannelClaim | StreamClaim) => {
2020-07-23 16:22:57 +02:00
// Don't check if this is production so channels created on localhost are still linked to user
if (internalAnalyticsEnabled) {
const { permanent_url: uri, claim_id: claimId, txid, nout, signing_channel: signingChannel } = claimResult;
let channelClaimId;
if (signingChannel) {
channelClaimId = signingChannel.claim_id;
}
const outpoint = `${txid}:${nout}`;
2019-10-16 23:36:50 +02:00
const params: LogPublishParams = { uri, claim_id: claimId, outpoint };
if (channelClaimId) {
params['channel_claim_id'] = channelClaimId;
}
2019-10-16 23:36:50 +02:00
Lbryio.call('event', 'publish', params);
}
},
2021-04-07 07:40:34 +02:00
apiSyncTags: (params) => {
if (internalAnalyticsEnabled && isProduction) {
Lbryio.call('content_tags', 'sync', params);
}
},
videoFetchDuration: (source, duration) => {
sendMatomoEvent('Media', 'TimeToFetch', source, duration);
},
2020-01-22 18:19:49 +01:00
videoStartEvent: (claimId, duration) => {
2020-03-23 22:16:28 +01:00
sendPromMetric('time_to_start', duration);
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Media', 'TimeToStart', claimId, duration);
2020-01-22 18:19:49 +01:00
},
videoBufferEvent: (claim, data) => {
2020-08-07 22:59:20 +02:00
sendMatomoEvent('Media', 'BufferTimestamp', claim.claim_id, data.timeAtBuffer);
if (LBRY_WEB_BUFFER_API) {
fetch(LBRY_WEB_BUFFER_API, {
method: 'post',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
2020-08-07 22:59:20 +02:00
},
body: JSON.stringify({
device: 'web',
type: 'buffering',
2021-01-05 22:29:04 +01:00
client: data.userId,
data: {
url: claim.canonical_url,
position: data.timeAtBuffer,
duration: data.bufferDuration,
player: data.playerPoweredBy,
readyState: data.readyState,
stream_duration: data.duration,
stream_bitrate: data.bitRate,
},
}),
});
}
2020-01-22 18:19:49 +01:00
},
2021-04-12 18:43:47 +02:00
adsFetchedEvent: () => {
sendMatomoEvent('Media', 'AdsFetched');
},
adsReceivedEvent: (response) => {
sendMatomoEvent('Media', 'AdsReceived', JSON.stringify(response));
},
adsErrorEvent: (response) => {
sendMatomoEvent('Media', 'AdsError', JSON.stringify(response));
},
2021-04-07 07:40:34 +02:00
playerLoadedEvent: (embedded) => {
sendMatomoEvent('Player', 'Loaded', embedded ? 'embedded' : 'onsite');
},
2021-04-07 07:40:34 +02:00
playerStartedEvent: (embedded) => {
2020-11-26 22:06:58 +01:00
sendMatomoEvent('Player', 'Started', embedded ? 'embedded' : 'onsite');
},
2020-05-29 17:11:50 +02:00
tagFollowEvent: (tag, following) => {
sendMatomoEvent('Tag', following ? 'Tag-Follow' : 'Tag-Unfollow', tag);
2019-07-22 01:35:59 +02:00
},
channelBlockEvent: (uri, blocked, location) => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent(blocked ? 'Channel-Hidden' : 'Channel-Unhidden', uri);
},
emailProvidedEvent: () => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Engagement', 'Email-Provided');
},
emailVerifiedEvent: () => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Engagement', 'Email-Verified');
},
rewardEligibleEvent: () => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Engagement', 'Reward-Eligible');
},
2019-11-04 16:55:02 +01:00
openUrlEvent: (url: string) => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Engagement', 'Open-Url', url);
2019-11-04 16:55:02 +01:00
},
2020-03-12 17:36:45 +01:00
trendingAlgorithmEvent: (trendingAlgorithm: string) => {
2020-06-02 22:52:34 +02:00
sendMatomoEvent('Engagement', 'Trending-Algorithm', trendingAlgorithm);
2020-03-12 17:36:45 +01:00
},
2019-10-02 20:20:25 +02:00
startupEvent: () => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Startup', 'Startup');
2019-10-02 20:20:25 +02:00
},
readyEvent: (timeToReady: number) => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Startup', 'App-Ready', 'Time', timeToReady);
2019-10-02 20:20:25 +02:00
},
2020-05-21 17:38:28 +02:00
purchaseEvent: (purchaseInt: number) => {
2020-05-29 17:11:50 +02:00
sendMatomoEvent('Purchase', 'Purchase-Complete', 'someLabel', purchaseInt);
2020-05-21 17:38:28 +02:00
},
2018-02-24 01:24:00 +01:00
};
2018-02-16 09:47:52 +01:00
2020-05-29 17:11:50 +02:00
function sendMatomoEvent(category, action, name, value) {
if (internalAnalyticsEnabled) {
2020-05-29 17:11:50 +02:00
const event = { category, action, name, value };
MatomoInstance.trackEvent(event);
}
}
2020-03-23 22:16:28 +01:00
function sendPromMetric(name: string, value?: number) {
if (IS_WEB) {
2020-03-24 19:43:51 +01:00
let url = new URL(SDK_API_PATH + '/metric/ui');
2020-03-23 22:16:28 +01:00
const params = { name: name, value: value ? value.toString() : '' };
url.search = new URLSearchParams(params).toString();
2020-03-24 20:31:00 +01:00
return fetch(url, { method: 'post' });
2020-03-23 22:16:28 +01:00
}
}
2020-05-29 17:11:50 +02:00
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
});
2019-04-01 16:30:19 +02:00
// Manually call the first page view
2019-04-09 23:21:00 +02:00
// React Router doesn't include this on `history.listen`
2019-07-09 18:18:06 +02:00
// @if TARGET='web'
2020-11-13 03:43:44 +01:00
analytics.pageView(window.location.pathname + window.location.search, window.location.search);
2019-07-09 18:18:06 +02:00
// @endif
2019-04-01 16:30:19 +02:00
2019-05-14 22:35:49 +02:00
// @if TARGET='app'
2020-02-12 05:59:30 +01:00
analytics.pageView(
window.location.pathname.split('.html')[1] + window.location.search || generateInitialUrl(window.location.hash)
);
2019-05-14 22:35:49 +02:00
// @endif;
2019-04-01 16:30:19 +02:00
// Listen for url changes and report
2019-04-09 23:21:00 +02:00
// This will include search queries
2021-04-07 07:40:34 +02:00
history.listen((location) => {
2019-04-15 05:49:50 +02:00
const { pathname, search } = location;
2019-04-14 07:48:11 +02:00
2019-04-15 05:49:50 +02:00
const page = `${pathname}${search}`;
2020-11-13 03:43:44 +01:00
analytics.pageView(page, search);
2019-04-09 23:21:00 +02:00
});
2019-04-01 16:30:19 +02:00
2018-02-16 09:47:52 +01:00
export default analytics;