6 files changed, 55 insertions, 16 deletions
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index a2cb35c5..a18eea9d 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -25,11 +25,14 @@ import { get } from "svelte/store";
 </SettingHint>
 <br />
 
-<button onclick={invalidateListCaches}>{$locale().debug.clearCaches}</button>
+<button onclick={invalidateListCaches} data-umami-event="Clear List Caches"
+  >{$locale().debug.clearCaches}</button
+>
 
 <Spacer />
 
 <button
+  data-umami-event="Reset Settings"
   onclick={() => {
     settings.reset();
     addNotification(
@@ -48,6 +51,7 @@ import { get } from "svelte/store";
 <Spacer />
 
 <button
+  data-umami-event="Clear Local Database"
   onclick={async () => {
     await localforage.clear();
     addNotification(
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index 80f21fde..b2acd270 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -7,8 +7,20 @@ import root from "$lib/Utility/root";
 import locale from "$stores/locale";
 import { requestNotifications } from "$lib/Utility/notifications";
 import { getFingerprint } from "$lib/Utility/fingerprint";
+import { track } from "$lib/analytics";
+
+const trackSetting = (key: string) => (event: Event) =>
+	track("Change Setting", {
+		key,
+		value: (event.currentTarget as HTMLSelectElement).value,
+	});
 
 const onHelperChange = () => {
+	track("Change Setting", {
+		key: "displayAoButa",
+		value: $settings.displayAoButa,
+	});
+
 	const mai = document.getElementById("mai") as HTMLImageElement;
 
 	if (!mai) return;
@@ -182,7 +194,11 @@ const onHelperChange = () => {
   text={$locale().settings.display.categories.dataSaver}
   tooltipText={$locale().settings.display.tooltips.dataSaver}
 />
-<select bind:value={$settings.displayLanguage} class="no-shadow">
+<select
+  bind:value={$settings.displayLanguage}
+  class="no-shadow"
+  onchange={trackSetting('displayLanguage')}
+>
   <option value="en">
     {$locale({
       locale: 'en'
@@ -309,7 +325,7 @@ const onHelperChange = () => {
 <Spacer />
 
 <b>{$locale().settings.display.categories.listSortFilterTitle}</b><br />
-<select bind:value={$settings.displayAnimeSort}>
+<select bind:value={$settings.displayAnimeSort} onchange={trackSetting('displayAnimeSort')}>
   <option value="time_remaining"
     >{$locale().settings.display.categories.sortOptions?.timeRemaining}</option
   >
@@ -375,7 +391,7 @@ const onHelperChange = () => {
   text={$locale().settings.display.categories.media.fields.scheduleFilterList}
   id="schedule-filter-list"
 />
-<select bind:value={$settings.displayTitleFormat}>
+<select bind:value={$settings.displayTitleFormat} onchange={trackSetting('displayTitleFormat')}>
   <option value="english">
     {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english}
   </option>
@@ -399,7 +415,10 @@ const onHelperChange = () => {
 
 <Spacer />
 
-<select bind:value={$settings.displayOutboundLinksTo}>
+<select
+  bind:value={$settings.displayOutboundLinksTo}
+  onchange={trackSetting('displayOutboundLinksTo')}
+>
   <option value="anilist">AniList</option>
   <option value="livechartme">LiveChart.me</option>
   <option value="animeschedule">AnimeSchedule</option>
diff --git a/src/lib/Settings/Categories/RSSFeeds.svelte b/src/lib/Settings/Categories/RSSFeeds.svelte
index 08ba7292..eaf21345 100644
--- a/src/lib/Settings/Categories/RSSFeeds.svelte
+++ b/src/lib/Settings/Categories/RSSFeeds.svelte
@@ -11,6 +11,7 @@ export let user: { accessToken: string; refreshToken: string };
 </script>
 
 <button
+  data-umami-event="Copy RSS Feed URL"
   onclick={() => {
     addNotification(
       options({
diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
index dd19db49..e45fdfb9 100644
--- a/src/lib/Settings/Categories/SettingSync.svelte
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -13,6 +13,7 @@ import { get } from "svelte/store";
 
 {#if !$settings.settingsSync}
   <button
+    data-umami-event="Pull Settings"
     onclick={() => {
       $settings.settingsSync = true;
 
@@ -53,6 +54,7 @@ import { get } from "svelte/store";
   </SettingHint>
   <Spacer />
   <button
+    data-umami-event="Push Settings"
     onclick={() => {
       $settings.settingsSync = true;
 
@@ -78,6 +80,7 @@ import { get } from "svelte/store";
   </SettingHint>
 {:else}
   <button
+    data-umami-event="Disable Settings Sync"
     onclick={() => {
       $settings.settingsSync = false;
 
@@ -91,6 +94,7 @@ import { get } from "svelte/store";
     {$locale().settings.settingsSync.buttons.disable}
   </button>
   <button
+    data-umami-event="Delete Remote Settings"
     onclick={() => {
       fetch(root(`/api/configuration?id=${$identity.id}`), {
         method: 'DELETE'
diff --git a/src/lib/Settings/SettingCheckboxToggle.svelte b/src/lib/Settings/SettingCheckboxToggle.svelte
index 1f58520d..e45077f7 100644
--- a/src/lib/Settings/SettingCheckboxToggle.svelte
+++ b/src/lib/Settings/SettingCheckboxToggle.svelte
@@ -2,6 +2,7 @@
 import Spacer from "$lib/Layout/Spacer.svelte";
 import tooltip from "$lib/Tooltip/tooltip";
 import settings, { type Settings } from "$stores/settings";
+import { track } from "$lib/analytics";
 
 type BooleanSettingsKeys<T> = {
 	[K in keyof T]: T[K] extends boolean ? K : never;
@@ -52,13 +53,21 @@ const check = (
 	const checked = (e.target as HTMLInputElement).checked;
 
 	if (setting) {
-		settings.setKey(setting, invert ? !checked : checked);
+		const value = invert ? !checked : checked;
+
+		settings.setKey(setting, value);
+		track("Toggle Setting", { key: setting, value });
 		onChange();
 	}
 };
 
 const flip = () => {
-	if (setting) $settings[setting] = !$settings[setting];
+	if (setting) {
+		const value = !$settings[setting];
+
+		$settings[setting] = value;
+		track("Toggle Setting", { key: setting, value });
+	}
 };
 </script>
 
diff --git a/src/lib/Settings/SettingToggle.svelte b/src/lib/Settings/SettingToggle.svelte
index 0e77c9b0..a84a7a72 100644
--- a/src/lib/Settings/SettingToggle.svelte
+++ b/src/lib/Settings/SettingToggle.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
 import Spacer from "$lib/Layout/Spacer.svelte";
 import settings, { type Settings } from "$stores/settings";
+import { track } from "$lib/analytics";
 
 export let setting: keyof Settings;
 export let on = "";
 export let off = "";
 export let sectionBreak = false;
 export let disabled = false;
+
+const toggle = () => {
+	if (disabled) return;
+
+	const value = !$settings[setting];
+
+	settings.setKey(setting, value);
+	track("Toggle Setting", { key: setting, value });
+};
 </script>
 
-<a
-  href={'#'}
-  onclick={() =>
-    disabled
-      ? {}
-      : $settings[setting]
-        ? settings.setKey(setting, false)
-        : settings.setKey(setting, true)}
->
+<a href={'#'} onclick={toggle}>
   {#if disabled}
     <strike>
       {$settings[setting] ? on : off}