diff --git a/src/app.d.ts b/src/app.d.ts index 14ac5d1..a3d433f 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -6,3 +6,11 @@ declare namespace App { // interface PageData {} // interface Platform {} } + +type UmamiAnalytics = { + track: (name: string, data?: Record) => void +} + +declare interface Window { + umami?: UmamiAnalytics +} \ No newline at end of file diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte index 845cd00..44fffcf 100644 --- a/src/lib/components/pages/Playground/Playground.svelte +++ b/src/lib/components/pages/Playground/Playground.svelte @@ -29,6 +29,7 @@ import Header from '$lib/components/ui/Header.svelte'; import CopyToClipboard from '$lib/components/ui/icons/CopyToClipboard.svelte'; import Button from '$lib/components/ui/Button.svelte'; + import { trackEvent } from '$lib/utils/analytics'; export let data: { [key: string]: BrowserCompatData }; export let locale: string; @@ -39,7 +40,7 @@ onMount(() => { if (getSchemaParam()) { const parsedSchema = parseSchemaFromURL<'NumberFormat'>(); - if(parsedSchema) { + if (parsedSchema) { schema = validateAndUpdateSchema(parsedSchema); } } @@ -61,7 +62,7 @@ ...option, value: clampValue(option, value) } - : {...option} + : { ...option } ); const newSchema: PlaygroundSchema<'NumberFormat'> = { ...schema, @@ -78,6 +79,12 @@ newSchema.inputValues[0] = fallbackDisplayNames[value as unknown as Intl.DisplayNamesType]; } schema = validateAndUpdateSchema(newSchema); + trackEvent('Change Option', { + method: newSchema.method, + option: optionName, + value, + locale, + }); }; const onInput = (event: Event) => { @@ -107,20 +114,34 @@ schemas[value as SchemaKeys] as unknown as PlaygroundSchema<'NumberFormat'> ); schema = newSchema; + trackEvent('Change Schema', { + method: schema.method, + locale, + }); }; const copy = async () => { if (!schema) return; await copyToClipboard(schemaToCode(schema, locale)); + trackEvent('Copy Code', { + method: schema.method, + locale, + }); }; {#if schema}
- +
diff --git a/src/lib/utils/analytics.ts b/src/lib/utils/analytics.ts new file mode 100644 index 0000000..09458eb --- /dev/null +++ b/src/lib/utils/analytics.ts @@ -0,0 +1,17 @@ +export type AnalyticEvents = 'Change Schema' + | 'Copy Schema' + | 'Copy Code' + | 'Change Option' + | 'Parse Schema' + | 'View Browser Support' + +export const trackEvent = ( + name: AnalyticEvents, + data?: Record +) => { + try { + window?.umami?.track(name, data) + } catch (error) { + // noop + } +} \ No newline at end of file