fix: more analytics

jesperorb · Mar 10, 2024 · b16406e · b16406e
1 parent 2aa1300
commit b16406e
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 3 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,8 +6,12 @@
 		<meta name="viewport" content="width=device-width" />
 		<meta
 			name="description"
-			content=" Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API."
+			content="Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API."
 		/>
+		<meta
+			property="og:description"
+			content="Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API." />
+		<meta property="og:title" content="Intl Explorer" />
 		<title>Intl Explorer</title>
 		%sveltekit.head%
 	</head>

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -10,6 +10,7 @@
   import { selectedLocale } from '$lib/store/selected-locale';
 	import { testIds } from '$lib/utils/dom-utils';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import OpenInNewTab from '$lib/components/ui/icons/OpenInNewTab.svelte';
 
 	const matchMedia = browser ? window.matchMedia('(min-width: 900px)') : null;
 	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
@@ -97,7 +98,8 @@
 					class="github"
 					href="https://github.com/jesperorb/intl-explorer"
 					target="_blank"
-					rel="noopener noreferrer">GitHub</a
+					data-umami-event="GitHub Link"
+					rel="noopener noreferrer">GitHub <OpenInNewTab /></a
 				>
 			</li>
 		</ul>

diff --git a/src/lib/components/pages/Collator.svelte b/src/lib/components/pages/Collator.svelte
@@ -13,6 +13,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -23,6 +24,11 @@
 		await copyToClipboard(
 			`[].sort(new Intl.Collator("${locale}", ${JSON.stringify(options)}).compare)`
 		);
+		trackEvent("Copy Code", {
+			method: "Collator",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/DateTimeFormat.svelte b/src/lib/components/pages/DateTimeFormat.svelte
@@ -17,6 +17,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -33,6 +34,11 @@
 				options
 			)}).format(new Date("${dateTimeString}"))`
 		);
+		trackEvent("Copy Code", {
+			method: "DateTimeFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/ListFormat.svelte b/src/lib/components/pages/ListFormat.svelte
@@ -15,6 +15,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -28,6 +29,11 @@
 		await copyToClipboard(
 			`new Intl.ListFormat("${locale}", ${JSON.stringify(options)}).format([])`
 		);
+		trackEvent("Copy Code", {
+			method: "ListFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 
 	const style = listFormatOptions.style ?? [];

diff --git a/src/lib/components/pages/NumberFormat.Currency.svelte b/src/lib/components/pages/NumberFormat.Currency.svelte
@@ -20,6 +20,7 @@
   import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -35,6 +36,11 @@
 		await copyToClipboard(
 			`new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`
 		);
+		trackEvent("Copy Code", {
+			method: "NumberFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/NumberFormat.Unit.svelte b/src/lib/components/pages/NumberFormat.Unit.svelte
@@ -20,6 +20,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -35,6 +36,11 @@
 		await copyToClipboard(
 			`new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`
 		);
+		trackEvent("Copy Code", {
+			method: "NumberFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/NumberFormat.svelte b/src/lib/components/pages/NumberFormat.svelte
@@ -18,6 +18,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -32,6 +33,11 @@
 		await copyToClipboard(
 			`new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`
 		);
+		trackEvent("Copy Code", {
+			method: "NumberFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/PluralRules.svelte b/src/lib/components/pages/PluralRules.svelte
@@ -11,6 +11,7 @@
   import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -23,6 +24,11 @@
 				Object.assign({}, options, { value: undefined })
 			)}).select(${options.value})`
 		);
+		trackEvent("Copy Code", {
+			method: "PluralRules",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 </script>
 

diff --git a/src/lib/components/pages/RelativeTimeFormat.svelte b/src/lib/components/pages/RelativeTimeFormat.svelte
@@ -13,6 +13,7 @@
   import ComboBoxContext from '$lib/components/ui/ComboBox/ComboBoxContext.svelte';
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	export let locale: string;
 	export let browserCompatData: BrowserCompatData | null;
@@ -23,6 +24,11 @@
 				Object.assign({}, options, { value: undefined })
 			)}).format(${dayValue}, "${options.value}")`
 		);
+		trackEvent("Copy Code", {
+			method: "RelativeTimeFormat",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 
 	let dayValue = 2;

diff --git a/src/lib/components/pages/Segmenter.svelte b/src/lib/components/pages/Segmenter.svelte
@@ -14,6 +14,7 @@
   import ComboBox from '$lib/components/ui/ComboBox/ComboBox.svelte';
   import { selectedLocale } from '$lib/store/selected-locale';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
+	import { trackEvent } from '$lib/utils/analytics';
 
 	let sentence = 'This is a sentence.';
 	export let locale: string;
@@ -25,6 +26,11 @@
 				options
 			)}).segment("${sentence}"))`
 		);
+		trackEvent("Copy Code", {
+			method: "Segmenter",
+			options: JSON.stringify(options),
+			locale,
+		})
 	};
 
 	const getOutput = (options: OptionValues) => {

diff --git a/src/lib/components/ui/MDNLink.svelte b/src/lib/components/ui/MDNLink.svelte
@@ -9,5 +9,7 @@
 		header
 	)}"
 	target="_blank"
+	data-umami-event="MDN Link"
+	data-umami-event-method="{header}"
 	rel="noopener noreferrer">MDN<OpenInNewTab /></a
 >
diff --git a/src/lib/store/selected-locale.ts b/src/lib/store/selected-locale.ts
@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { trackEvent } from '$lib/utils/analytics';
 import { getLocaleFromParams, localeFallback, localeKey } from '$lib/utils/get-locale';
 import { writable } from 'svelte/store';
 
@@ -8,6 +9,9 @@ selectedLocale.subscribe((value) => {
 	if (browser) {
 		const params = new URLSearchParams(window.location.search);
 		params.set(localeKey, value);
+		trackEvent("Change Locale", {
+			locale: value,
+		})
 		window.history.replaceState(
 			{},
 			'',

diff --git a/src/lib/utils/analytics.ts b/src/lib/utils/analytics.ts
@@ -3,7 +3,7 @@ export type AnalyticEvents = 'Change Schema'
   | 'Copy Code'
   | 'Change Option'
   | 'Parse Schema'
-  | 'View Browser Support'
+  | 'Change Locale'
 
 export const trackEvent = (
   name: AnalyticEvents,

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Page } from '@sveltejs/kit';
+	import { dev } from '$app/environment';
 	import type { FormatMethodsKeys } from '$lib/format-methods';
 	import { page, navigating } from '$app/stores';
 
@@ -18,7 +19,9 @@
 
 <svelte:head>
 	<title>{routeId ?? 'Intl Explorer'}</title>
+	{#if !dev}
 	<script defer src="https://umami-xi-eosin.vercel.app/script.js" data-website-id="a1ca3232-d4d8-44ac-92f0-656a91ceb36c"></script>
+	{/if}
 </svelte:head>
 
 <SkipLink />