feat(analytics): デッキUIのページ移動とAPIの応答時間のイベント実装 (MisskeyIO#793)

packages/frontend/src/account.ts

@@ -14,7 +14,7 @@ import { apiUrl } from '@/config.js';
 import { waiting, popup, popupMenu, success, alert } from '@/os.js';
 import { generateClientTransactionId, misskeyApi } from '@/scripts/misskey-api.js';
 import { unisonReload, reloadChannel } from '@/scripts/unison-reload.js';
-import { set as gtagSet } from 'vue-gtag';
+import { set as gtagSet, time as gtagTime } from 'vue-gtag';
 import { instance } from '@/instance.js';
 
 // TODO: 他のタブと永続化されたstateを同期
@@ -53,6 +53,7 @@ export async function signout() {
 			const registration = await navigator.serviceWorker.ready;
 			const push = await registration.pushManager.getSubscription();
 			if (push) {
+				const initiateTime = Date.now();
 				await window.fetch(`${apiUrl}/sw/unregister`, {
 					method: 'POST',
 					body: JSON.stringify({
@@ -63,6 +64,14 @@ export async function signout() {
 						'Content-Type': 'application/json',
 						'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
 					},
+				}).then(() => {
+					if (instance.googleAnalyticsId) {
+						gtagTime({
+							name: 'api',
+							event_category: '/sw/unregister',
+							value: Date.now() - initiateTime,
+						});
+					}
 				});
 			}
 		}
@@ -105,6 +114,7 @@ export async function removeAccount(idOrToken: Account['id']) {
 
 function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Promise<Account> {
 	return new Promise((done, fail) => {
+		const initiateTime = Date.now();
 		window.fetch(`${apiUrl}/i`, {
 			method: 'POST',
 			body: JSON.stringify({
@@ -115,6 +125,16 @@ function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Pr
 				'X-Client-Transaction-Id': generateClientTransactionId('misskey'),
 			},
 		})
+			.then(res => {
+				if (instance.googleAnalyticsId) {
+					gtagTime({
+						name: 'api',
+						event_category: '/i',
+						value: Date.now() - initiateTime,
+					});
+				}
+				return res;
+			})
 			.then(res => new Promise<Account | { error: Record<string, any> }>((done2, fail2) => {
 				if (res.status >= 500 && res.status < 600) {
 					// サーバーエラー(5xx)の場合をrejectとする