add tracking events

Author: thejessewinton

src/routes/(marketing)/(components)/bento/(animations)/auth.svelte

@@ -7,6 +7,7 @@
     import { classNames } from '$lib/utils/classnames';
     import GridPaper from '../../grid-paper.svelte';
     import { unwrite, write } from '$lib/animations';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let container: HTMLElement;
 
@@ -45,6 +46,9 @@
 <a
     href="/products/auth"
     class="border-smooth col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6"
+    onclick={() => {
+        trackEvent(`bento-auth-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/databases.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
     import { classNames } from '$lib/utils/classnames';
     import { isMobile } from '$lib/utils/is-mobile';
     import GridPaper from '../../grid-paper.svelte';
@@ -142,6 +143,9 @@
 <a
     href="/docs/products/databases"
     class="border-smooth col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6"
+    onclick={() => {
+        trackEvent(`bento-databases-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/functions.svelte

@@ -5,6 +5,7 @@
     import { isMobile } from '$lib/utils/is-mobile';
     import { classNames } from '$lib/utils/classnames';
     import Checkmark from '$lib/components/fancy/checkmark.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     const commands = [
         'GenerateReport',
@@ -88,6 +89,9 @@
 <a
     href="/products/functions"
     class="border-smooth col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6 lg:col-span-4"
+    onclick={() => {
+        trackEvent(`bento-functions-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte

@@ -8,6 +8,7 @@
     import Messages from '../../../(assets)/icons/messages.svg';
     import Settings from '../../../(assets)/icons/settings.svg';
     import GridPaper from '../../grid-paper.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let container: HTMLElement;
 
@@ -52,6 +53,9 @@
 <a
     href="/products/messaging"
     class="border-smooth group col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6 lg:col-span-4"
+    onclick={() => {
+        trackEvent(`bento-messaging-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte

@@ -6,6 +6,7 @@
     import TopRight from '../../../(assets)/images/top-right.svg';
     import Puzzle from '../../../(assets)/images/puzzle.svg';
     import GridPaper from '../../grid-paper.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let container: HTMLElement;
 
@@ -60,6 +61,9 @@
 <a
     href="/docs/apis/realtime"
     class="border-smooth col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6 lg:col-span-5"
+    onclick={() => {
+        trackEvent(`bento-realtime-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/sites.svelte

@@ -6,6 +6,7 @@
     import { classNames } from '$lib/utils/classnames';
     import Spinner from '../../spinner.svelte';
     import { unwrite, write } from '$lib/animations';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let container: HTMLElement;
     let seconds = $state<number>(32);
@@ -100,6 +101,9 @@
 <a
     href="/products/sites"
     class="border-smooth group col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] lg:col-span-7"
+    onclick={() => {
+        trackEvent(`bento-sites-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/bento/(animations)/storage.svelte

@@ -4,6 +4,7 @@
     import { animate, hover, inView, type AnimationSequence } from 'motion';
     import GridPaper from '../../grid-paper.svelte';
     import { isMobile } from '$lib/utils/is-mobile';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let container: HTMLElement;
     let image: HTMLElement;
@@ -58,6 +59,9 @@
 <a
     href="/products/storage"
     class="border-smooth group col-span-12 flex flex-col rounded-2xl border bg-white/2 p-2 transition-shadow duration-300 hover:shadow-[0px_0px_0px_4px_var(--color-offset)] focus:shadow-[0px_0px_0px_4px_var(--color-offset)] md:col-span-6 lg:col-span-4"
+    onclick={() => {
+        trackEvent(`bento-storage-click`);
+    }}
     bind:this={container}
 >
     <div class="space-y-3 px-3 pt-2 pb-4">

src/routes/(marketing)/(components)/hero.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import { trackEvent } from '$lib/actions/analytics';
     import AppwriteIn100Seconds from '$lib/components/AppwriteIn100Seconds.svelte';
     import GradientText from '$lib/components/fancy/gradient-text.svelte';
     import { Button } from '$lib/components/ui';
@@ -40,8 +41,12 @@
             </p>
 
             <div class="mt-4 flex flex-col gap-2 lg:flex-row">
-                <Button href={PUBLIC_APPWRITE_DASHBOARD} class="w-full! lg:w-fit!"
-                    >Start building for free</Button
+                <Button
+                    href={PUBLIC_APPWRITE_DASHBOARD}
+                    class="w-full! lg:w-fit!"
+                    onclick={() => {
+                        trackEvent(`hero-start-building-click`);
+                    }}>Start building for free</Button
                 >
                 <AppwriteIn100Seconds />
             </div>

src/routes/(marketing)/(components)/platforms.svelte

@@ -18,6 +18,7 @@
     import GradientText from '$lib/components/fancy/gradient-text.svelte';
     import Noise from '$lib/components/fancy/noise.svelte';
     import { Tooltip } from 'bits-ui';
+    import { trackEvent } from '$lib/actions/analytics';
 
     const platforms = [
         {
@@ -119,7 +120,14 @@
                                         )}
                                         aria-hidden={i < platforms.length - 1}
                                     >
-                                        <a href={platform.href} class="contents">
+                                        <a
+                                            href={platform.href}
+                                            class="contents"
+                                            onclick={() =>
+                                                trackEvent(
+                                                    `technologies-${platform.name.replace(' ', '-').toLowerCase()}-click`
+                                                )}
+                                        >
                                             <img
                                                 src={platform.icon}
                                                 alt={platform.name}