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

packages/frontend/src/scripts/misskey-api.ts

@@ -8,6 +8,8 @@ import { ref } from 'vue';
 import { apiUrl } from '@/config.js';
 import { $i } from '@/account.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { time as gtagTime } from 'vue-gtag';
+import { instance } from '@/instance.js';
 export const pendingApiRequestsCount = ref(0);
 
 let id: string | null = miLocalStorage.getItem('id');
@@ -66,6 +68,7 @@ export function misskeyApi<
 		if (token !== undefined) (data as any).i = token;
 
 		// Send request
+		const initiateTime = Date.now();
 		window.fetch(`${apiUrl}/${endpoint}`, {
 			method: 'POST',
 			body: JSON.stringify(data),
@@ -76,6 +79,15 @@ export function misskeyApi<
 				'X-Client-Transaction-Id': generateClientTransactionId(initiator),
 			},
 			signal,
+		}).then(res => {
+			if (instance.googleAnalyticsId) {
+				gtagTime({
+					name: 'api',
+					event_category: `/${endpoint}`,
+					value: Date.now() - initiateTime,
+				});
+			}
+			return res;
 		}).then(handleResponse(resolve, reject)).catch(reject);
 	});
 
@@ -105,6 +117,7 @@ export function misskeyApiGet<
 
 	const promise = new Promise<_ResT>((resolve, reject) => {
 		// Send request
+		const initiateTime = Date.now();
 		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
 			method: 'GET',
 			credentials: 'omit',
@@ -112,6 +125,15 @@ export function misskeyApiGet<
 			headers: {
 				'X-Client-Transaction-Id': generateClientTransactionId(initiator),
 			},
+		}).then(res => {
+			if (instance.googleAnalyticsId) {
+				gtagTime({
+					name: 'api-get',
+					event_category: `/${endpoint}?${query}`,
+					value: Date.now() - initiateTime,
+				});
+			}
+			return res;
 		}).then(handleResponse(resolve, reject)).catch(reject);
 	});