Add GA4 events

src/app/Analytics.ts

@@ -1,4 +1,10 @@
+import type { VersionId } from './services'
+
+type Method = 'menu' | 'hotkey'
+
 export namespace Analytics {
+
+	/** Universal Analytics */
 	const ID_SITE = 'Site'
 	const ID_GENERATOR = 'Generator'
 
@@ -22,19 +28,40 @@ export namespace Analytics {
 		ga('send', 'pageview')
 	}
 
-	export function setLanguage(language: string) {
-		dimension(DIM_LANGUAGE, language)
-		event(ID_SITE, 'set-language', language)
+	/**
+	 * @deprecated
+	 */
+	export function generatorEvent(action: string, label?: string) {
+		event(ID_GENERATOR, action, label)
+	}
+
+	function legacyMethod(method: Method) {
+		return method === 'menu' ? 'Menu' : 'Hotkey'
+	}
+	/** END Universal Analytics 4 */
+
+	export function setLocale(locale: string) {
+		dimension(DIM_LANGUAGE, locale)
+		event(ID_SITE, 'set-language', locale)
+		gtag('event', 'use_locale', {
+			locale,
+		})
 	}
 
 	export function setTheme(theme: string) {
 		dimension(DIM_THEME, theme)
 		event(ID_SITE, 'set-theme', theme)
+		gtag('event', 'use_theme', {
+			theme,
+		})
 	}
 
 	export function setVersion(version: string) {
 		dimension(DIM_VERSION, version)
 		event(ID_GENERATOR, 'set-version', version)
+		gtag('event', 'use_version', {
+			version,
+		})
 	}
 
 	export function setPreview(preview: string) {
@@ -42,15 +69,134 @@ export namespace Analytics {
 		event(ID_GENERATOR, 'set-preview', preview)
 	}
 
-	export function setGenerator(generator: string) {
-		dimension(DIM_GENERATOR, generator)
+	export function setGenerator(file_type: string) {
+		dimension(DIM_GENERATOR, file_type)
+		gtag('event', 'use_generator', {
+			file_type,
+		})
 	}
 
-	export function setPrefersColorScheme(colorScheme: string) {
-		dimension(DIM_PREFERS_COLOR_SCHEME, colorScheme)
+	export function setPrefersColorScheme(color_scheme: string) {
+		dimension(DIM_PREFERS_COLOR_SCHEME, color_scheme)
+		gtag('event', 'prefers_color_scheme', {
+			color_scheme,
+		})
 	}
 
-	export function generatorEvent(action: string, label?: string) {
-		event(ID_GENERATOR, action, label)
+	export function resetGenerator(file_type: string, history: number, method: Method) {
+		event(ID_GENERATOR, 'reset')
+		gtag('event', 'reset_generator', {
+			file_type,
+			history,
+			method,
+		})
+	}
+
+	export function undoGenerator(file_type: string, history: number, method: Method) {
+		event(ID_GENERATOR, 'undo', legacyMethod(method))
+		gtag('event', 'undo_generator', {
+			file_type,
+			history,
+			method,
+		})
+	}
+
+	export function redoGenerator(file_type: string, history: number, method: Method) {
+		event(ID_GENERATOR, 'undo', legacyMethod(method))
+		gtag('event', 'redo_generator', {
+			file_type,
+			history,
+			method,
+		})
+	}
+
+	export function saveProjectFile(file_type: string, project_size: number, projects_count: number, method: Method) {
+		event(ID_GENERATOR, 'save-project-file', legacyMethod(method))
+		gtag('event', 'save_project_file', {
+			file_type,
+			project_size,
+			projects_count,
+			method,
+		})
+	}
+
+	export function loadPreset(file_type: string, file_name: string) {
+		event(ID_GENERATOR, 'load-preset', file_name)
+		gtag('event', 'load_generator_preset', {
+			file_type,
+			file_name,
+		})
+	}
+
+	export function openPreset(file_type: string, file_name: string) {
+		gtag('event', 'open_generator_preset', {
+			file_type,
+			file_name,
+		})
+	}
+
+	export function createSnippet(file_type: string, snippet_id: string, version: VersionId, data_size: number, compressed_size: number, compression_rate: number) {
+		gtag('event', 'create_generator_snippet', {
+			file_type,
+			snippet_id,
+			version,
+			data_size,
+			compressed_size,
+			compression_rate,
+		})
+	}
+
+	export function openSnippet(file_type: string, snippet_id: string, version: VersionId) {
+		gtag('event', 'open_generator_snippet', {
+			file_type,
+			snippet_id,
+			version,
+		})
+	}
+
+	export function copyOutput(file_type: string, method: Method) {
+		gtag('event', 'copy_generator_output', {
+			file_type,
+			method,
+		})
+	}
+
+	export function downloadOutput(file_type: string, method: Method) {
+		gtag('event', 'download_generator_output', {
+			file_type,
+			method,
+		})
+	}
+
+	export function showOutput(file_type: string, method: Method) {
+		event(ID_GENERATOR, 'toggle-output', 'visible')
+		gtag('event', 'show_generator_output', {
+			file_type,
+			method,
+		})
+	}
+
+	export function hideOutput(file_type: string, method: Method) {
+		event(ID_GENERATOR, 'toggle-output', 'hidden')
+		gtag('event', 'hide_generator_output', {
+			file_type,
+			method,
+		})
+	}
+
+	export function showPreview(file_type: string, method: Method) {
+		event(ID_GENERATOR, 'toggle-preview', 'visible')
+		gtag('event', 'show_generator_preview', {
+			file_type,
+			method,
+		})
+	}
+
+	export function hidePreview(file_type: string, method: Method) {
+		event(ID_GENERATOR, 'toggle-preview', 'hidden')
+		gtag('event', 'hide_generator_preview', {
+			file_type,
+			method,
+		})
 	}
 }