From 122ed3c82dbcad02f2fe03ff5afee9f8cd4387d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=82=8F=E3=82=8F=E3=82=8F=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:24:13 +0900
Subject: [PATCH] =?UTF-8?q?feat(analytics):=20=E3=83=87=E3=83=83=E3=82=ADU?=
 =?UTF-8?q?I=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8=E7=A7=BB=E5=8B=95?=
 =?UTF-8?q?=E3=81=A8API=E3=81=AE=E5=BF=9C=E7=AD=94=E6=99=82=E9=96=93?=
 =?UTF-8?q?=E3=81=AE=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E5=AE=9F=E8=A3=85?=
 =?UTF-8?q?=20(MisskeyIO#793)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/account.ts              | 22 ++++++++++++++++++-
 packages/frontend/src/boot/common.ts          |  2 ++
 .../frontend/src/components/MkPageWindow.vue  | 19 +++++++++++++++-
 packages/frontend/src/scripts/misskey-api.ts  | 22 +++++++++++++++++++
 4 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/account.ts b/packages/frontend/src/account.ts
index c11e6e912..a34a70df0 100644
--- a/packages/frontend/src/account.ts
+++ b/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とする
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 421619d92..79ef7b3f2 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -270,6 +270,8 @@ export async function common(createVue: () => App<Element>) {
 		app.use(VueGtag, {
 			bootstrap: false,
 			appName: `Misskey v${version}`,
+			pageTrackerEnabled: true,
+			pageTrackerScreenviewEnabled: true,
 			config: {
 				id: instance.googleAnalyticsId,
 				params: {
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index aa4509b14..13d03abf3 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout.js';
@@ -43,6 +43,8 @@ import { claimAchievement } from '@/scripts/achievements.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
 import { useRouterFactory } from '@/router/supplier.js';
 import { mainRouter } from '@/router/main.js';
+import { instance } from '@/instance.js';
+import { pageview } from 'vue-gtag';
 
 const props = defineProps<{
 	initialPath: string;
@@ -110,6 +112,21 @@ provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 provide('forceSpacerMin', true);
 
+if (instance.googleAnalyticsId) {
+	pageview({
+		page_title: pageMetadata.value?.title,
+		page_path: windowRouter.getCurrentPath(),
+	});
+	windowRouter.afterEach(() =>
+		nextTick(() =>
+			pageview({
+				page_title: pageMetadata.value?.title,
+				page_path: windowRouter.getCurrentPath(),
+			}),
+		),
+	);
+}
+
 const contextmenu = computed(() => ([{
 	icon: 'ti ti-player-eject',
 	text: i18n.ts.showInPage,
diff --git a/packages/frontend/src/scripts/misskey-api.ts b/packages/frontend/src/scripts/misskey-api.ts
index 05ac1377d..69bbb0209 100644
--- a/packages/frontend/src/scripts/misskey-api.ts
+++ b/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);
 	});