feat: google analytics (#15451)

* wip backend

* wip frontend

* build misskey-js

* implement control panel

* fix

* introduce analytics wrapper

* spdx

* Update analytics.ts

* Update common.ts

* wip

* wip

* wip

* wip

* wip

* Update CHANGELOG.md

---------

Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>

1 files changed, 39 insertions, 14 deletions

diff --git a/packages/frontend/src/pages/admin/external-services.vue b/packages/frontend/src/pages/admin/external-services.vue
index 91f41166e9..a312ecce12 100644
--- a/packages/frontend/src/pages/admin/external-services.vue
+++ b/packages/frontend/src/pages/admin/external-services.vue
@@ -8,20 +8,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
 		<FormSuspense :p="init">
-			<MkFolder>
-				<template #label>DeepL Translation</template>
+			<div class="_gaps_m">
+				<MkFolder>
+					<template #label>Google Analytics<span class="_beta">{{ i18n.ts.beta }}</span></template>
 
-				<div class="_gaps_m">
-					<MkInput v-model="deeplAuthKey">
-						<template #prefix><i class="ti ti-key"></i></template>
-						<template #label>DeepL Auth Key</template>
-					</MkInput>
-					<MkSwitch v-model="deeplIsPro">
-						<template #label>Pro account</template>
-					</MkSwitch>
-					<MkButton primary @click="save_deepl">Save</MkButton>
-				</div>
-			</MkFolder>
+					<div class="_gaps_m">
+						<MkInput v-model="googleAnalyticsMeasurementId">
+							<template #prefix><i class="ti ti-key"></i></template>
+							<template #label>Measurement ID</template>
+						</MkInput>
+						<MkButton primary @click="save_googleAnalytics">Save</MkButton>
+					</div>
+				</MkFolder>
+
+				<MkFolder>
+					<template #label>DeepL Translation</template>
+
+					<div class="_gaps_m">
+						<MkInput v-model="deeplAuthKey">
+							<template #prefix><i class="ti ti-key"></i></template>
+							<template #label>DeepL Auth Key</template>
+						</MkInput>
+						<MkSwitch v-model="deeplIsPro">
+							<template #label>Pro account</template>
+						</MkSwitch>
+						<MkButton primary @click="save_deepl">Save</MkButton>
+					</div>
+				</MkFolder>
+			</div>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -44,10 +58,13 @@ import MkFolder from '@/components/MkFolder.vue';
 const deeplAuthKey = ref<string>('');
 const deeplIsPro = ref<boolean>(false);
 
+const googleAnalyticsMeasurementId = ref<string>('');
+
 async function init() {
 	const meta = await misskeyApi('admin/meta');
-	deeplAuthKey.value = meta.deeplAuthKey;
+	deeplAuthKey.value = meta.deeplAuthKey ?? '';
 	deeplIsPro.value = meta.deeplIsPro;
+	googleAnalyticsMeasurementId.value = meta.googleAnalyticsMeasurementId ?? '';
 }
 
 function save_deepl() {
@@ -59,6 +76,14 @@ function save_deepl() {
 	});
 }
 
+function save_googleAnalytics() {
+	os.apiWithDialog('admin/update-meta', {
+		googleAnalyticsMeasurementId: googleAnalyticsMeasurementId.value,
+	}).then(() => {
+		fetchInstance(true);
+	});
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);