Add tracking events for user interactions and modal displays

Author: mszula

src/lib/components/AlgorithmSelector.svelte

@@ -6,9 +6,11 @@
   import type { AlgorithmDefinition } from '../sort-algorithms/types';
   import ArrowRight from './algorithm-selector/ArrowRight.svelte';
   import ArrowLeft from './algorithm-selector/ArrowLeft.svelte';
+  import { trackEvent } from '../umami';
 
   const click = (algo: AlgorithmDefinition) => () => {
     selectAlgorithm(algo);
+    trackEvent('algorithm-selected', { algorithm: algo.name });
   };
 </script>
 

src/lib/components/ControlButtons.svelte

@@ -5,17 +5,23 @@
 
   import { arrayToSort, running } from '../../states';
   import { generateArray, shuffle } from '../randomized-array-generator';
+  import { trackEvent } from '../umami';
 
-  const start = () => ($running = !$running);
+  const start = () => {
+    $running = !$running;
+    trackEvent('sort-control', { action: $running ? 'start' : 'stop' });
+  };
 
   const reverse = () => {
     $arrayToSort = generateArray(size).reverse();
     reset();
+    trackEvent('array-pattern', { pattern: 'reverse' });
   };
 
   const shuffleClick = () => {
     $arrayToSort = shuffle(generateArray(size));
     reset();
+    trackEvent('array-pattern', { pattern: 'shuffle' });
   };
 
   const oddsEvens = () =>
@@ -34,13 +40,20 @@
     $arrayToSort = [...odds.reverse(), ...evens];
 
     reset();
+    trackEvent('array-pattern', { pattern: 'valley' });
   };
 
   const mountain = () => {
     const [odds, evens] = oddsEvens();
     $arrayToSort = [...odds, ...evens.reverse()];
 
     reset();
+    trackEvent('array-pattern', { pattern: 'mountain' });
+  };
+
+  const stepClick = () => {
+    step();
+    trackEvent('sort-control', { action: 'step' });
   };
 </script>
 
@@ -52,7 +65,7 @@
         : 'btn-primary'} lg:btn-lg lg:w-24"
       on:click={start}>{$running ? 'Stop' : 'Start'}</button
     >
-    <button class="btn join-item lg:btn-lg lg:w-24" on:click={step}>Step</button
+    <button class="btn join-item lg:btn-lg lg:w-24" on:click={stepClick}>Step</button
     >
   </div>
   <button class="btn lg:btn-lg" on:click={shuffleClick}>Shuffle</button>

src/lib/components/Footer.svelte

@@ -1,10 +1,19 @@
+<script lang="ts">
+  import { trackEvent } from '../umami';
+
+  const handleGitHubClick = () => {
+    trackEvent('external-link', { destination: 'github-profile' });
+  };
+</script>
+
 <footer class="footer items-center p-4 bg-base-200">
   <aside class="items-center grid-flow-col">
     <p class="text-xs lg:text-sm">
       Built with ☕️ and ❤️ by <a
         class="link"
         href="https://github.com/mszula"
-        target="_blank">mszula</a
+        target="_blank"
+        on:click={handleGitHubClick}>mszula</a
       >
       using Svelte.
       <span class="text-xs opacity-30"

src/lib/components/HeaderGitHubButton.svelte

@@ -1,7 +1,16 @@
+<script lang="ts">
+  import { trackEvent } from '../umami';
+
+  const handleClick = () => {
+    trackEvent('external-link', { destination: 'github-repo' });
+  };
+</script>
+
 <a
   class="lg:btn lg:btn-square lg:btn-ghost"
   href="https://github.com/mszula/visual-sorting"
   target="_blank"
+  on:click={handleClick}
 >
   <svg
     class="w-[24px] h-[24px]"

src/lib/components/HeaderSoundControl.svelte

@@ -2,6 +2,7 @@
   import { customOscillatorTypes } from 'web-audio-oscillators';
   import { type OscillatorType } from '../sound';
   import { handleMenuOutsideClick } from './menu-outside-click-handler';
+  import { trackEvent } from '../umami';
 
   export let oscillatorType: OscillatorType;
 
@@ -15,6 +16,11 @@
     );
   };
 
+  const changeSound = (type: OscillatorType) => {
+    oscillatorType = type;
+    trackEvent('sound-changed', { type: type || 'none' });
+  };
+
   let ref: HTMLDetailsElement;
 </script>
 
@@ -67,17 +73,15 @@
       <button
         class={!oscillatorType ? 'btn-active' : ''}
         data-sound-select
-        on:click={() => (oscillatorType = null)}>None</button
+        on:click={() => changeSound(null)}>None</button
       >
     </li>
     {#each customOscillatorTypes as osc}
       <li>
         <button
           class={osc === oscillatorType ? 'btn-active' : ''}
           data-sound-select
-          on:click={() => {
-            oscillatorType = osc;
-          }}>{getOscillatorName(osc)}</button
+          on:click={() => changeSound(osc)}>{getOscillatorName(osc)}</button
         >
       </li>
     {/each}

src/lib/components/HeaderThemeControl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import themes from '../../themes.js';
   import { handleMenuOutsideClick } from './menu-outside-click-handler';
+  import { trackEvent } from '../umami';
 
   export let selectedTheme: string;
 
@@ -14,6 +15,7 @@
     selectedTheme = e.currentTarget.dataset.setTheme || 'dim';
 
     document.documentElement.setAttribute('data-theme', selectedTheme);
+    trackEvent('theme-changed', { theme: selectedTheme });
   };
 </script>
 

src/lib/components/KoFiSupportModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { running } from '../../states';
+  import { trackEvent } from '../umami';
 
   let ref: HTMLDialogElement;
   let timedOut = false;
@@ -19,16 +20,19 @@
   $: if (!$running && timedOut && !showed) {
     ref.showModal();
     showed = true;
+    trackEvent('modal-shown', { modal: 'kofi-support' });
   }
 
   const handleClick = () => {
     localStorage.setItem('kofi-support-shown', 'true');
     ref.close();
+    trackEvent('modal-action', { modal: 'kofi-support', action: 'kofi-clicked' });
   };
 
   const handleDismiss = () => {
     localStorage.setItem('kofi-support-shown', 'true');
     ref.close();
+    trackEvent('modal-action', { modal: 'kofi-support', action: 'maybe-later' });
   };
 </script>
 

src/lib/components/LeaveAStarModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { running } from '../../states';
+  import { trackEvent } from '../umami';
 
   let ref: HTMLDialogElement;
   let timedOut = false;
@@ -19,11 +20,17 @@
   $: if (!$running && timedOut && !showed) {
     ref.showModal();
     showed = true;
+    trackEvent('modal-shown', { modal: 'github-star' });
   }
 
   const click = () => {
     localStorage.setItem('leaved-a-star', 'yup');
     ref.close();
+    trackEvent('modal-action', { modal: 'github-star', action: 'star-clicked' });
+  };
+
+  const dismiss = () => {
+    trackEvent('modal-action', { modal: 'github-star', action: 'maybe-later' });
   };
 </script>
 
@@ -53,7 +60,7 @@
         ⭐️ Star on GitHub
       </a>
       <form method="dialog">
-        <button class="btn">Maybe Later</button>
+        <button class="btn" on:click={dismiss}>Maybe Later</button>
       </form>
     </div>
   </div>

src/lib/components/RangeArraySize.svelte

@@ -2,6 +2,11 @@
   export let size: number;
 
   import { running } from '../../states';
+  import { trackEvent } from '../umami';
+
+  const handleChange = () => {
+    trackEvent('array-size-changed', { size });
+  };
 </script>
 
 <label class="form-control w-full mb-2">
@@ -18,5 +23,6 @@
     min="2"
     type="range"
     bind:value={size}
+    on:change={handleChange}
   />
 </label>

src/lib/components/RangeArraySizePowerOfTwo.svelte

@@ -2,6 +2,7 @@
   export let size: number;
 
   import { running } from '../../states';
+  import { trackEvent } from '../umami';
 
   const steps = [2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];
 
@@ -11,6 +12,10 @@
       Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev
     );
   }
+
+  const handleChange = () => {
+    trackEvent('array-size-changed', { size, type: 'power-of-two' });
+  };
 </script>
 
 <label class="form-control w-full mb-2">
@@ -28,6 +33,7 @@
         type="radio"
         {value}
         bind:group={size}
+        on:change={handleChange}
       />
     {/each}
   </div>