Better custom dimension tracking

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(){

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,
 		})
 	}
 

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 () => {

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')

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)

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])