📈 Decouple tracking from share button

src/lib/Inviter.svelte

@@ -2,6 +2,9 @@
   import {page} from '$app/stores'
   import ShareButton from '$lib/ShareButton.svelte'
   import {Toast} from 'spaper'
+  import {getContext} from 'svelte'
+
+  const {getAnalytics} = getContext('analytics')
 
   const inviteUrl = new URL('invite', $page.url).href
 </script>
@@ -20,6 +23,9 @@
       })
       document.getElementById('invite-url').select()
     }}
+    on:click={() => {
+      getAnalytics().trackEvent()('Share invite link')
+    }}
   />
 </form>
 

src/lib/ShareButton.svelte

@@ -1,10 +1,7 @@
 <script>
   import {Button, Modal, Toast} from 'spaper'
-  import {getContext} from 'svelte'
   import ShareIcon from '$lib/ShareIcon.svelte'
 
-  const {getAnalytics} = getContext('analytics')
-
   export let url
   export let shareText
   export let fallback = () => {
@@ -21,7 +18,7 @@
         text: shareText,
         url,
       })
-      trackShareInviteLink('native')
+      console.debug('native')
     } catch (error) {
       console.warn('Unable to use native sharing', error)
       if (error.name === 'AbortError') return // If we try to fallback to 'copy' after this it results in a NotAllowedErorr. I'm guesing this is because when the user aborts share it resets Safari's concept of if is a valid and safe clipboard operation triggered by a user interaction (see https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/).
@@ -33,11 +30,11 @@
           type: 'success',
           position: 'top',
         })
-        trackShareInviteLink('auto copy with dialog')
+        console.debug('auto copy with dialog')
       } catch (error) {
         // One example of when this would happen is in some Android Webviews that don't provide copy permissions.
         console.warn('Unable to copy to clipboard', error)
-        trackShareInviteLink('manual copy with dialog')
+        console.debug('manual copy with dialog')
         fallback()
       }
     }
@@ -48,14 +45,6 @@
       throw new Error('Navigator clipboard not available')
     await navigator.clipboard.writeText(url)
   }
-
-  function trackShareInviteLink(method) {
-    getAnalytics().trackEvent('Share invite link', {
-      props: {
-        method,
-      },
-    })
-  }
 </script>
 
 <Button on:click={share} type="success">

src/routes/[socialId=socialId]/decision/+page.svelte

@@ -30,13 +30,16 @@
   <Retreat back="everyone" />
   <Button
     on:click={() => {
-      getAnalytics().trackEvent('Tapped buy me a beer button')
+      getAnalytics().trackEvent('Buy me a beer')
     }}
     href="https://buymeacoffee.com/homostellaris"
     isLink
     external>Buy the creator a beer 🍻*</Button
   >
   <ShareButton
+    on:click={() => {
+      getAnalytics().trackEvent('Spread the word')
+    }}
     url="https://scheduleyour.social?ref=decision-share"
     shareText="The fastest way to find out when your friends are free"
     >Spread the word</ShareButton