From af31f5cfbd41bf62b2afecfc9859b76293cc059f Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Mon, 9 May 2022 03:50:29 +0200
Subject: [PATCH] Better custom dimension tracking

---
 index.html                   |  7 +++++-
 src/app/Analytics.ts         | 42 ++++++++++++++++++++++++++----------
 src/app/contexts/Locale.tsx  | 12 +++++------
 src/app/contexts/Theme.tsx   | 10 ++++-----
 src/app/contexts/Version.tsx |  4 ++--
 src/app/pages/Generator.tsx  |  2 +-
 6 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index e0b027a9..673b320b 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,12 @@
 		window.dataLayer = window.dataLayer || [];
 		function gtag(){dataLayer.push(arguments);}
 		gtag('js', new Date());
-		gtag('config', 'G-S982VZS08T');
+		gtag('config', 'G-S982VZS08T', {
+			theme: localStorage.getItem('theme') || 'default',
+			version: localStorage.getItem('schema_version') || '1.18.2',
+			locale: localStorage.getItem('language') || 'en',
+			prefers_color_scheme: matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none',
+		});
 	</script>
 	<script>
 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/src/app/Analytics.ts b/src/app/Analytics.ts
index 807c34e5..d501da5f 100644
--- a/src/app/Analytics.ts
+++ b/src/app/Analytics.ts
@@ -41,40 +41,60 @@ export namespace Analytics {
 
 	export function setLocale(locale: string) {
 		dimension(DIM_LANGUAGE, locale)
-		event(ID_SITE, 'set-language', locale)
 		gtag('event', 'use_locale', {
 			locale,
 		})
 	}
 
+	export function changeLocale(prev_locale: string, locale: string) {
+		setLocale(locale)
+		event(ID_SITE, 'set-language', locale)
+		gtag('event', 'change_locale', {
+			prev_locale,
+		})
+	}
+
 	export function setTheme(theme: string) {
 		dimension(DIM_THEME, theme)
-		event(ID_SITE, 'set-theme', theme)
-		gtag('event', 'use_theme', {
+		gtag('set', {
 			theme,
 		})
 	}
 
+	export function changeTheme(prev_theme: string, theme: string) {
+		setTheme(theme)
+		event(ID_SITE, 'set-theme', theme)
+		gtag('event', 'change_theme', {
+			prev_theme,
+		})
+	}
+
 	export function setVersion(version: string) {
 		dimension(DIM_VERSION, version)
-		event(ID_GENERATOR, 'set-version', version)
-		gtag('event', 'use_version', {
+		gtag('set', {
 			version,
 		})
 	}
 
-	export function setGenerator(file_type: string, version: string) {
+	export function changeVersion(prev_version: string, version: string) {
+		setVersion(version)
+		event(ID_GENERATOR, 'set-version', version)
+		gtag('event', 'change_version', {
+			prev_version,
+		})
+	}
+
+	export function setGenerator(file_type: string) {
 		dimension(DIM_GENERATOR, file_type)
 		gtag('event', 'use_generator', {
 			file_type,
-			version,
 		})
 	}
 
-	export function setPrefersColorScheme(color_scheme: string) {
-		dimension(DIM_PREFERS_COLOR_SCHEME, color_scheme)
-		gtag('event', 'prefers_color_scheme', {
-			color_scheme,
+	export function setPrefersColorScheme(prefers_color_scheme: string) {
+		dimension(DIM_PREFERS_COLOR_SCHEME, prefers_color_scheme)
+		gtag('set', {
+			prefers_color_scheme,
 		})
 	}
 
diff --git a/src/app/contexts/Locale.tsx b/src/app/contexts/Locale.tsx
index 806c37b0..acaa8f1a 100644
--- a/src/app/contexts/Locale.tsx
+++ b/src/app/contexts/Locale.tsx
@@ -59,12 +59,12 @@ export function LocaleProvider({ children }: { children: ComponentChildren }) {
 		return localize(lang, key, ...params)
 	}, [lang])
 
-	const changeLocale = useCallback(async (lang: string) => {
-		await loadLocale(lang)
-		Analytics.setLocale(lang)
-		Store.setLanguage(lang)
-		setLanguage(lang)
-	}, [])
+	const changeLocale = useCallback(async (newLang: string) => {
+		await loadLocale(newLang)
+		Analytics.changeLocale(lang, newLang)
+		Store.setLanguage(newLang)
+		setLanguage(newLang)
+	}, [lang])
 
 	useEffect(() => {
 		(async () => {
diff --git a/src/app/contexts/Theme.tsx b/src/app/contexts/Theme.tsx
index bdc63421..fc3c3ca8 100644
--- a/src/app/contexts/Theme.tsx
+++ b/src/app/contexts/Theme.tsx
@@ -29,11 +29,11 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
 		document.documentElement.setAttribute('data-theme', theme)
 	}, [theme])
 
-	const changeTheme = useCallback((theme: string) => {
-		Analytics.setTheme(theme)
-		Store.setTheme(theme)
-		setTheme(theme)
-	}, [])
+	const changeTheme = useCallback((newTheme: string) => {
+		Analytics.changeTheme(theme, newTheme)
+		Store.setTheme(newTheme)
+		setTheme(newTheme)
+	}, [theme])
 
 	useEffect(() => {
 		Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
diff --git a/src/app/contexts/Version.tsx b/src/app/contexts/Version.tsx
index d829cd5c..710a81f1 100644
--- a/src/app/contexts/Version.tsx
+++ b/src/app/contexts/Version.tsx
@@ -41,11 +41,11 @@ export function VersionProvider({ children }: { children: ComponentChildren }) {
 			changeTargetVersion(newVersion, true)
 		}
 		if (store) {
-			Analytics.setVersion(newVersion)
+			Analytics.changeVersion(version, newVersion)
 			Store.setVersion(newVersion)
 		}
 		setVersion(newVersion)
-	}, [targetVersion])
+	}, [version, targetVersion])
 
 	useEffect(() => {
 		Analytics.setVersion(version)
diff --git a/src/app/pages/Generator.tsx b/src/app/pages/Generator.tsx
index 8651a273..95fc2ff6 100644
--- a/src/app/pages/Generator.tsx
+++ b/src/app/pages/Generator.tsx
@@ -100,7 +100,7 @@ export function Generator({}: Props) {
 			ignoreChange.current = true
 			model.reset(DataModel.wrapLists(data), false)
 		}
-		Analytics.setGenerator(gen.id, version)
+		Analytics.setGenerator(gen.id)
 		return { model, blockStates }
 	}, [gen.id, version, sharedSnippetId, currentPreset])