Track events

src/lib/components/actions.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { browser } from '$app/env';
-
 	import Card from '$lib/components/card/card.svelte';
 	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
 	import { pakoSerde } from '$lib/util/serde';
 	import { stateStore } from '$lib/util/state';
+	import { logEvent } from '$lib/util/stats';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
 
@@ -115,19 +115,23 @@
 
 	const onCopyClipboard = (event: Event) => {
 		exportImage(event, clipboardCopy);
+		void logEvent('copyClipboard');
 	};
 
 	const onDownloadPNG = (event: Event) => {
 		exportImage(event, downloadImage);
+		void logEvent('downloadPNG');
 	};
 
 	const onDownloadSVG = () => {
 		simulateDownload(getFileName('svg'), `data:image/svg+xml;base64,${getBase64SVG()}`);
+		void logEvent('downloadSVG');
 	};
 
 	const onCopyMarkdown = () => {
 		(document.getElementById('markdown') as HTMLInputElement).select();
 		document.execCommand('Copy');
+		void logEvent('copyMarkdown');
 	};
 
 	let gistURL = '';
@@ -143,6 +147,7 @@
 			alert('Please enter a Gist URL first');
 		}
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
+		void logEvent('loadGist');
 	};
 
 	let iUrl: string;

src/lib/components/editor.svelte

@@ -6,6 +6,7 @@
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import initEditor from 'monaco-mermaid';
+	import { logEvent } from '$lib/util/stats';
 
 	let divEl: HTMLDivElement = null;
 	let editor: monaco.editor.IStandaloneCodeEditor;
@@ -76,6 +77,9 @@
 			keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
 			run: function () {
 				syncDiagram();
+				void logEvent('renderDiagram', {
+					method: 'keyboadShortcut'
+				});
 			}
 		});
 		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');

src/lib/components/preset.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { updateCode } from '$lib/util/state';
 	import Card from '$lib/components/card/card.svelte';
+	import { logEvent } from '$lib/util/stats';
 
 	const samples = {
 		'Flow Chart': `graph TD
@@ -100,6 +101,7 @@
 			updateEditor: true,
 			resetPanZoom: true
 		});
+		void logEvent('loadSampleDiagram', { diagramType });
 	};
 </script>
 

src/lib/components/view.svelte

@@ -4,6 +4,7 @@
 	import mermaid from 'mermaid';
 	import panzoom from 'svg-pan-zoom';
 	import type { State } from '$lib/types';
+	import { logEvent } from '$lib/util/stats';
 
 	let code = '';
 	let config = '';
@@ -23,6 +24,7 @@
 		clearTimeout(debounce);
 		debounce = window.setTimeout(() => {
 			updateCodeStore({ pan, zoom });
+			void logEvent('panZoom');
 		}, 200);
 	};
 

src/lib/util/stats.ts

@@ -33,17 +33,20 @@ const detectType = (text: string): string => {
 };
 
 // manual debounce
-let timeout;
+let timeout: number;
 export const saveStatistics = (graph: string): void => {
 	if (analytics) {
 		clearTimeout(timeout);
 		// Only save statistics after a 5 sec delay
-		timeout = setTimeout(function () {
+		timeout = window.setTimeout(() => {
 			const graphType = detectType(graph);
-			console.debug('ga:', 'send', 'event', 'render', graphType);
-			void analytics.track('render', {
-				graphType
-			});
+			console.debug(`ga: send event: render ${graphType}`);
+			void logEvent('render', { graphType });
 		}, 5000);
 	}
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const logEvent = async (name: string, data?: any): Promise<void> => {
+	await analytics?.track(name, data);
+};

src/lib/util/theme.ts

@@ -1,6 +1,7 @@
 import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
+import { logEvent } from './stats';
 
 export interface ThemeConfig {
 	isDark: boolean;
@@ -33,4 +34,5 @@ export const setTheme = (theme: string): void => {
 	const isDark = darkThemes.includes(theme);
 	console.log('Setting theme', theme);
 	themeStore.set({ theme, isDark });
+	void logEvent('themeChange', { theme, isDark });
 };